uni-app（优雅的“排雷”集锦）

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)

具体的能够移步大佬的插件地址：user-gold-cdn.xitu.io/2019/8/8/16…

这样就能够和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便可。瞬移连接：mp.weixin.qq.com/wiki?t=reso…）

微信小程序免登（支付宝小程序相似，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等）瞬移连接：pay.weixin.qq.com/wiki/doc/ap…）

---

组件封装

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

封装这些组件，咱们有没有想过，咱们如今封装的组件知足的需求范围仅仅只是该项目，如何能像antd、element同样能知足百分之90甚至更多的业务需求呢。这时候能够移步某阿里大佬的blog： juejin.im/post/5d3721…

---

滚动穿透

1. 当modal层不存在滚动时，modal显示时，直接禁用touchmove便可。
2. 当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次。。。审核未经过，心态要稳住哈）