Taro328+dva搭建配置過程

1、創(chuàng)建的步驟就不贅述了，官網(wǎng)有詳細的步驟rel=nofollowtaro使用文檔提前下載發(fā)者工具前提初始化好了一個 taro 步驟1. 編譯運行npm run dev:weapp2. 配置 dva 2.1 react-redux npm i -save react-redux2.2 dva-core dva-loading ?dva-core 裝了 redux 和 redux-sage 的一個件?dva-loading 管理頁面的 loading 狀態(tài)npm install -save dva-core dva-loading2.3 src目錄下創(chuàng)建 models 目錄，并在 models 目錄

2、下的 index.js 返回中創(chuàng)建的所有model / dva需要掛載所有的modelsimport users from ./pages/index/modelexport default users,;users 為 pages/index 新建的 model 其結(jié)構(gòu)就和們 dva 中的 model 一樣export default namespace: users, state: title: hello world , effects: , reducers: save(state, payload ) return .state, .payload ; , ,;2.4 在 src 目

3、錄下創(chuàng)建 utils 目錄，并在 utils 目錄里創(chuàng)建 dva.js 文件import create from dva-core;import createloading from dva-loading;let app;let store;let dispatch;function createapp(opt) / 創(chuàng)建應(yīng)用，返回dva 實例 app = create(opt); / 配置件 createloading解決異步加載的過渡問題 app.use(createloading(); if(!global.registered) / 注冊 model opt.models.forea

4、ch(model = app.model(model); global.registered = true; / 啟動應(yīng)用 app.start(); store = app._store; app.getstore = () = store; dispatch = store.dispatch; app.dispatch = dispatch; return app;export default createapp, getdispatch: () = return app.dispatch; 2.5 在入口文件 app.js 里使用 dva.js 返回的方法創(chuàng)建一個app 獲取 store，

5、并將store 掛載到 provider 容器里面import component from reactimport dva from ./utils/dvaimport provider from react-reduximport models from ./modelsimport ./app.lessconst dvaapp = dva.createapp( initialstate: , models)const store = dvaapp.getstore();class app extends component ponentdidmount () ponentdidshow

6、() ponentdidhide () ponentdidcatcherror () / ps.children 將要會渲染的頁面 render () return ps.children export default app配置完成，檢測否配置成功在 pages / index / index.jsx中連接 model，并且輸出 ps import component from reactimport view, text from tarojs/ponentsimport connect from react-reduximport ./in

7、dex.lessconnect(users)=( users)export default class index extends component ponentwillmount () ponentdidmount () ponentwillunmount () ponentdidshow () ponentdidhide () render () console.log(ps); return ( hello huangaolin ) 3. 引入 taro-ui npm i -save taro-ui3.0.0-alpha.3在 app.js 引入樣式import taro-ui/dist/style/index.scss在 pages/index/index.jsx中使用組件import component from reactimport view, text from tarojs/ponentsimport connect from react-reduximport atbutton from taro-uiimport ./index.lessconnect(users)=( users)export default class index extends component ponentwillmount () pone