学会微信服务端开发第一步 什么是微信开发第一步？微信公众平台开发第一步详解如果有人问你，微信体系下，开放平台、公众号、小程序开发第一步是做什么？我的回答是获取微信access_token。access_token是公众号的全局唯一接口调用凭据, 没有凭据后面的其他接口，都没法调用。公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效。官方文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183接口地址https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET参数说明参数是否必须说明grant_type是获取access_token填写client_credentialappid是第三方用户唯一凭证secret是第三方用户唯一凭证密钥，即appsecret返回说明正常情况下，微信会返回下述JSON数据包给公众号：{"access_token":"ACCESS_TOKEN","expires_in":7200}调试工具微信官方为了大家开发公众号时，提供大家的开发效率，特地给开发者上线了一套调试工具https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=基础支持&form=获取access_token接口%20/token功能实现这个功能，只需要调用这个接口，然后返回access_token，我们就不搭建Liunx，PHP，node等环境，直接用当今流行的Serverless 相关平台的Faas（云函数）功能。 这里使用的是Bmob后端云，当然你用阿里、腾讯、华为等等厂商支持Faas（云函数） 功能的都可以，只是语法稍微有点不同，这些开发小程序、公众号都可以。 比自己搭建服务器要快很多。前期准备第一步：准备配置信息登陆微信平台https://mp.weixin.qq.com/进入开发-》基本配置拿到开发者ID(AppID)与开发者密码(AppSecret)，开发请求时需要用到。第二步：编写云函数首先你有个Bmob后端应用，点击进入云函数。选择模板创建，当然你也可以自己变。自己编写代码，我们有一点javascript基础，或者java基础都可以。这里介绍下Nodejs文档地址：http://doc.bmob.cn/cloud_function/web/develop_doc/#http_1HTTP请求对象 oHttp对象可以模拟实现get、post、put、delete等各种HTTP请求信息，让你在云端实现诸如数据采集、OAuth授权登录等功能。Bmob的HTTP请求模块采用Nodejs提供的request模块，这里提供简单的Get和Post的操作实例。更多的功能详细参考：https://npmjs.org/package/request /** *发起Get请求 */ //获取Http模块 var http = modules.oHttp; //发起Get请求 http('https://www.bmob.cn', function (error, res, body) { response.send(body); }); - /** *发起Post请求 */ //获取Http模块 var http = modules.oHttp; var options = { "url": 'https://api.bmob.cn/1/classes/GameScore', "headers": { 'X-Bmob-Application-Id': 'Your Application ID', 'X-Bmob-REST-API-Key': 'Your REST API Key', 'Content-Type': 'application/json' }, "body":JSON.stringify({"score":1337,"playerName":"Sean Plott"}) }; http.post(options, function(error, res, body) { response.send(body); }); 微信access_token，这里只需要发起一个get请求，地址是这样。https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=基础支持&form=获取access_token接口%20/token/** *发起Get请求 */ //获取Http模块 var http = modules.oHttp; var url ="https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=基础支持&form=获取access_token接口%20/token"; //发起Get请求 http(url, function (error, res, body) { response.send(body); });不到10行代码，我们就可以拿到微信开发必备的access_token，access_token微信是有次数限制的，当然不能这么每次获取使用， 这样只要请求次数多，每月必定超出微信给的次数。 微信官方说：access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效， 那我们就给这个函数的结果保存到数据库，做个定时任务2小时执行一次。然后需要时读取数据库，这样就不会担心超了。第三步：access_token保存数据库我们在控制台建一个WeiXin_access_token表，增加access_token字段，里面随便增加一条记录，拿到id，用来更新这条记录。当然你也可以把每次获取的access_token插入到这个表，需要的时候获取到最新的一条。云函数数据表操作文档：http://doc.bmob.cn/cloud_function/web/develop_doc/#_9function onRequest (request, response, modules) { //获取数据库对象 var db = modules.oData; //这里放到表里的ID var objectId = 'NJEi333B'; //http请求方式: GET var appid = 'wxd1b8c236059cd569'; var secret = 'xxxxxxxxx'; var url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + appid + '&secret=' + secret; //获取Http模块 var http = modules.oHttp; //发起Get请求 http(url, function (error, res, body) { if (!error && res.statusCode == 200) { //写入数据库 var resultObject = JSON.parse(body); //如果返回错误则打印 if (resultObject.errcode) { response.send(resultObject); } //更新到数据表 db.update({ "table": "WeiXin_access_token", "objectId": objectId, "data": { "access_token": resultObject.access_token } }, function (err, data) { response.send("success" + data); }); } }); //获取微信access_token END }第四步：读取access_token暴露给其他平台调用新建个空白云函数，里面编写一下代码function onRequest(request, response, modules) { //数据库对象 var db = modules.oData; //查询一条数据 db.findOne({ "table":"WeiXin_access_token", "objectId":"NJEi333B" },function(err,data){ //JSON打印给客户端 response.send(data); }); } 这里是代码的执行结果，需要预览，可以打开一下链接。http://cloud.bmob.cn/3fbee3a417249ddf/token一样不到10行代码，即可暴露access_token给其他平台调用。总计不到20行代码，不需要10分钟，就可以实现微信整个access_token的维护，与暴露给其他平台使用。最后还有一个关键问题， 2小时自动刷新access_token。第四步：自动刷新access_tokenBmob平台云函数支持liunx下面的crontab语法定时任务，当然国内其他公司的云函数也是支持定时任务的，具体看开发文档。http://doc.bmob.cn/cloud_function/web/timing_tasks/总结：我们可以看到Serverless的Faas 开发微应用，开发效率比传统自己购买云主机，云数据库。高出很多倍。以至于国内这2年，阿里、腾讯、华为等云厂商都推出了自己的Faas 服务。大家都可以去体验一下，你只需要关系业务代码，不再需要去了解框架、运维、底层相关技术。

小程序混合开发（1）准备工作 目标开发一款H5与小程序共用的一套代码，带后端并且可以提交给微信审核。简介：Bmob 最近推出了混合平台 JSSDK库，支持 Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器等，写一份js可以以上任意平台，如果前端UI相关用法可以相同，也就是一份代码可以在多个平台使用。就拿行业微信小程序来说，目前支持跨平台的框架有mpvue、与wepy，分别是美团与腾讯出的。mpvue 有跨平台示例、wepy背后有腾讯为靠山各有优势。混合数据SDK文档地址： https://bmob.github.io/hydrogen-js-sdk/#/?id=登陆这里使用的是Bmob后端云、如果使用自己的服务器，请求网络这块可以用Fly，同样是夸平台，具体请上github查看框架的选择由于mpvue官方有跨平台前端示例，这里为了少踩点坑，选择mpvue实战开始一：分析页面请求需要实现的页面从上图，我们可以看到这个页面，有2个数据来自后端，分表是广告图与列表数据。这里有2个接口，他们的数据结构分别是实战开始二：建立数据表广告图数据结构如下[ { "title": "1299元起，诺基亚X6正式发布", "image": "http://img.ithome.com/newsuploadfiles/focus/f3583ca6-9a52-461b-b2b2-0f649fab0516.jpg", "link": "/pages/news/detail?id=360077&title=1299元起，诺基亚X6正式发布" } ]我在后台建个表slides，导入数据/src/db/slides.json列表数据我在后台建个表newslist，导入数据/src/db/newslist.json，跟上一步一样的操作详细数据建立新闻内容表newscontent，导入数据/src/db/newscontent.json实战开始三：修改请求代码到数据库列表修改请求代码//api.js,getNewsList改为 getNewsList: (r) => { //返回一个异步对象 return new Promise((resolve, reject) => { //查询`newslist` 数据 const query = Bmob.Query('newslist') query.find().then(res => { //返回一个json数据 resolve({'newslist': res}) }).catch(err => { reject(err) }) }) },数据已经从Bmob数据库调用出来了广告图操作一样，具体代码看github点击一下连接查看Github开源代码这样就实现了，首页的广告、数据列表、内容展示功能，如果您的小程序只是一个展示功能，可以使用此代码进行修改。下一节我们再讲朋友圈的实现。

Quikapp快应用【小程序】开发入门教程二 [Quikapp快应用【小程序】开发入门教程二] 调试器入门1. 安装调试器简书新规则不能有二维码，这个地方是一张运行起来内网的二维码图片上一篇讲到二维码，显示出来后，手机应该安装调试器，教程网址https://doc.quickapp.cn/tools/debugging-tools.html2.扫描二维码遇到问题1： 扫描后手机没反应，用另外一台华为手机扫描没问题。解决方法：手机重新安装调试器，重启手机遇到问题2：使用实时编译，报错，错误1：npm run watch 命令执行后提示错误 ，错误2：命令执行成功，手机调试器提示安装失败。错误一：解决办法暂时没找到，过了几天，没动。命令就执行成功了，本环境为MAC。错误二：最终找到原因，这里需要2个进程，单独执行npm run watch 是没效果的，需要把npm run server 也执行起来。错误二提示截图：3.成功实现自动刷新调试npm run watch解决调试问题，接下来就可以具体开发应用了。 这里目前有个神奇的问题是chrome浏览器中的devtools工具 是否显示需要看运气的，而且只支持chrome，我执行了好多次运行命令npm run server 只有一次弹出了调试地址。http://192.168.1.38:12306/inspector/inspector.html?ws=192.168.1.43:42717/inspector&remoteFrontend=true&dockSide=undocked, 如果能拿到浏览器的调试地址，到这里就可以实现手机、电脑同步调试了。

微信小程序三级联动之多列选择器 有些时候，三级联动业务场景并不只是全国地区选择，可能还涉及到自定义分类的三级联动，这时就需要使用微信的多列选择器。如果只是一列字段，或者每次拖动一次都去服务端取，会比较容易。 如果想一次定义好json,关联数据相对比较复杂，此案例json结构如下：效果如下实现过程1.WXML(这是一段微信官方文档的代码)<view class="section"> <view class="section__title">普通选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> <picker bindchange="bindPickerChange1" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </view> 2.js 逻辑部分 // 第一步 data 定义数据 ssl:地区json //第二步 设置默认三级联动数据 Onload //获取省市区json var ssls = this.data.ssl; //定义对应变量 var sheng = []; var shi = []; var qu = []; for (var i in ssls) { sheng.push(ssls[i].p_name) if (i == 0) { for (var u in ssls[i].p_city) { // console.log(ssls[i].p_city[u].c_name) shi.push(ssls[i].p_city[u].c_name) for (var j in ssls[i].p_city[u].p_district) { // console.log(ssls[i].p_city[u].c_name) qu.push(ssls[i].p_city[u].p_district[j].d_name) } } } } console.log(sheng, shi); this.setData({ multiArray: [sheng, shi, qu] }); //第三步：选择对应的value值改变 bindMultiPickerChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, //第四步：下拉拖动选项事件（这里只需要处理第一栏，与第二栏【因为第三栏拖动的时候，没有第四栏关联变动了，关于此处讲的栏，请看代码后图1-3】） bindMultiPickerColumnChange: function (e) { console.log('修改的列为', e.detail.column, '，值为', e.detail.value); var data = { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[e.detail.column] = e.detail.value; switch (e.detail.column) { case 0: this.setData({ thisSheng: e.detail.value }) //此处是拖动第一栏的时候处理 var row = this.getCity(e.detail.value); data.multiArray[1] = row[0]; data.multiArray[2] = row[1]; //此处默认选中第一项 data.multiIndex[1] = 0; data.multiIndex[2] = 0; break; case 1: //此处是拖动第二栏的时候处理 var row = this.getCity(this.data.thisSheng, e.detail.value); console.log(row); data.multiArray[2] = row[1]; data.multiIndex[2] = 0; console.log(data.multiIndex); break; } this.setData(data); },关键处理函数// 获取城市信息 getCity: function (x, y = 999, z = 999) { console.log("xy", x, y); var ssls = this.data.ssl; var shi = []; var qu = []; for (var i in ssls) { if (i == x) { for (var u in ssls[i].p_city) { shi.push(ssls[i].p_city[u].c_name) if (u == y) { for (var j in ssls[i].p_city[u].p_district) { qu.push(ssls[i].p_city[u].p_district[j].d_name) } break; } if (y == 999) { for (var j in ssls[i].p_city[u].p_district) { qu.push(ssls[i].p_city[u].p_district[j].d_name) } } } break; } } console.log(shi); return [shi, qu]; },代码下载地址：https://github.com/magic007/weApp/tree/master/multiSelector基本手动实现一次官方的全国地区选择功能，只是相比官方更灵活，能添加更多种类型。

小程序混合开发（2）朋友圈功能 1.分析功能先看截图1. 朋友圈列表2. 朋友圈详细3. 评论功能2.数据库建立这里列表与详细，我们用一个表来实现，评论用第二个表。总计2个表post 表我们可以直接这样导入一个JSON，但由于首页的资讯这样操作，导致数据都一模一样，这次我们使用云函数定时采集数据到数据库。采集数据数据结构地址： var url = 'https://apiquan.ithome.com/api/post?categoryid=0&type=0&orderTime=1526981875455&visistCount=&pageLength=' 如果手动导入可以导入此数据结构[ { "id":266716, "t":"普通联通卡可以转米粉卡吗？", "c":"[杂谈]", "cn":"畅谈", "uid":100058, "un":"中国火箭军", "rn":"诺基亚 Lumia 930", "pt":"/Date(1527057744773)/", "rt":"/Date(1527060538403)/", "vc":0, "rc":17, "IC":false, "IH":false, "ot":"/Date(-62135596800000)/" } ]云函数获取网址数据代码 function onRequest(request, response, modules) { var http = modules.oHttp; var url = 'https://apiquan.ithome.com/api/post?categoryid=0&type=0&orderTime=1526981875455&visistCount=&pageLength=' http(url, function(error, res, body) { response.end(body); }); } 点击测试看结果这样就可以拿到目标网址数据，如何插入到数据库，看下面代码db.insert({ "table":"XXX", //表名 "data":{"a":"XXXX","b":"XXXX"} //需要更新的数据，格式为JSON },function(err,data){ //回调函数 }); 上面是插入单行数据，如果批量插入，可以使用下面代码function onRequest(request, response, modules) { var http = modules.oHttp; var db = modules.oData; var url = 'https://apiquan.ithome.com/api/post?categoryid=0&type=0&orderTime=1526981875455&visistCount=&pageLength=' http(url, function(error, res, body) { //结果转为对象类型 var results =JSON.parse(body); var arr = []; //循环更新数据 for (var i in results) { newdata = { "method": "post", "path": "/1/classes/post", "body":results[i] }; arr.push(newdata) } //获取数组对象 var bat = modules.oBatch; //批量操作 bat.exec({ "data": { "requests": arr } }, function (err, data) { //回调函数 response.end(data); return; }); response.end(JSON.stringify(results.length)); }); } //点击测试，效果下如图定时任务当然你也可以设置个定时任务我这里设置结果0 0 16 * * * 表示每天的16时0分0秒，触发定时器一次 当然你也可以设置每小时，每天，每分钟，每秒，每隔5分钟等等，规则可以自己定义，具体请看云函数文档文档地址定时任务云函数文档这一节我们把朋友圈的数据表建立，并采集了相关数据，下一节我们修改mpvue小程序代码。