react之taro介绍

水墨枫杨 發表於 2019-12-27 10:45:00

从vue转战react了，今天介绍下第一次用到taro的一个介绍，
　　
　　1、首页要利用小程序的分包subPackages进行设置，首次加载不要太多
<div class="cnblogs_code"><img id="code_img_closed_05dc558b-fef0-4b17-8e2f-b713e8bbdd57" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif">配置<img id="code_img_opened_05dc558b-fef0-4b17-8e2f-b713e8bbdd57" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_05dc558b-fef0-4b17-8e2f-b713e8bbdd57" class="cnblogs_code_hide">
<pre> 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 }</pre>
</div>
 </div>
　　2、组件不要有任何副作用，尽量使用纯函数
<div class="cnblogs_code"><img id="code_img_closed_c34ab532-620f-412a-a552-bfdfe0c915d5" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_c34ab532-620f-412a-a552-bfdfe0c915d5" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_c34ab532-620f-412a-a552-bfdfe0c915d5" class="cnblogs_code_hide">
<pre> 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.children;
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 }></pre>
</div>
View Code</div>
　　3、定义dva仓库难免要用到reducers去同步修改state的值，可以将公用的state抽离出来
<div class="cnblogs_code"><img id="code_img_closed_919b3964-e49a-4e49-a246-56bfff4b52cd" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_919b3964-e49a-4e49-a246-56bfff4b52cd" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_919b3964-e49a-4e49-a246-56bfff4b52cd" class="cnblogs_code_hide">
<pre> 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 }</pre>
</div>
公共方法</div>
<div class="cnblogs_code"><img id="code_img_closed_c2dd272e-ba29-4bdf-b74e-197f81c8eb2c" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_c2dd272e-ba29-4bdf-b74e-197f81c8eb2c" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_c2dd272e-ba29-4bdf-b74e-197f81c8eb2c" class="cnblogs_code_hide">
<pre>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.subjectCode = code
 26 newState.voucherlist.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 });</pre>
</div>
使用如下</div>
　 4、taro存在的坑
　　　　4.1、taro-ui的<code class="language-js">AtInput组件，在触发onBlur事件的时候会同步触发onChange事件</code>
　　　　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、设置小程序分享
<div class="cnblogs_code"><img id="code_img_closed_db473e16-3138-4eb1-be89-934e7d1f6ed4" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_db473e16-3138-4eb1-be89-934e7d1f6ed4" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_db473e16-3138-4eb1-be89-934e7d1f6ed4" class="cnblogs_code_hide">
<pre>1 onShareAppMessage() {
2 return {
3 title: '',
4 path: '/pages/home/index'
5 }
6 }</pre>
</div>
View Code</div>

</div>
<div id="MySignature" role="contentinfo">
一条不甘于平凡的咸鱼分享 
来源：https://www.cnblogs.com/cq1715584439/p/12104252.html

頁: [1]

琼殿技术论坛's Archiver

react之taro介绍