热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了基于nodejs的微信JS-SDK简单应用实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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)
});

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

踩的坑:

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

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

3.timestamp需要精确到秒。

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

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


推荐阅读
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版
    VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ... [详细]
  • 生成对抗式网络GAN及其衍生CGAN、DCGAN、WGAN、LSGAN、BEGAN介绍
    一、GAN原理介绍学习GAN的第一篇论文当然由是IanGoodfellow于2014年发表的GenerativeAdversarialNetworks(论文下载链接arxiv:[h ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • t-io 2.0.0发布-法网天眼第一版的回顾和更新说明
    本文回顾了t-io 1.x版本的工程结构和性能数据,并介绍了t-io在码云上的成绩和用户反馈。同时,还提到了@openSeLi同学发布的t-io 30W长连接并发压力测试报告。最后,详细介绍了t-io 2.0.0版本的更新内容,包括更简洁的使用方式和内置的httpsession功能。 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • 关于我们EMQ是一家全球领先的开源物联网基础设施软件供应商,服务新产业周期的IoT&5G、边缘计算与云计算市场,交付全球领先的开源物联网消息服务器和流处理数据 ... [详细]
  • 图解redis的持久化存储机制RDB和AOF的原理和优缺点
    本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件,恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘,实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点,帮助读者更好地理解redis的持久化存储策略。 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
author-avatar
dwxa520恋歌_261
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有