react之taro介绍

　　从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