使用Taro框架開發小程式

AntYi發表於2018-09-18
框架

最近一直在做小程式專案的開發，上手直接就是wepy, 風格跟vue差不多，整體上，還算穩定，開發起來比原生的效率要高一點；很多人也知道，mpvue就是用vue搭建的，但始終覺得，失去了路由的vue，就像失去了靈魂；雖然接下來要給大家安利的框架，也貌似失去了該靈魂- taro框架（Taro 是一套遵循 React 語法規範的 多端開發 解決方案。）

taro開發文件： nervjs.github.io/taro/docs/R…

在這裡我將我初步入坑的學習過程，以及構建了大致框架與大家分享下,一直深記我現在的大佬vega的一句話：

“在學習過程中，即使可以複製的程式碼，我都會再自己敲一遍加深印象”

所以感興趣的小夥伴，也可以跟著一步一步做：

一：安裝 Taro 開發工具 @tarojs/cli
npm install -g @tarojs/cli
複製程式碼
二：使用命令建立模板專案
taro init taro-react-mini-program
複製程式碼

在這裡插入圖片描述

可以根據自己的需要，選擇是否使用ts, sass或者less, 接著等安裝好依賴，專案就構建完成；

三：專案目錄結構

├── dist                   編譯結果目錄
├── config                 配置目錄
|   ├── dev.js             開發時配置
|   ├── index.js           預設配置
|   └── prod.js            打包時配置
├── src                    原始碼目錄
|   ├── pages              頁面檔案目錄
|   |   ├── index          index頁面目錄
|   |   |   ├── index.js   index頁面邏輯
|   |   |   └── index.css  index頁面樣式
|   ├── app.css            專案總通用樣式
|   └── app.js             專案入口檔案
└── package.json
複製程式碼

框架的使用和注意事項，文件中有介紹，我這邊主要寫一些專案配置和踩過的坑;

這裡需要先安裝一些依賴

npm install tslint stylelint tslint-config-prettier -D
複製程式碼

程式碼規範 .prettierrc

{
    "stylelintIntegration": true,
    "tslintIntegration": true,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": false
}
複製程式碼

.prettierignore

/**/libs/**
dist/
lib/
複製程式碼

樣式規範： .stylelintrc.js

module.exports = {
  ignoreFiles: ['**/*.md', '**/*.ts', '**/*.tsx', '**/*.js']
}
複製程式碼

.stylelintignore

**/dist
複製程式碼

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], // 結尾比較分號
    // "trailing-comma": [false], // 結尾必須逗號
    // "requireForBlockBody": true,
  }
}
複製程式碼

接著配置git的提交commit提交驗證，需要安裝對應的依賴包，可以從我的另外一篇文章看：

juejin.im/post/5b9867…

再加上自己配置一個.gitignore檔案，就這樣，我們將大致需要的配置檔案都配置好了；看看效果：

當有不規範的程式碼提交的時候

在這裡插入圖片描述

把所有問題都解決之後提交，當然tslint以及其他的一些配置都是自定義的，可以自己配置。覺得麻煩的可以根據自己的“口味”配置專案

在這裡插入圖片描述

然後我們就可以愉快的開發我們的專案，執行npm run dev:weapp,開啟我們的小程式

在這裡插入圖片描述

很多人反饋用原生的 Taro.request或者用第三方axios等等做非同步請求總會有錯，我沒親測，但是自己用promise封裝了方法, 在根目錄src資料夾下建立utils資料夾， 在這裡我簡單的模擬微信授權登入，以及檢測session是否過期，繫結使用者的場景寫一個大概例子，介面為虛構：


├── utils                 
|   ├── api.ts            請求介面設定
|   ├── http.ts           http公共請求檔案
|   └── index.ts          

複製程式碼

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('網路請求出錯'))
      }
    })
  }
}

複製程式碼

api.ts

import Http from './http'

const http = new Http()

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

複製程式碼

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('微信獲取臨時憑著失敗')
  }
}

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
      // ...(其他引數)
    })
    console.log('使用者資料', loginRes)
  }
}

複製程式碼

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

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

....

async componentDidMount() {
    await userLogin()
  }
複製程式碼

整個框架的使用大致就是這樣了，react的書法風格還是挺舒服的，如果習慣了vue的寫法可能剛開始會不習慣，有興趣的可以嘗試嘗試，下面再簡單的把一些小技巧給補上：

一：圖片以模組的方式的引入

使用ts搭建的專案，引入靜態資源，比如圖片，會提示找不到模組，這時候就必須將圖片宣告為一個模組：

在types目錄的global.d.ts檔案下:

declare module ‘*.png’ {

​ const img: any

​ export default img

}

二：動態新增style
<View style={{backgroundImage: `url(${bgImg})`}}></View>
複製程式碼
三：動態新增class
1.<View className={data.length>0?’class-yes’: ’class-no'}></View>

2.<View className={`common ${data.length>0?’class-yes’: ’class-no}`}></View>
複製程式碼
四：this的指向問題

1）在 Taro 的頁面和元件類中，this 指向的是 Taro 頁面或元件的例項,如果我們要引用原生元件，需要使用到this的時候，如果如下引用：

Taro.createCanvasContext(canvasId, this.$scope)

wx.createLivePlayerContext(liveId, this.$scope)

錯誤：wx.createLivePlayerContext(liveId, this)這樣引入是沒有效果的，this並不是指向 wx.createLivePlayerContext.

(當前版本沒有liveplayer的回撥方法，所以直接用原生wx)

五：全域性樣式問題

全域性原始app.scss 只會影響到頁面級別的檔案，元件的獲取不到全域性的樣式，

可以在元件內部import 全域性樣式檔案，但是這裡就有可能，多個元件都引入全域性，生成多份全域性樣式檔案

相對應的程式碼我上傳到了我的github:

github.com/YDMua/taro-…

相關文章