分类 Bmob后端云 下的文章

什么是微信开发第一步?

微信公众平台开发第一步详解

如果有人问你,微信体系下,开放平台、公众号、小程序开发第一步是做什么?

我的回答是获取微信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_credential
appid第三方用户唯一凭证
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/

进入开发-》基本配置

image.png

拿到

开发者ID(AppID)与开发者密码(AppSecret),开发请求时需要用到。

第二步:编写云函数

首先你有个Bmob后端应用,点击进入云函数。选择模板创建,当然你也可以自己变。

云函数

自己编写代码,我们有一点javascript基础,或者java基础都可以。这里介绍下Nodejs

文档地址:http://doc.bmob.cn/cloud_function/web/develop_doc/#http_1

HTTP请求对象
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_tokenaccess_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/#_9

function 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_token

Bmob平台云函数支持liunx下面的crontab语法定时任务,当然国内其他公司的云函数也是支持定时任务的,具体看开发文档。

http://doc.bmob.cn/cloud_function/web/timing_tasks/

image.png

总结:

我们可以看到Serverless的Faas 开发微应用,开发效率比传统自己购买云主机,云数据库。高出很多倍。以至于国内这2年,阿里、腾讯、华为等云厂商都推出了自己的Faas 服务。大家都可以去体验一下,你只需要关系业务代码,不再需要去了解框架、运维、底层相关技术。

目标

开发一款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

实战开始一:分析页面请求

需要实现的页面
demo

从上图,我们可以看到这个页面,有2个数据来自后端,分表是广告图列表数据。这里有2个接口,他们的数据结构分别是

实战开始二:建立数据表

  1. 广告图
数据结构如下
[
  {
  "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
导入数据
  1. 列表数据

    我在后台建个表newslist,导入数据/src/db/newslist.json,跟上一步一样的操作
  2. 详细数据

    建立新闻内容表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快应用【小程序】开发入门教程二] 调试器入门

1. 安装调试器

简书新规则不能有二维码,这个地方是一张运行起来内网的二维码图片

上一篇讲到二维码,显示出来后,手机应该安装调试器,教程网址

https://doc.quickapp.cn/tools/debugging-tools.html

2.扫描二维码

image

遇到问题1: 扫描后手机没反应,用另外一台华为手机扫描没问题。

解决方法:手机重新安装调试器,重启手机

遇到问题2:使用实时编译,报错,错误1:npm run watch 命令执行后提示错误 ,错误2:命令执行成功,手机调试器提示安装失败。

错误一:解决办法暂时没找到,过了几天,没动。命令就执行成功了,本环境为MAC。

错误二:最终找到原因,这里需要2个进程,单独执行npm run watch 是没效果的,需要把npm run server 也执行起来。

错误二提示截图:

image

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, 如果能拿到浏览器的调试地址,到这里就可以实现手机、电脑同步调试了。

image

有些时候,三级联动业务场景并不只是全国地区选择,可能还涉及到自定义分类的三级联动,这时就需要使用微信的多列选择器。

如果只是一列字段,或者每次拖动一次都去服务端取,会比较容易。 如果想一次定义好json,关联数据相对比较复杂,此案例json结构如下:

4276407-6e0a603d52c31256.png.webp


效果如下

image.png

这种.png

实现过程

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];

  },

图1-2.png

代码下载地址:https://github.com/magic007/weApp/tree/master/multiSelector

基本手动实现一次官方的全国地区选择功能,只是相比官方更灵活,能添加更多种类型。

1.分析功能

先看截图

列表.png

详细

评论.png

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小程序代码。