2018-06-04 微信小程序 优化

这两天来了一个新的技术老大，又指点了我一番，如果想要拥有更多的经验与更大的进步，就得被不断的否定，然后接受新的，然后把前端修炼成最厉害的。

最难的就是在各个手机上都保持一样的效果。更好的处理不同手机的显示，毕竟前端解决的唯一问题大概就是显示问题了。

老大让改的地方：
1 任意一个可以扩大选择区域的都尽量扩大。
2 网络请求超时的处理:如果不设置，那么默认的是60s.

用户友好

任意一个可以扩大选择区域的都尽量扩大。
把 margin 改成 padding

请求超时

设置网络请求的最大时间比较容易设置：

单位是毫秒，所以以下是10s.
"networkTimeout":{
   "request": 10000,
   "connectSocket": 10000,
   "uploadFile": 10000,
   "downloadFile": 10000
}

比较麻烦的是处理每一个网络请求后的提醒。

尝试1

只要请求一次，就应该有一个加载中的提醒，设置一个10s的时间，

setTimeout(function(){
   //do something
},500)
setTimeout会被排入队列，并不会立刻执行，
所以使用这个无法达到代码执行多少秒后再执行某一块代码的目的吗？

最大延时值

尝试1失败。

尝试2

网络上的答案：

1. 我先说一下我的想法啊，因为小程序几乎没给什么网络提示或API（前两天更新了一个），就是设置一个时间的代码，到了时间，自动取消loading框，并提醒用户请求超时，然后在loading消失之后选择执行别的操作
2. 当然，如果目前位置只使用wx.request请求，只设置request这个配置项也是可以的。如果服务器在20秒内没有响应，那么wx.request将进入fail函数。

使用的是第二种。

加了一个fail函数。给了一个showModal提醒。
request.login(data, (res) => {
            var data = {
              openId: res.data.data.token,
              unidId: res.data.data.hasUnionId
            }
            console.log(res.data.data, "openId");
            wx.setStorageSync("openId", data);//存储openid到缓存
          }, (err) => {
              wx.showModal({
                  content: '请检查网络，稍后再试',
                  showCancel: false
              })
          })
函数：
wx.request({
        url: url,
        method: 'POST',
        data: data0.data,
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          "Authorization":data0.header
        },
        success: function (res) {
            successCallback(res);
        },
        fail: function (res) {
            errorCallback(res);
        },
    });

尝试成功。但是还需要测试，所以下边进行断网的测试。

断网测试：

step 1:设置开发者工具

开发者工具设置

step2: 调试

断网调试成功

至此，初步优化告一段落。