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

最近一直在做小程序項(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)