微信小程序开发零基础入门/Web前端开发技术丛书

作者简介

\\\"周文洁？ 澳大利亚墨尔本大学信息技术专业毕业，工学硕士学位。 曾任职于微软大中华区客户服务与技术支持中心，现任职于安徽师范大学，从事教学、系统运维和研发等工作。 2018年第一批产学协同育人项目——微信事业部“微信小程序课程改革”负责人。主要从事Java程序设计、Android程序设计、HTML5网页前端设计等课程教学工作，擅长案例式教学模式，并开发过多个商业项目。近年来出版Web前端开发技术系列教材，独立编著了《HTML5网页前端设计》和《HTML5网页前端设计实战》等教材。 \\\"

内容简介

网络API 　　本章主要介绍小程序网络API的相关应用，小程序允许使用本章介绍的接口与开发者或第三方服务器进行通信，包括发起请求和文件的上传/下载。 * 了解小程序/服务器架构； * 掌握服务器域名配置和临时服务器部署； * 掌握wx.request()接口的用法； * 掌握wx.uploadFile()和wx.downFile()接口的用法。 5.1 小程序网络基础 　　小程序允许使用网络API和服务器进行通信，包括发起请求、文件的上传和下载等功能。 5.1.1 小程序/服务器架构 　　小程序和服务器通信的架构也可以称为C/S架构，即客户端/服务器（Client/Server）架构。小程序和服务器的通信原理大致如图5-1所示。 图5-1 小程序和服务器通信原理示意图 　　在联网的状态下小程序首先向服务器发起网络请求，可携带JSON格式数据一并发送过去。服务器收到请求后执行相关代码处理请求，必要时还可以从后端查询数据库。处理完毕后服务器向小程序回复并返回数据，小程序相关接口将回调success()函数并对拿到的数据进行后续处理。 　　关于请求 　　小程序向服务器发起网络请求，注意事项如下： 　　（1）默认超时时间和最大超时时间都是60s。 　　（2）request、uploadFile、downloadFile的最大并发限制是10个。 　　（3）网络请求的referer header不可设置。其格式固定为“https://servicewechat.com/{appid}/ {version}/page-frame.html”，其中{appid}为小程序的 appid，{version}为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为devtools表示为开发者工具，其余为正式版本。 　　（4）小程序进入后台运行后（非置顶聊天），如果在5s内网络请求没有结束，会回调错误信息fail interrupted；在回到前台之前，网络请求接口调用都会无法调用。 　　关于服务器返回 　　1）返回值编码 　　小程序会自动对BOM头进行过滤，且建议服务器返回值使用UTF-8编码。对于非 UTF-8 编码，小程序会尝试进行转换，但是会有转换失败的可能。 　　2）回调 　　只要成功接收到服务器返回，无论statusCode是多少，都会进入success()回调。请开发者根据业务逻辑对返回值进行判断。 　　关于JSON语法格式 　　小程序网络API在发起网络请求时使用JSON格式的文本进行数据交换。 　　JSON（JavaScript Object Notation）是基于JavaScript Programming Language,?Standard ECMA-262 3rd Edition - Dec1999的一个子集，是一种轻量级的数据交换格式。它采用完全独立于语言的文本格式，易于人们阅读和编写；但是也使用了类似于C语言家族（包括C、C++、C#、Java、JavaScript、Perl、Python等）的习惯，因此也易于机器解析和生成。这些特性使JSON成为理想的数据交换语言。 　　JSON字符串通常有两种构建形式，一是“名称/值”对的集合，二是值的有序列表。 　　1）“名称/值”对的集合 　　“名称/值”对（name/value pair）的集合在不同的计算机语言中可以被理解为对象（object）、记录（record）、结构（struct）、字典（dictionary）、哈希表（hash table）、有键列表（keyed list）或关联数组（associative array）等。 　　名称可以由开发者自定义，例如studentID、username等；值是自定义名称所对应的数据值，共有以下6种类型的取值。 　　* string：字符串，需要用引号括起来，例如'hello'。 　　* number：数值，例如123。 　　* boolean：布尔值，例如false。 　　* null：空值，例如null。 　　* object：对象，例如{username: 'admin', password: '123456abc'}。 　　* array：数组，例如[1,2,3,4,5]。 　　上述这些取值类型可以互相嵌套形成复合的值。 　　“名称/值”对的集合通常使用大括号包含里面的全部内容，示例格式如下： 　　 { 名称1:值1, 名称2:值2, … 名称N:值N } 　　 　　例如： 　　 //1.单个名称/值对 var json1={x: 123} //2.多个名称/值对 var json2={x1: 123, x2: 'hello', x3: true} //3.嵌套组合的名称/值对 var json3={ x1: [1, 2, 3, 4, 5], x2: 'hello', x3: { y1: false, y2: null, } } 　　 　　如果想获得json3中的y1的值false，写法是json3.x3.y1。 　　这里以微信用户信息数据为例，返回的JSON文本如下： 　　 detail: { userinfo: { nickname: '张三', gender: 1, city: Shanghai … }, … } 　　 　　2）值的有序列表 　　值的有序列表在绝大部分计算机语言中均可以被理解为数组（array）。 　　值的有序列表通常使用中括号包含里面的全部内容，示例格式如下： 　　 [ 值1, 值2, … 值N ] 　　 　　这里值的类型与前面“名称/值”对的集合中的取值类型完全一样，不再赘述。 　　例如： 　　 //1.数字取值 var json1=[111,222,333] //2.布尔值取值 var json2=[true,false,true] //3.对象取值 var json3=[ {username: 'zhangsan', password : '123', city : 'Wuhu'}, {username: 'lisi', password: '456', city: 'Hefei'}, {username: 'wangwu', password: '789', city: 'Xuancheng'} ] 　　 　　如果想要获取json3中第1个用户所在的城市，写法是json3[0].city。 5.1.2 服务器域名配置 　　每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中。 　　配置流程 　　小程序开发者登录mp.weixin.qq.com进入管理员后台，单击“设置”，在“开发设置”下的“服务器域名”中添加或修改需要进行网络通信的服务器域名地址，如图5-2所示。 图5-2 服务器域名配置 　　开发者可以填入自己或第三方的服务器域名地址，但在配置时需要注意以下几点： 　　（1）域名只支持 https（request、uploadFile、downloadFile）和wss（connectSocket） 协议。 　　（2）域名不能使用IP地址或localhost。 　　（3）域名必须经过ICP备案。 　　（4）出于安全考虑，api.weixin.qq.com不能被配置为服务器域名，相关API也不能在小程序内调用。开发者应将appsecret保存到后台服务器中，通过服务器使用appsecret获取accesstoken，并调用相关API。 　　（5）每类接口分别可以配置最多20个域名。 　　配置完之后再登录小程序开发工具就可以测试小程序与指定的服务器域名地址之间的网络通信情况了，注意每个月只可以申请修改5次。 　　HTTPS证书 　　需要注意的是，小程序必须使用HTTPS请求，普通的HTTP请求是不能用于正式环境的。判断HTTPS请求的依据是小程序内会对服务器域名使用的HTTPS证书进行校验，如果校验失败，则请求不能成功发起。 　　因此开发者如果选择自己的服务器，需要在服务器上自行安装HTTPS证书，选择第三方服务器则确保其HTTPS证书有效即可。小程序对证书的要求如下： 　　（1）HTTPS证书必须有效。证书必须被系统信任，部署SSL证书的网站域名必须与证书颁发的域名一致，证书必须在有效期内。 　　（2）iOS不支持自签名证书。 　　（3）iOS下的证书必须满足苹果App Transport Security (ATS)的要求。 　　（4）TLS必须支持1.2及以上版本。部分旧Android机型还未支持TLS 1.2，请确保 HTTPS服务器的TLS版本支持1.2及以下版本。 　　（5）部分CA可能不被操作系统信任（例如Chrome 56/57内核对WoSign、StartCom证书限制），请开发者在选择证书时注意小程序和各系统的相关通告。 　　由于系统限制，不同平台对于证书要求的严格程度不同。为了保证小程序的兼容性，建议开发者按照最高标准进行证书配置，并使用相关工具检查现有证书是否符合要求。 　　跳过域名校验 　　如果开发者暂时无法登记有效域名，可以在开发和测试环节暂时跳过域名校验。具体做法是在微信web开发者工具中找到右上角的“详情”按钮，单击打开浮窗，然后勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”复选框，如图5-3所示。 图5-3 跳过域名校验设置 　　此时，在开发者工具中运行或开启手机调试模式时都不会进行服务器域名的校验。 5.1.3 临时服务器部署 　　软件部署 　　若开发者条件受限，可以将PC端临时部署为模拟服务器进行开发和测试。小程序对服务器端没有软件和语言的限制条件，用户可以根据自己的实际情况选择Apache、Ngnix、Tomcat等任意一款服务器软件进行安装部署，以及选用PHP、Node.js、J2EE等任意一种语言进行后端开发。 　　这里以phpStudy 2016套装软件（包含了Apache和PHP）为例，部署步骤如下： 　　（1）下载安装包，在PC端中双击安装。 　　（2）完成后启动Apache服务器，如图5-4所示。 　　（3）在WWW目录下创建自定义目录，例如miniDemo。 　　至此临时部署完毕，用户可以随时更改服务器上的目录地址和PHP文件代码。 《微信小程序开发零基础入门 》是一本从零开始学习的微信小程序开发入门书，无需额外的基础。全书以项目驱动为宗旨，循序渐进、案例丰富，详细介绍了微信小程序的入门基础知识与使用技巧。