注冊(cè)登錄

使用Taro框架開發(fā)小程序

2018-09-20
導(dǎo)讀:最近一直在做小程序項(xiàng)目的開發(fā),上手直接就是wepy, 風(fēng)格跟vue差不多,整體上,還算穩(wěn)定,開發(fā)起來比原生的效率要高一點(diǎn);很多人也知道,mpvue就是用vue搭建的,但始終覺得,失去了...

最近一直在做小程序項(xiàng)目的開發(fā),上手直接就是wepy, 風(fēng)格跟vue差不多,整體上,還算穩(wěn)定,開發(fā)起來比原生的效率要高一點(diǎn);很多人也知道,mpvue就是用vue搭建的,但始終覺得,失去了路由的vue,就像失去了靈魂;雖然接下來要給大家安利的框架,也貌似失去了該靈魂- taro框架( Taro 是一套遵循React 語法規(guī)范的 多端開發(fā) 解決方案。)

taro開發(fā)文檔: nervjs.github.io/taro/docs/R…

有興趣的可以去看看,在這里我將我初步入坑的學(xué)習(xí)過程,以及構(gòu)建了大致礦建與大家分享下:

一:安裝 Taro 開發(fā)工具 @tarojs/cli

npm install -g @tarojs/cli
復(fù)制代碼
二:使用命令創(chuàng)建模板項(xiàng)目
taro init taro-react-mini-program
復(fù)制代碼

可以根據(jù)自己的需要,選擇是否使用ts, sass或者less, 接著等安裝好依賴,項(xiàng)目就構(gòu)建完成;

三:項(xiàng)目目錄結(jié)構(gòu)
├── dist                   編譯結(jié)果目錄
├── config                 配置目錄
|   ├── dev.js             開發(fā)時(shí)配置
|   ├── index.js           默認(rèn)配置
|   └── prod.js            打包時(shí)配置
├── src                    源碼目錄
|   ├── pages              頁面文件目錄
|   |   ├── index          index頁面目錄
|   |   |   ├── index.js   index頁面邏輯
|   |   |   └── index.css  index頁面樣式
|   ├── app.css            項(xiàng)目總通用樣式
|   └── app.js             項(xiàng)目入口文件
└── package.json
復(fù)制代碼

框架的使用和注意事項(xiàng),文檔中有介紹,我這邊主要寫一些項(xiàng)目配置和踩過的坑;

這里需要先安裝一些依賴

npm install tslint stylelint tslint-config-prettier -D
復(fù)制代碼

代碼規(guī)范 .prettierrc

{
    "stylelintIntegration": true,
    "tslintIntegration": true,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": false
}
復(fù)制代碼

.prettierignore

/**/libs/**
dist/
lib/
復(fù)制代碼

樣式規(guī)范: .stylelintrc.js

module.exports = {
  ignoreFiles: ['**/*.md', '**/*.ts', '**/*.tsx', '**/*.js']
}
復(fù)制代碼

.stylelintignore

**/dist
復(fù)制代碼

tslint.json

{
  "extends": ["tslint:recommended", "tslint-config-prettier"],
  "rules": {
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-access": false,
    "member-ordering": false,
    "no-empty-interface": false,
    "no-console": [true, "warning"],
    "interface-name": [true, "never-prefix"],
    "no-empty": false,
    "quotemark": [true, "single"]
    // "semicolon": [false], // 結(jié)尾比較分號(hào)
    // "trailing-comma": [false], // 結(jié)尾必須逗號(hào)
    // "requireForBlockBody": true,
  }
}
復(fù)制代碼

接著配置git的提交commit提交驗(yàn)證,需要安裝對(duì)應(yīng)的依賴包,可以從我的另外一篇文章看:

juejin.im/post/5b9867…

再加上自己配置一個(gè).gitignore文件,就這樣,我們將大致需要的配置文件都配置好了;看看效果:

當(dāng)有不規(guī)范的代碼提交的時(shí)候

 

把所有問題都解決之后提交,當(dāng)然tslint以及其他的一些配置都是自定義的,可以自己配置。覺得麻煩的可以根據(jù)自己的“口味”配置項(xiàng)目

 

然后我們就可以愉快的開發(fā)我們的項(xiàng)目,運(yùn)行npm run dev:weapp,打開我們的小程序

 

很多人反饋用原生的 Taro.request或者用第三方axios等等做異步請(qǐng)求總會(huì)有錯(cuò),我沒親測(cè),但是自己用promise封裝了方法, 在根目錄src文件夾下創(chuàng)建utils文件夾, 在這里我簡(jiǎn)單的模擬微信授權(quán)登錄,以及檢測(cè)session是否過期,綁定用戶的場(chǎng)景寫一個(gè)大概例子,接口為虛構(gòu):

├── utils                 
|   ├── api.ts            請(qǐng)求接口設(shè)置
|   ├── http.ts           http公共請(qǐng)求文件
|   └── index.ts          

復(fù)制代碼

http.ts代碼如下:

import Taro from '@tarojs/taro'
import md5 from 'blueimp-md5'

type HttpMethods = 'GET' | 'POST' | 'PUT' | 'DELETE'

// 后端是否支持json格式
const contentType = 'application/x-www-form-urlencoded'
// const contentType = 'application/json'

export default class Http {
  noNeedToken = ['mockFakeApi']

  get(url: string, data: object) {
    return this.commonHttp('GET', url, data)
  }

  post(url: string, data: object) {
    return this.commonHttp('POST', url, data)
  }

  async commonHttp(method: HttpMethods, url: string, data: object) {
    return new Promise<any>(async (resolve, reject) => {
      Taro.showNavigationBarLoading()
      try {
        const res = await Taro.request({
          url,
          method,
          data,
          header: {
            'content-type': contentType
          }
        })
        Taro.hideNavigationBarLoading()
        switch (res.statusCode) {
          case 200:
            return resolve(res.data.response)
          default:
            console.log(res.data.message)
            reject(new Error(res.data.msg))
        }
      } catch (error) {
        Taro.hideNavigationBarLoading()
        reject(new Error('網(wǎng)絡(luò)請(qǐng)求出錯(cuò)'))
      }
    })
  }
}

復(fù)制代碼

api.ts

import Http from './http'

const http = new Http()

//  自動(dòng)登錄
const url = 'xxxxx'
export const login = (data: object) => http.post(url, data)

復(fù)制代碼

index.ts (自定義公共處理接口文件)

import Taro from '@tarojs/taro'
import { login } from './api'

// 獲取微信登錄憑證
export const wxLogin = async () => {
  try {
    const res = await Taro.login()
    return res.code
  } catch (error) {
    console.log('微信獲取臨時(shí)憑著失敗')
  }
}

export const userLogin = async () => {
  try {
    await Taro.checkSession()
    if (!Taro.getStorageSync('token')) {
      throw new Error('本地沒有緩存token')
    }
  } catch (error) {
    const code = await wxLogin()
    const loginRes: any = await login({
      code
      // ...(其他參數(shù))
    })
    console.log('用戶數(shù)據(jù)', loginRes)
  }
}

復(fù)制代碼

最后在pages/index/index.tsx中引用就好了

import { userLogin } from '../../utils/index'

....

async componentDidMount() {
    await userLogin()
  }
復(fù)制代碼

整個(gè)框架的使用大致就是這樣了,react的書法風(fēng)格還是挺舒服的,如果習(xí)慣了vue的寫法可能剛開始會(huì)不習(xí)慣,有興趣的可以嘗試嘗試,下面再簡(jiǎn)單的把一些小技巧給補(bǔ)上:

一:圖片以模塊的方式的引入

使用ts搭建的項(xiàng)目,引入靜態(tài)資源,比如圖片,會(huì)提示找不到模塊,這時(shí)候就必須將圖片聲明為一個(gè)模塊:

在types目錄的global.d.ts文件下:

declare module ‘*.png’ {

? const img: any

? export default img

}

二:動(dòng)態(tài)添加style
<View style={{backgroundImage: `url(${bgImg})`}}></View>
復(fù)制代碼
三:動(dòng)態(tài)添加class
1.<View className={data.length>0?’class-yes’: ’class-no'}></View>

2.<View className={`common ${data.length>0?’class-yes’: ’class-no}`}></View>
復(fù)制代碼
四:this的指向問題

1)在 Taro 的頁面和組件類中, this 指向的是 Taro 頁面或組件的實(shí)例,如果我們要引用原生組件,需要使用到this的時(shí)候,如果如下引用:

Taro.createCanvasContext(canvasId, this.$scope)
wx.createLivePlayerContext(liveId, this.$scope)

錯(cuò)誤:wx.createLivePlayerContext(liveId, this)這樣引入是沒有效果的,this并不是指向 wx.createLivePlayerContext.

(當(dāng)前版本沒有l(wèi)iveplayer的回調(diào)方法,所以直接用原生wx)

重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店