基于nodejs的微信JS-SDK简单应用实现


Posted in NodeJs onMay 21, 2019

2015 是 Hybrid App 崛起之年 ,Web App 和 Native App 各有其强大之处,也有着致命的缺点,人们一边追求native流畅的用户体验,一边同时期望产品能够快速的迭代更新,Hybrid 成为必然的趋势。

鹅厂一马当先,发布了业内震惊一时的 JS-SDK , 这对于基于微信的h5开发者来说简直是如降甘露,从此开发者们告别了用箭头来提示右上角可以分享,并且随时可以使用微信的原生能力,微信变成了一个超级浏览器。

一、准备工作

1.在微信公众平台申请测试账号,并设置好好 JS 接口安全域名 (注:域名必须可以外网访问)

2.查看微信开发者文档

二、开始编码

使用微信 sdk 必须自己实现微信的签名算法。

大概需要4个步骤:

1.获取access_token;

2.根据access_token 获取jsapi_ticket

3. 根据 appId(公众号唯一id)、noncestr(随机字符串)、timestamp(时间戳)、url(当前页面完整url,不包括#aaa=bbb) 通过sha1算法签名

4.将信息返回给前端 , 设置wx.config。

由于获取access_token 和jsapi_ticket 的接口都有访问限制,所以明确指出需要第三方做缓存处理。此处我们缓存jsapi_ticket 就可以了。

/config/wechat.cfg.js

module.exports = {
  grant_type: 'client_credential',
  appid: 'xxxxxxxxxxxxxxx',
  secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  noncestr:'Wm3WZYTPz0wzccnW',
  accessTokenUrl:'https://api.weixin.qq.com/cgi-bin/token',
  ticketUrl:'https://api.weixin.qq.com/cgi-bin/ticket/getticket',
  cache_duration:1000*60*60*24 //缓存时长为24小时
}

最主要部分是签名:

signature.js

var request = require('request'),
  cache = require('memory-cache'),
  sha1 = require('sha1'),
  config = require('../config/wechat.cfg');

exports.sign = function (url,callback) {
  var noncestr = config.noncestr,
    timestamp = Math.floor(Date.now()/1000), //精确到秒
    jsapi_ticket;
  if(cache.get('ticket')){
    jsapi_ticket = cache.get('ticket');
    console.log('1' + 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url);
    callback({
      noncestr:noncestr,
      timestamp:timestamp,
      url:url,
      jsapi_ticket:jsapi_ticket,
      signature:sha1('jsapi_ticket=' + jsapi_ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url)
    });
  }else{
    request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){
      if (!error && response.statusCode == 200) {
        var tokenMap = JSON.parse(body);
        request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){
          if (!error && response.statusCode == 200) {
            var ticketMap = JSON.parse(json);
            cache.put('ticket',ticketMap.ticket,config.cache_duration); //加入缓存
            console.log('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url);
            callback({
              noncestr:noncestr,
              timestamp:timestamp,
              url:url,
              jsapi_ticket:ticketMap.ticket,
              signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url)
            });
          }
        })
      }
    })
  }
}

由于只是简单的demo , 也就没有采用promise,而是采用的普通的回调。

客户端部分

document.getElementById('refresh').onclick = function(){location.reload();}

/**
 * 以下内容多摘自官方demo
 *
**/
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: appId, // 必填,公众号的唯一标识
  timestamp: timestamp, // 必填,生成签名的时间戳
  nonceStr: nonceStr, // 必填,生成签名的随机串
  signature: signature,// 必填,签名,见附录1
  jsApiList: ['checkJsApi',
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareWeibo',
    'hideMenuItems',
    'showMenuItems',
    'hideAllNonBaseMenuItem',
    'showAllNonBaseMenuItem',
    'translateVoice',
    'startRecord',
    'stopRecord',
    'onRecordEnd',
    'playVoice',
    'pauseVoice',
    'stopVoice',
    'uploadVoice',
    'downloadVoice',
    'chooseImage',
    'previewImage',
    'uploadImage',
    'downloadImage',
    'getNetworkType',
    'openLocation',
    'getLocation',
    'hideOptionMenu',
    'showOptionMenu',
    'closeWindow',
    'scanQRCode',
    'chooseWXPay',
    'openProductSpecificView',
    'addCard',
    'chooseCard',
    'openCard'] // 必填,需要使用的JS接口列表,
});

wx.ready(function(){
 // 1 判断当前版本是否支持指定 JS 接口,支持批量判断
 document.querySelector('#checkJsApi').onclick = function () {
  wx.checkJsApi({
   jsApiList: [
    'getNetworkType',
    'previewImage'
   ],
   success: function (res) {
    alert(JSON.stringify(res));
   }
  });
 };

  // 2. 分享接口
 // 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
 document.querySelector('#onMenuShareAppMessage').onclick = function () {
  wx.onMenuShareAppMessage({
   title: '互联网之子',
   desc: '在长大的过程中,我才慢慢发现,我身边的所有事,别人跟我说的所有事,那些所谓本来如此,注定如此的事,它们其实没有非得如此,事情是可以改变的。更重要的是,有些事既然错了,那就该做出改变。',
   link: 'http://movie.douban.com/subject/25785114/',
   imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
   trigger: function (res) {
    // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
    alert('用户点击发送给朋友');
   },
   success: function (res) {
    alert('已分享');
   },
   cancel: function (res) {
    alert('已取消');
   },
   fail: function (res) {
    alert(JSON.stringify(res));
   }
  });
  alert('已注册获取“发送给朋友”状态事件');
 };

  // 5 图片接口
 // 5.1 拍照、本地选图
 var images = {
  localId: [],
  serverId: []
 };
 document.querySelector('#chooseImage').onclick = function () {
  wx.chooseImage({
   success: function (res) {
    images.localId = res.localIds;
    alert('已选择 ' + res.localIds.length + ' 张图片');
   }
  });
 };
  // 5.2 图片预览
 document.querySelector('#previewImage').onclick = function () {
  wx.previewImage({
   current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
   urls: [
    'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
    'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
    'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
   ]
  });
 };

  // 7.2 获取当前地理位置
 document.querySelector('#getLocation').onclick = function () {
  wx.getLocation({
   success: function (res) {
    alert(JSON.stringify(res));
   },
   cancel: function (res) {
    alert('用户拒绝授权获取地理位置');
   }
  });
 };

  // 9 微信原生接口
 // 9.1.1 扫描二维码并返回结果
 document.querySelector('#scanQRCode0').onclick = function () {
  wx.scanQRCode();
 };

});

wx.error(function(res){
  JSON.stringify(res)
});

至此,基本功能已经完成。附上效果图

基于nodejs的微信JS-SDK简单应用实现

基于nodejs的微信JS-SDK简单应用实现

基于nodejs的微信JS-SDK简单应用实现

踩的坑:

1.签名算法不一致: 通过 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 验证算法正确性

2.url 必须完全一致,并且外网可访问。 将代码部署到 BAE ,或者其他应用引擎服务器上。

3.timestamp需要精确到秒。

源码:https://github.com/liaobin312716/wechat-sdk-demo/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
基于NodeJS的前后端分离的思考与实践(二)模版探索
Sep 26 NodeJs
Nodejs学习笔记之Stream模块
Jan 13 NodeJs
NodeJS中利用Promise来封装异步函数
Feb 25 NodeJs
Nodejs中session的简单使用及通过session实现身份验证的方法
Feb 04 NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
Jul 14 NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 NodeJs
Linux Centos7.2下安装nodejs&npm配置全局路径的教程
May 15 NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 NodeJs
基于nodejs的微信JS-SDK简单应用实现
May 21 NodeJs
nodejs如何在package.json中设置多条启动命令
Mar 16 NodeJs
nodejs利用readline提示输入内容实例代码
Jul 15 NodeJs
nodejs中实现用户注册路由功能
May 20 #NodeJs
nodejs实现日志读取、日志查找及日志刷新的方法分析
May 20 #NodeJs
NodeJS读取分析Nginx错误日志的方法
May 14 #NodeJs
nodejs搭建本地服务器并访问文件操作示例
May 11 #NodeJs
M2实现Nodejs项目自动部署的方法步骤
May 05 #NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
May 05 #NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 #NodeJs
You might like
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
php pdo操作数据库示例
2017/03/10 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
python简单判断序列是否为空的方法
2015/06/30 Python
Python使用turtule画五角星的方法
2015/07/09 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
简单的Python调度器Schedule详解
2019/08/30 Python
python计算n的阶乘的方法代码
2019/10/25 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python实现画图工具
2020/08/27 Python
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
《观舞记》教学反思
2014/04/16 职场文书
商务英语专业求职信
2014/06/26 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript