http请求

uni.request二次封装

h5跨域问题

这个时候你可能会感觉万事大吉了，默默地打开TERMINAL快速地敲击你的键盘，

npm run dev:mp-weixin

npm run dev:h5

小坑：小程序端接口返回字段值为null时，null以字符串形式被渲染在页面上

h5端看似一点问题没有，接口访问非常顺利，看看微信小程序端，页面上怎么一堆null。打开network一看，字段明明返回的是null，为啥会变成null字符串被渲染出来。

解决方案如下：

优化：让async更加优雅（模仿node异步返回格式[error, res]）

优化：防抖问题（表单被多次提交,表单字段规则校验,scroll监听）

当你不理解防抖是啥的时候，点击你的'掘金'头像->'写文章'->开始编写你的blog,你会发现有自动保存的效果，打开network仔细观察，你会发现在你编写blog过程中2-3秒没有输入文字，就会发一个updateDraft请求去保存你的blog到草稿箱内~~~是不是瞬间感觉懂了些什么

楼下代码get的是一位某东的高级前端小姐姐的blog，浅析一波

仿Vue-router(uni-simple-router)

具体的可以移步大佬的插件地址：https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/8/8/16c704ff28803df5~tplv-t2oaga2asx-image.image

这样就可以和vue一样优雅地操作router了，页面级路由独享守卫（beforeEnter）、全局路由守卫（beforeEach、afterEach）、基本的push、replace等。

页面刷新 vuex清除问题

vuex持久化：vuex-persistedstate 加 mp-storage（支持uni多端的Storage垫片），在开发环境还可以打印vuex log，vuex可以走localStorage，sessionStorage，cookie等。

我在项目中选择是：localStorage。

这时候我们会想，如果我只想持久化store里的部分key，另一部分的key不做持久化。

下面就是我的解决方案。

登录（微信内置浏览器免登、微信小程序免登、常规的验证码登录）

常规的验证码登录

走JWT校验即可。token本地缓存即可。

微信内置浏览器免登

（直接走微信SDK就行了，重定向换code拿openId即可。瞬移链接：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842）

微信小程序免登（支付宝小程序类似，authCode）

uni.login拿code。首次登录code+mobile+icode丢给后端，后端把openId入库。再次登录时，code丢给后端，后端通过当前用户的openId和表里的openId比对，若相同即可免登，反之不免登，继续走常规登录流程。

支付（支付宝h5支付、微信小程序支付、微信内置浏览器支付）

Tips：支付难点在后端。前端就默默地吃着瓜即可

支付宝h5支付

// 示例代码（基本的form表单提交）

const div = document.createElement("div");

div.innerHTML = res;

document.body.appendChild(div);

document.forms[0].submit();

微信小程序支付

uni.requestPayment() 各种微信支付字段验签即可（如nonceStr、paySign等）。

微信内置浏览器支付

走微信SDK，各种微信支付字段验签即可（如nonceStr、paySign等）瞬移链接：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6）

组件封装

props传参（格式校验、值validate等），slot插槽（使用最频繁的是作用域插槽）。项目中自定义组件有：支付键盘组件、filter筛选组件（带吸附置顶）等。

封装这些组件，我们有没有想过，我们现在封装的组件满足的需求范围仅仅只是该项目，如何能像antd、element一样能满足百分之90甚至更多的业务需求呢。这时候可以移步某阿里大佬的blog： https://juejin.cn/post/6844903895680942088

滚动穿透

当modal层不存在滚动时，modal显示时，直接禁用touchmove即可。
当modal层有滚动时， page{ position:fixed; top:0; height:100%; overflow:hidden; } modal层使用scroll-view，这样就能解决滚动穿透问题了。

微信小程序授权禁用问题（地图定位授权chooseLocation、微信步数授权getRunData、微信个人信息getUserInfo）

举例：首次进入小程序、按钮手动触发getUserInfo的时候，会弹出微信授权。如果你点“取消”后会拒绝授权，(Tips:在不手动删除小程序的情况下，用户拒绝授权之后，再次调用getUserInfo等权限api将不会弹授权框，直接走getUserInfo的fail回调了），这样的交互非常的不友好。

解决方案： getSetting去获取用户授权情况，若用户授权关闭，showModal引导用户去手动开启微信授权。如果用户点击modal的“确定”，直接去调取openSetting（打开设置界面，引导用户开启授权）。如果用户点击modal的“取消”，下次进入小程序还是会走getSetting的showModal提示用户去手动开启授权。

调试

h5端： vconsole插件能让你真机模拟是查看log日志，方便及时找到问题，并解决。

小程序端：各大厂子的真机调试都已经十分完善。微信小程序近期还更新了自动化测试（node版本），方便测试。

最后的战役：发布小程序，发布h5

h5发布：仍旧走jenkins发布，和常规的vue、react的web端项目一样。

小程序发布：自检 => 审核 => 发版（中间可能要经历NNN次。。。审核未通过，心态要稳住哈）