前端工程師如何快速的開發一個微信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);      }    }); }); }