前端工程师如何快速的开发一个微信JSSDK应用

时间 2019-11-13

标签前端工程师如何快速开发一个微信 jssdk 应用繁體版

原文原文链接

亲们，订阅号出来已经好久了，做为一个前端工程师或者全栈工程师，你是否是错过了什么？
大概许多攻城狮同砚尚未反应过来订阅号怎么回事，就立刻要被微信的应用号秀一脸了。在应用号尚未正式出来以前，咱们赶忙一块儿来看看怎样给本身的订阅号加个网页功效吧。html

1、订阅号网页与平凡的HTML5网页的区别

可能会有不少同窗尚未弄清楚普通的HTML网页与订阅号网页的差异，我在这里简朴的说明一下。前端

订阅号的网页就是微信的网页，普通的网页是W3C范例下的网页。
订阅号的网页一般是以遵照W3C的网页规范为前提的，可是也有可能有所差别，具体要凭据微信浏览器的解析本领而定，可是一般是支持大部分的W3C标准的。必定程度上W3C规范的网页做为订阅号的网页是没有题目的。
订阅号网页必要微信的认证。在认证后一般能够获得比普通的W3C网页更多的能力。好比扫描二维码，微信支付，拍照片，录音，WIFI设备等能力。
以是订阅号网页具有比普通的W3C网页更强的终端能力，能够更好的提供移动端的服务，对付不少我的与公司来讲都是值得尝试的。

2、开辟订阅号网页须要那些技能？

在了解了订阅号网页与普通网页的差异后，咱们根本上知道了开发订阅号所须要的基本的技术。node

HTML + CSS + JS的前端技术
服务器技术
微信开发是所用到的SDK技术

因为1,2都是通用技术，因此我不在这里具体介绍了。咱们如今重要介绍一下微信开发所须要的SDK技术。jquery

3、订阅号开发的微信技术

订阅号开发所须要的纯微信上的技术预备以下：ajax

大众号配置信息
包括app id, app secret
服务器验证哀求接口
即须要有一个接口能够与微信服务器对接，用于处置惩罚微信服务器返回的消息
一个引入了JSSDK的微信页面

公共号配置信息

公共号配置信息须要登陆json

获取，关于如何注册微信我的订阅号的问题请查看微信相关帮助。不在这里赘述了。
配置信息所在的位置是：开发=》基本配置
在开发者ID栏目里有两个东西浏览器

AppID(应用ID)
AppSecret(应用密钥)
AppID是固定不变的，AppSecret是能够变革的。secret最好按期变化，以防止泄漏形成宁静问题。

一个存案的服务器域名

域名备案是中国特点，因此你们须要好好享受这个特点。我就不在这里详细介绍了。
有了域名后，将域名填入：
设置 =》公众号设置 =》功能设置 =》 JS接口安全域名
而后填入你想放的域名便可。安全

准备一个JSSDK的微信页面

准备微信页面是咱们此次的重点。在这里会涉及到全部关于微信页面的制做的业务逻辑。咱们将会分解每一个步骤，详细解说原理与操做。
因为正式上线公共账号须要备案的域名，因此对于大部分人来讲照旧有点不方便。因此在这里我主要讲解如何开发与测试订阅号微信页面，而后将这个过程复制到已经备案的域名所对应的服务器上便可。服务器

第一步是制做JSSDK的HTML页面

1. 首先是一个最简单的包含有JSSDK的HTML代码：微信

<!DOCTYPE html> <html> <head>    <meta charset="UTF-8">    <meta name=viewport content="width=device-width">    <title>微信网页</title>    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> </head> <body>    <h1>微信JSSDK网页</h1> </body> </html>

2. 而后添加JS初始代码
为了代码的简洁，咱们引入了jquery.

 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

而后添加初始化jssdk的代码

<script>  $(document).ready(function() {    // 根据实际填写接口的配置地点    // 这里的接口地址是基于node-weixin配置的。    var url = "/jssdk/config";      // 当前的网页请求地址    var weixinUrl = location.href.split('#')[0];    $.ajax({      url: url, //这个地址是服务器配置JSSDK的地址      data: {          // 这个地址是发生jssdk调用的url地址          // 用于服务器配置              url: weixinUrl      }    }).success(function(json) {      // 得到服务器返回的配置信息      var data = json.data;      var config = {};      for (var k in json.data) {        config[k] = json.data[k];      }      // config.debug = true;      // 添加你须要的JSSDK的权限      config.jsApiList = [        'checkJsApi',        'scanQRCode'      ];      config.timestamp = parseInt(config.timestamp);      wx.config(config);      wx.ready(function() {        alert("微信jssdk配置成功!");      });      wx.error(function(res) {        alert('微信JSSDK配置失败！');      });    }); }); </script>

效果以下：

对于配置JSSDK来讲，最重要的是须要在服务器端提供一个配置参数，这个能够参考node-weixin的参数配置接口。如许前端只须要将当前的URL转入就能够完成整个JSSDK的参数的匹配。
得到配置信息后只要将接口权限配置一下就能够完成整个JSSDK的配置了。

3. 调用JSSDK的接口API
JSSDK的接口API有不少，咱们能够经过一个简单的扫描调用来验证咱们的代码的正确性。

首先咱们要添加一个能够点击的HTML元素：

    <h2 class="qrcode">点击扫描</h2>

而后咱们将wx.ready里的回调函数举行重写：

function() {  $('.qrcode').click(function () {    wx.scanQRCode({      // 默认为0，扫描效果由微信处理，1则直接返回扫描结果，      needResult: 1,      // 能够指定扫二维码仍是一维码，默认两者都有      scanType: ["qrCode", "barCode"],      success: function (res) {        // 当needResult 为 1 时，扫码返回的结果        var result = res.resultStr;        alert(result);      }    }); }); }

这样咱们在这个class为qrcode的HTML元素上点击后就能够调用二维码扫描功能了。

图片以下：

利用WeTop进行微信网页

上面的过程咱们没有讨论到服务器，是由于咱们使用了wetop，wetop已经帮你将全部的服务器测试环境配置好了。因此你彻底不用本身开发服务器就能够进行微信的前端开发了。使用WeTop的方法很是简单。

在配置 =》公共号参数配置 =》 app 将全部的参数配置完成
在接口 => AccessToken获取测试测试可否正确的获取token
在接口 => jssdk 页面测试里测试
经过指定模板地址，就能够将本身的网页放到手机服务器上进行测试了。JSSDK测试的默认地址是jssdk.html。

WeTop支持(Windows, Linux, Mac OS三种桌面OS），能够到

进行下载或者google搜索node-weixin-desktop找到源码，自行进行编译。