小程序系列- 3. 场景应用

开发流程

• 设计手稿---------实现页面编写还原手稿-----------实现页面交互 整理出每个页面的data部分，填充WXML的模板语法，并完成JS 逻辑

界面常见的交互反馈

触摸反馈

• 触摸时相应 (通过hover-class属性改变触摸时的样式) /*page.wxss */ ​ .hover{ ​ background-color: gray; ​ } ​ ​ <!--page.wxml --> ​ <button type="default" hover-class="hover"> 点击button </button> ​ <view hover-class="hover"> 点击view</view>
• 耗时相应（设置loading属性） <!--page.wxml --> ​ <button loading="{{loading}}" bindtap="tap">操作</button> ​ ​ ​ //page.js ​ Page({ ​ data: { loading: false } ​ tap: function() { ​ // 把按钮的loading状态显示出来 ​ this.setData({ ​ loading: true ​ }) ​ // 接着做耗时的操作 ​ } ​ })
• Toast (响应成功后的提示) Page({ ​ onLoad: function() { ​ wx.showToast({ // 显示Toast title: '已发送', // 标题 ​ icon: 'success', // 图标 ​ duration: 1500 // 响应成功后会在1.5s 后自动关闭 ​ }) ​ // wx.hideToast() // 隐藏Toast ​ } ​ })
• 模态对话框 (用于提示信息操作，或者错误提示) Page({ ​ onLoad: function() { ​ wx.showModal({ ​ title: '标题', ​ content: '告知当前状态，信息和解决方法', ​ confirmText: '主操作', ​ cancelText: '次要操作', ​ success: function(res) { ​ if (res.confirm) { ​ console.log('用户点击主操作') ​ } else if (res.cancel) { ​ console.log('用户点击次要操作') ​ } ​ } ​ }) ​ } ​ })
• 界面滚动 内容区域肯定会超出屏幕区域，用户可以通过滑动屏幕来查看下一屏的内容，这是非常常见的界面滚动的交互。
• 下拉刷新 通过配置开启当前页面的下拉刷新，用户往下拉动界面触发下拉刷新操作时，Page构造器的onPullDownRefresh回调会被触发，此时开发者重新拉取新数据进行渲染， //page.json ​ {"enablePullDownRefresh": true } ​ ​ ​ //page.js ​ Page({ ​ onPullDownRefresh: function() { ​ // 用户触发了下拉刷新操作 ​ // 拉取新数据重新渲染界面 ​ // wx.stopPullDownRefresh() // 可以停止当前页面的下拉刷新。 ​ } ​ })
• 页面上拉触底（淘宝上滑刷新商品） //page.json ​ // 界面的下方距离页面底部距离小于onReachBottomDistance像素时触发onReachBottom回调 ​ {"onReachBottomDistance": 100 } ​ ​ ​ //page.js ​ Page({ ​ onReachBottom: function() { ​ // 当界面的下方距离页面底部距离小于100像素时触发回调 ​ } ​ })

页面局部滚动（scroll-view可滚动视图组件）

可以通过组件的scroll-x和scroll-y属性决定滚动区域是否可以横向或者纵向滚动，scroll-view组件也提供了丰富的滚动回调触发事件

发起HTTPS网络通信

• 小程序经常需要往服务器传递数据或者从服务器拉取信息

wx.request接口

wx.request({
​
  url: 'https://test.com/getinfo',
​
  success: function(res) {
​
    console.log(res)// 服务器回包信息
​
  }
​
})

服务器接口

• 发起的网络请求必须是https协议请求，开发者服务器必须提供HTTPS服务的接口
• wx.request请求的域名需要在小程序管理平台进行配置， 否则会报错
• 开发测试阶段，可以请求任意域名
• 开发者定义接口有时必须兼容小程序更新，根据小程序的接口更新，做出相应的接口

请求参数

• wx.request这个API有两种方法把数据传递到服务器 #通过url上的参数以及通过data参数 Get 请求 // 通过url参数传递数据 ​ wx.request({ ​ url:'https://test.com/getinfo?id=1&version=1.0.0', ​ success: function(res) { ​ console.log(res)// 服务器回包信息 ​ } ​ }) ​ // 通过data参数传递数据 ​ wx.request({ ​ url: 'https://test.com/getinfo', ​ data: { id:1, version:'1.0.0' }, ​ success: function(res) { ​ console.log(res)// 服务器回包信息 ​ } ​ })

两种实现方式在HTTP GET请求的情况下表现几乎是一样的.

url是有长度限制的，其最大长度是1024字节，同时url上的参数需要拼接到字符串里，参数的值还需要做一次urlEncode。向服务端发送的数据超过1024字节时，就要采用HTTPPOST的形式，此时传递的数据就必须要使用data参数，基于这个情况，一般建议需要传递数据时，使用data参数来传递。.

Post请求

Post请求时，需要设置wx.request的header参数为content-type头部为application/json，小程序发起的请求的包体内容就是data参数对应的JSON字符串

// 请求的包体为 {"a":{"b":[1,2,3],"c":{"d":"test"}}}
​
wx.request({
​
  url: 'https://test.com/postdata',
​
  method: 'POST',
​
  header: { 'content-type': 'application/json'},
​
  data: {
​
    a: {
​
      b: [1, 2, 3],
​
      c: { d: "test" }
​
    }
​
  },
​
  success: function(res) {
​
    console.log(res)// 服务器回包信息
​
  }
​
})

收到服务器返回的回包

                            wx.request的success返回参数
                                
                data    Object/String   开发者服务器返回的数据
                
                statusCode  Number  开发者服务器返回的 HTTP 状态码
                
                header  Object  开发者服务器返回的 HTTP Response Header

只要成功收到服务器返回，无论HTTP状态码是多少都会进入success回调。因此开发者自己通过对回包的返回码进行判断后再执行后续的业务逻辑。

一般使用技巧

设置超时时间

//当小程序发起网络请求时，服务器返回回包失败或者是超时，会给予不可用的提示。
// 小程序的默认超时时间是60s，一般在3秒没收到回包，就给予不可用提示。
​
​
​
​
​
 app.json指定wx.requset超时时间为3000毫秒
{
​
  "networkTimeout": {
​
    "request": 3000
​
  }
​
}

请求前后的状态处理

• 前台处理 用户点击一个按钮，界面出现“加载中...”的Loading界面，然后发送一个请求到后台
• 后台处理 后台返回成功直接进入下一个业务逻辑处理，后台返回失败或者网络异常等情况则显示一个“系统错误”的Toast，同时一开始的Loading界面会消失
• var hasClick = false; ​ Page({ //tap 绑定在按钮上 tap: function() { ​ if (hasClick) { ​ return ​ } ​ hasClick = true ​ wx.showLoading() ​ ​ ​ wx.request({ ​ url: 'https://test.com/getinfo', ​ method: 'POST', ​ header: { 'content-type':'application/json' }, ​ data: { }, ​ success: function (res) { ​ if (res.statusCode === 200) { ​ console.log(res.data)// 服务器回包内容 ​ } ​ }, ​ fail: function (res) { ​ wx.showToast({ title: '系统错误' }) ​ }, ​ complete: function (res) { ​ wx.hideLoading() ​ hasClick = false ​ } ​ }) ​ } ​ }) 为了防止用户极快速度触发两次tap回调，我们还加了一个hasClick的“锁”，在开始请求前检查是否已经发起过请求，如果没有才发起这次请求，等到请求返回之后再把锁的状态恢复回去。

wx.request接口 异常排查方法

在使用wx.request接口我们会经常遇到无法发起请求或者服务器无法收到请求的情况，我们罗列排查这个问题的一般方法：

• 检查手机网络状态以及wifi连接点是否工作正常。
• 检查小程序是否为开发版或者体验版，因为开发版和体验版的小程序不会校验域名。
• 检查对应请求的HTTPS证书是否有效，同时TLS的版本必须支持1.2及以上版本，可以在开发者工具的console面板输入showRequestInfo()查看相关信息。
• 域名不要使用IP地址或者localhost，并且不能带端口号，同时域名需要经过ICP备案。
• 检查app.json配置的超时时间配置是否太短，超时时间太短会导致还没收到回报就触发fail回调。
• 检查发出去的请求是否302到其他域名的接口，这种302的情况会被视为请求别的域名接口导致无法发起请求。

服务器域名问题

服务器域名配置使用

• 每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）

配置流程

• 服务器域名请在 「小程序后台-设置-开发设置-服务器域名」 中进行配置

注意

• 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议；
• 域名不能使用 IP 地址或 localhost；
• 对于每个接口，分别可以配置最多 20 个域名