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: 调试


断网调试成功

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,805评论 19 139
  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    未央大佬阅读 6,842评论 0 12
  • 情况描述 1.客户端代码运行在docker ngixn container启动在3000端口 2.客户端向另一个d...
    张培_阅读 9,741评论 0 1
  • 一、 所有人都说他是一个努力的孩子,他每天提早10分钟到教室,拿出书自习,上课;下课的时候,他就静静坐在座位上,一...
    没有馅的汤圆阅读 3,382评论 0 3
  • 乌云密布的天,阴沉沉的,把人压得透不过气,加上天气又闷热,让我感到十分的烦躁。 现在是上课时间,校园里十分...
    吃土少女王哈哈阅读 1,310评论 0 1

友情链接更多精彩内容