react之taro介紹

本文轉載自查看原文 2019-12-27 10:45 1157 小程序

　　從vue轉戰react了，今天介紹下第一次用到taro的一個介紹，

　　1、首頁要利用小程序的分包subPackages進行設置，首次加載不要太多

配置

 1 config: Config = {
 2     pages: [
 3       'pages/home/index',//首頁
 4       'pages/mine/index', // 我的頁面
 5       'pages/aboutUs/index', // 關於我們
 6       'pages/feedback/index', // 意見反饋
 7     ],
 8     "subPackages": [
 9       {
10         "root": "subPages/",
11         "pages": [
12           "subjectBalance/index", //科目余額表頁面
13           "subjectBalance/subjectBaDetail/index", //科目余額表詳情頁面
14           "assetsLiabilit/index", //資產負債表頁面
15           "profitLossRF/index", //損益表
16           "finalTransaction/index", //期末結賬頁面 
17           "finalTransaction/confirmCheck/index", //期末結賬結賬、審核、反結賬頁面 
18         ],
19       },
20       {
21         "root": "childPages/",
22         "pages": [
23           'createAccount/index',//創建帳套
24           'voucherEntry/index',//憑證錄入
25           'voucherDetails/index',//憑證詳情
26           'selectSubject/index',//tap科目頁
27           'voucherLook/index',//憑證列表頁
28           'selectSubjectCur/index'//科目搜索頁
29         ],
30       }
31     ],
32     window: {
33       backgroundTextStyle: 'light',
34       navigationBarBackgroundColor: '#fff',
35       navigationBarTitleText: '',
36       navigationBarTextStyle: 'black',
37       navigationStyle: 'custom'
38     }
39   }

　　2、組件不要有任何副作用，盡量使用純函數

 1 const createCusPicker = (WarpedComponent) => class extends WarpedComponent {
 2   static displayName = `HOC${getDisplayName(WarpedComponent)}`
 3   render() {
 4     try {
 5       const props = { ...this.props };
 6       const { headerClassName, header } = props;
 7       delete props.headerClassName;
 8       delete props.header;
 9       const tree = super.render();
10 
11       const head = tree.children[2].children[0];
12       if (header) {
13         head.children = header;
14         head.props.children = header;
15       }
16       if (headerClassName) {
17         head.props.className = head.props.className + ' ' + headerClassName;
18       }
19 
20       const element = (Taro as any).cloneElement(tree, {
21         ...tree.props,
22         ...props,
23       }, tree.props.children)
24       return element
25     } catch (e) {
26       return <WarpedComponent {...this.props} />
27     }
28   }
29 }
30 
31 export default createCusPicker(Picker) as ComponentClass<PickerSelectorProps & {
32   header?: ReactNode
33   headerClassName?: string
34 }>

View Code

　　3、定義dva倉庫難免要用到reducers去同步修改state的值，可以將公用的state抽離出來

 1 import _modelExtend from 'dva-model-extend'
 2 import { DvaModel } from '@ts-types/dva';
 3 
 4 const commonModel = {
 5   reducers: {
 6     updateState (state: any, { payload }: any) {
 7       return {
 8         ...state,
 9         ...payload,
10       }
11     },
12     error(state: any, { payload }: any) {
13       return {
14         ...state,
15         error: payload,
16       }
17     },
18     updateParams(state: any, { payload }: any) {
19       const { params } = state;
20       return {
21         ...state,
22         params: {
23           ...params,
24           ...payload
25         }
26       }
27     },
28     updatePagination(state: any, { payload }: any) {
29       const { pagination } = state;
30       return {
31         ...state,
32         pagination: {
33           ...pagination,
34           ...payload
35         }
36       }
37     }
38   },
39 }
40 
41 const modelExtend = <T>(model: DvaModel<T>): DvaModel<T> => _modelExtend(commonModel, model);
42 
43 export {
44   modelExtend,
45   commonModel,
46 }

公共方法

  1 import { VoucherEntryState } from '@ts-types/store';
  2 import { modelExtend } from './_common';
  3 import { fetchVoucherNum, fetchVoucherUpload, fetchDeleteVoucher, fetchSummaryList, fetchVoucherCreate, fetchVoucherUpdate, fetchVoucherEntryTime } from '@services/voucherEntry';
  4 import { ReduxSagaEffects, ReduxAction } from '@ts-types/dva';
  5 import { fetchVoucherDetail } from '@services/voucherDetails';
  6 
  7 const namespace = 'voucherEntry';
  8 export default modelExtend<VoucherEntryState>({
  9   namespace,
 10   state: {
 11     data: null,
 12     subjectCode: [],//科目列表id
 13     summaryList: [],//摘要列表
 14     summary: '',//摘要
 15     files: [],//文件列表
 16     voucherlist: [{ money: "", borrowFlag: 1, voucherId: 1, subjectCode: null }, { money: "", borrowFlag: 0, voucherId: 2, subjectCode: null }],//1借0貸
 17     fillinDate: null,
 18     voucherTime: [],
 19     editDetail: {}
 20   },
 21   reducers: {
 22     asyncSubjectCode(state, { payload }) {
 23       const newState = JSON.parse(JSON.stringify(state));
 24       const { code, id, subject } = payload;
 25       newState.voucherlist[id].subjectCode = code
 26       newState.voucherlist[id].subject = subject
 27       return newState
 28     }
 29   },
 30   effects: {
 31     *requestVoucherEntryTime(_action: ReduxAction, { call, put }: ReduxSagaEffects) {
 32       const { success, data } = yield call(fetchVoucherEntryTime, _action.accountId);
 33       if (!success || !data) {
 34         return;
 35       }
 36       yield put({
 37         type: 'updateState',
 38         payload: { voucherTime: data }
 39       })
 40     },
 41     *requestVoucherNum(_action: ReduxAction, { call, put }: ReduxSagaEffects) {
 42       const { success, data } = yield call(fetchVoucherNum, _action.accountId);
 43       if (!success || !data) {
 44         return;
 45       }
 46       yield put({
 47         type: 'updateState',
 48         payload: { data }
 49       })
 50     },
 51     *requestVoucherUpload(_action: ReduxAction, { call, put }: ReduxSagaEffects) {
 52       const { success, data } = yield call(fetchVoucherUpload, _action.files);
 53       if (!success || !data) {
 54         return;
 55       }
 56       yield put({
 57         type: 'updateState',
 58         payload: { data }
 59       })
 60     },
 61     *requestDeleteVoucher(_action: ReduxAction, { call }: ReduxSagaEffects) {
 62       const { success, data } = yield call(fetchDeleteVoucher, _action.voucherId);
 63       if (!success || !data) {
 64         return;
 65       }
 66     },
 67     *requestSummaryList(_action: ReduxAction, { call, put }: ReduxSagaEffects) {
 68       const { success, data } = yield call(fetchSummaryList, _action.voucherId);
 69       if (!success || !data) {
 70         return;
 71       }
 72       yield put({
 73         type: 'updateState',
 74         payload: { summaryList: data }
 75       })
 76     },
 77     *requestVoucherCreate(_action: ReduxAction, { call }: ReduxSagaEffects) {
 78       const { success, data } = yield call(fetchVoucherCreate, _action.voucherVO);
 79       if (!success || !data) {
 80         return;
 81       }
 82     },
 83     *requestVoucherUpdate(_action: ReduxAction, { call }: ReduxSagaEffects) {
 84       const { success, data } = yield call(fetchVoucherUpdate, _action.voucherVO);
 85       if (!success || !data) {
 86         return;
 87       }
 88       
 89     },
 90     *requestVoucherDetail(_action: ReduxAction, { call, put }: ReduxSagaEffects) {
 91       const { success, data } = yield call(fetchVoucherDetail, _action.payload);
 92       if (!success || !data) {
 93         return;
 94       }
 95       yield put({
 96         type: 'updateState',
 97         payload: { editDetail: data }
 98       })
 99     }
100   }
101 });

使用如下

　 4、taro存在的坑

　　　　4.1、taro-ui的AtInput組件，在觸發onBlur事件的時候會同步觸發onChange事件

　　　　4.2、taro-ui的Picker組件在設置自定義數組然后默認值的時候他只會認識第一次數組傳入的值，默認值也是，后期不會發生改變

　　　　4.3、taro的Input標簽的value在onInput使用的時候會發現其不是受控組件，原因是此value只是一個默認的value，並不是我們傳統的value，要想改變在onInput事件中return

　　　　　　一個值

　　　　4.4、Taro.reLaunch可以進行頁面棧的清空，但是有一個bug就是他會造成頁面的閃現，可以getCurrentPages獲取頁面數量在使用navigateBack進行返回

　 5、適配iPhone x底部線 const styleBottom =Taro.getSystemInfoSync().model === "iPhone X" ? { marginBottom: "32px" } : { marginBottom: "0px" };

　 6、設置小程序分享

1 onShareAppMessage() {
2     return {
3       title: '',
4       path: '/pages/home/index'
5     }
6   }

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Taro React 使用總結【Taro+react 保存圖片到相冊】 Taro react事件傳參路由傳參 taro之React Native 端開發研究 React + TypeScript + Taro前端開發小結 Taro聊天室|react+taro仿微信聊天App界面|taro聊天實例 React-Native轉小程序調研報告：Taro & Alita taro react-native端開發環境搭建 React全家桶（一）——React介紹 React路由簡單介紹