項(xiàng)目初始化
如果未安裝taro的話先使用下面命令安裝
$ yarn global add @tarojs/cli
安裝完成后就可以使用taro命令創(chuàng)建項(xiàng)目了
$ taro init poetry
輸入創(chuàng)建命令時(shí)會(huì)讓你選擇語言，類型什么的，因?yàn)槲覀兪怯胻ypescript，所以選擇是就行了。
配置云開發(fā)
taro是支持小程序云開發(fā)模式的，具體看文檔https://taro-docs.jd.com/taro/docs/wxcloudbase，使用云開發(fā)模板的目錄結(jié)構(gòu)如下，
├── client 小程序端目錄
│ ├── config 配置目錄
│ │ ├── dev.js 開發(fā)時(shí)配置
│ │ ├── index.js 默認(rèn)配置
│ │ └── prod.js 打包時(shí)配置
│ ├── dist 編譯結(jié)果目錄
│ ├── package.json
│ ├── src 源碼目錄
│ │ ├── app.scss 項(xiàng)目總通用樣式
│ │ ├── app.js 項(xiàng)目入口文件
│ │ ├── components 組件文件目錄
│ │ └── pages 頁面文件目錄
├── cloud 服務(wù)端目錄
│ └── functions 云函數(shù)目錄
│ └── login login 云函數(shù)
│ ├── index.js login 函數(shù)邏輯
│ └── package.json
└── project.config.json 小程序項(xiàng)目配置
文檔的介紹是這樣的：
- 開發(fā)時(shí)，進(jìn)入 client 目錄，在此目錄下運(yùn)行相關(guān)編譯預(yù)覽或打包命令
- 使用微信開發(fā)者工具調(diào)試項(xiàng)目，請將項(xiàng)目整個(gè)文件夾作為運(yùn)行目錄。 注意： 不是 client 中生成的 dist 文件夾
必須將整個(gè)項(xiàng)目作為運(yùn)行目錄，我覺得這樣挺麻煩的，其實(shí)云開發(fā)主要是比普通開發(fā)多了一個(gè)云開發(fā)的文件夾，只要我們改寫一下配置，把輸出目錄修改一下就可以了。
首先我們先修改下文件目錄結(jié)構(gòu)
├── poetry
│ ├── config 配置目錄
│ │ ├── dev.js 開發(fā)時(shí)配置
│ │ ├── index.js 默認(rèn)配置
│ │ └── prod.js 打包時(shí)配置
│ ├── package.json
│ ├── src 源碼目錄
│ │ ├── app.scss 項(xiàng)目總通用樣式
│ │ ├── app.tsx 項(xiàng)目入口文件
│ │ ├── components 組件文件目錄
│ │ └── pages 頁面文件目錄
│ ├── wx_output 編譯輸出目錄
│ └── cloudfunctions 云函數(shù)目錄
│ └── login login 云函數(shù)
│ ├── index.js
│ └── package.json
│ └── miniprogram 小程序編譯目錄
└── project.config.json 小程序項(xiàng)目配置
然后我們修改一下config/index.js下的文件內(nèi)容
const outputRoot = process.env.TARO_ENV === 'weapp' ? 'wx_output/miniprogram' : 'dist';
const config = {
...
outputRoot: outputRoot,
...
},
module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {
return merge({}, config, require('./dev'))
}
return merge({}, config, require('./prod'))
}
通過改寫配置我把編譯輸出目錄改成了 wx_output/miniprogram 文件夾，只要把wx_output作為小程序項(xiàng)目的根目錄就可以了，不過有一點(diǎn)要注意下，因?yàn)榫幾g時(shí)project.config.json是編譯在miniprogram文件夾下的，小程序要求在必須在根目錄下才行，所以我們還要將project.config.json移動(dòng)到wx_output/目錄下才能正常運(yùn)行。
其它的一些需要配置的只要參考微信云開發(fā)文檔進(jìn)行配置就行了，這個(gè)問題不大。
定義ts接口
在 scr 目錄下新建 typings 文件夾，然后新建 store.d.ts 文件，文件里可以定義我們所需要的ts接口，如下
...
interface ToastParams {
title: string,
duration?: number,
icon?: iconType
}
interface 詩詞詳情數(shù)據(jù) {
poetryInfo: poetryItem,
tag: string
}
interface 作者相關(guān) {
authorInfo: 作者數(shù)據(jù),
hasAuthor: boolean
}
interface 作者數(shù)據(jù) {
_id: string,
description: string,
name: string,
short_description: string,
imgUrl?: string
}
...
試了一下中文也是可以的，定義完成后就可以直接在項(xiàng)目中使用該類型了
type PageDispatchProps = {
dispatch: (object)=>void
poetryDetail: 詩詞詳情數(shù)據(jù)
author: 作者相關(guān)
}
數(shù)據(jù)來源
小程序所用數(shù)據(jù)來源于https://github.com/chinese-poetry/chinese-poetry，將該數(shù)據(jù)通過json導(dǎo)入云開發(fā)數(shù)據(jù)庫就可以了，我根據(jù)詩詞的類型創(chuàng)建了不同的數(shù)據(jù)集
創(chuàng)建云函數(shù)
參考文檔新建所需的云函數(shù)，比如新建一個(gè)獲取所有詩詞類別的方法
async allCategories(params) {// 獲取所有詩詞類別
try {
const data = await db.collection('catalog').get();
return await this.success(data);
}catch(err) {
return await this.failMsg(err);
}
}
使用dva
先安裝dva所需依賴 dva-core dva-loading redux等，安裝完后在src文件夾下新建models文件夾，新建index.ts文件，內(nèi)容如下，
import poetryDetail from '../pages/model/poetryDetail'
import author from '../pages/model/author'
let list = [
poetryDetail,
author
];
export default list;
上面的../pages/model/poetryDetail還有../pages/model/author就是我需要共用的數(shù)據(jù)文件，具體寫法可以參考dva教程，文件的模板如下：
export default {
namespace: 'xxx',
state: {// 存放數(shù)據(jù)
},
effects: {
// 定義方法
*someFunction({payload, callback}, {call, put}) {
}
},
reducers: {
save(state, {payload}) {
return {
...state,
...payload
}
}
}
}
修改app.tsx文件
import Taro, { Component, Config } from '@tarojs/taro'
import {Provider} from '@tarojs/redux'
import models from './models/index'
import dva from './utils/dva'
import Index from './pages/index'
import './app.scss'
const dvaApp = dva.createApp( {
initialState: {},
models
});
const store = dvaApp.getStore();
// 如果需要在 h5 環(huán)境中開啟 React Devtools
// 取消以下注釋：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
// require('nerv-devtools')
// }
class App extends Component {
componentDidMount () {
if (process.env.TARO_ENV === 'weapp') {
Taro.cloud.init({
env: 'xxx',
traceUser: true
})
}
}
config: Config = {
...
}
// 在 App 類中的 render() 函數(shù)沒有實(shí)際作用
// 請勿修改此函數(shù)
render () {
return (
<Provider store={store} >
<Index />
</Provider>
)
}
}
Taro.render(<App />, document.getElementById('app'))
在需要使用dva的頁面中加入構(gòu)造器就行了
@connect(
({poetryDetail,author}) => ({poetryDetail,author})
)
class xxx extends Component<IProps, PageState> {
...
}
export default xxx
配置完成后我們就可以在頁面中調(diào)用了，要使用某個(gè)方法時(shí)，可以這樣
const { dispatch } = this.props;
dispatch({
type: 'author/someFunction',
payload: {
clounFnName: 'poetry',
controller: 'poetry',
action: 'getHotAuthor',
},
callback: res => {
this.setState({
hotAuthor: res.data
})
}
})
總結(jié)
第一次用ts來開發(fā)小程序，算是當(dāng)作練手，熟悉一下ts在項(xiàng)目中的運(yùn)用以及一些需要注意的點(diǎn)，這個(gè)小程序比較簡單，也沒有什么難點(diǎn)，用來練習(xí)正好，一些細(xì)節(jié)方面的東西我也沒用講到，可以直接看源碼了解，也可以掃下面這個(gè)小程序進(jìn)行體驗(yàn)，有什么建議也歡迎提出。
