摘要：在微信開(kāi)發(fā)者工具中調(diào)試和一定要正確域名一定是備案的綁定域名需要的放在服務(wù)器上的位置一定要正確參考微信公眾號(hào)開(kāi)發(fā)文檔

下載

git clone git@github.com:leinov/node-weixin-api.git

npm install

開(kāi)發(fā)

在微信公眾號(hào)后臺(tái)配置域名白名單

在server/weixin/wx.js里添加自己的appid secret

在src/index/index.js里wxShare里添加自己的分享內(nèi)容

npm run dev

打開(kāi)微信開(kāi)發(fā)者工具調(diào)試

npm run build

將域名配置時(shí)下載的txt文件放到dist文件夾下

上傳到服務(wù)器

pm2 start www.js啟動(dòng)服務(wù)

在微信里打開(kāi)連接分享給好友測(cè)試

擴(kuò)展：修改/src/component/wxconfig.js中的jsApiList數(shù)組，添加想要使用的微信api

webpack-react-multi-page 多頁(yè)面架構(gòu)

webpack4

react16

es6

node

js-sdk

git

|-- node-weixin-api //項(xiàng)目
    |-- dist //編譯生產(chǎn)目錄
        |-- index
            |-- index.css
            |-- index.js
        |-- index.html
        |-- xxx.txt // 微信域名綁定識(shí)別文件
    |-- node_modules
    |-- server // node文件
        |-- sign.js //公眾號(hào)文檔提供簽名算法
        |-- wx.js //獲取簽名數(shù)據(jù)文件
    |-- src //開(kāi)發(fā)目錄
        |-- index
            |-- images/
            |-- js/
                |-- app.js
                |-- b.js
            |-- index.scss
            |-- index.js //頁(yè)面js入口文件
        |-- template.html // webpack html-webpack-plugin 插件生成html模板
        |-- style.sass //公共sass
    |-- webpackConfig //webpack配置
    |-- package.json
    |-- .gitignore
    |-- webpack.config.js //webpack配置文件
    |-- www.js //生產(chǎn)啟動(dòng)程序

我們?cè)谖⑿啪W(wǎng)頁(yè)開(kāi)發(fā)的時(shí)候需要通過(guò)后端返回的微信簽名數(shù)據(jù)加以前端的配置才能使用微信提供的分享，圖像，音頻等api接口。這里我們就用前后端分離的思想，拿分享到朋友圈為例，使用node來(lái)完成這一過(guò)程

下圖沒(méi)有使用js-sdk開(kāi)發(fā)的頁(yè)面在微信里分享樣式

接下來(lái)我們一步步來(lái)實(shí)現(xiàn)

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。

在添加域名時(shí)需要下載一個(gè)txt文件放到服務(wù)器web可訪問(wèn)的根目錄 比如http://www.leinov.com/xxx.txt 可訪問(wèn)的靜態(tài)根目錄，比如node的靜態(tài)文件設(shè)置的是public文件，就放public下

備注：登錄后可在“開(kāi)發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限，看是否有分享朋友圈等權(quán)限

在需要調(diào)用JS接口的頁(yè)面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/... 也可以直接下載到本地目錄引入

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web

wx.config({
    debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
    appId: "", // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: "", // 必填，生成簽名的隨機(jī)串
    signature: "",// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

我們使用微信的所有接口都需要有在引入wx js-sdk和配置config的前提下
下面我們主要講解如何通過(guò)node來(lái)獲取微信簽名的config的數(shù)據(jù)。

步驟三所需要的數(shù)據(jù)需要通過(guò)簽名算來(lái)生成，下面是生成簽名數(shù)據(jù)的步驟

1,通過(guò)公眾號(hào)的appid和secret獲取access_token

2.根據(jù)access_token獲取ticket票據(jù)

3.根據(jù)微信提供node生成簽名算法（需要ticket，url參數(shù)來(lái)返回config數(shù)據(jù)

這里要強(qiáng)調(diào)是secret一定要寫(xiě)在后端，決不能暴露在前端，這也是為什么需要用接口返回?cái)?shù)據(jù)的原因。

獲取簽名config數(shù)據(jù)完整代碼 server/wx.js

/*********************************************************************************
 * @file: 返回微信開(kāi)發(fā)需要的config數(shù)據(jù)
 * @desc:
 *         1,通過(guò)appid和secret獲取access_token
 *      2.根據(jù)access_token獲取ticket
 *      3.根據(jù)ticket和url(訪問(wèn)的頁(yè)面地址由接口傳過(guò)來(lái) )通過(guò)sgin加密返回前度需要用到的config數(shù)據(jù)
 * @ahthor: leinov
 * @usedate:2018-11-07
**********************************************************************************/

const request = require("request");
const Base64 = require("js-base64").Base64;
const sign = require("./sign.js"); //微信提供在開(kāi)發(fā)文檔可以找到下載到本地
const base={
    appid:"****",//公眾號(hào)appid
    secret:"****", // 公眾號(hào)secret （重要不要暴露在前端）
    wxapi:"https://api.weixin.qq.com/cgi-bin"
};
/**
 * 根據(jù)appid,secret獲取access_token
 */
function  getAccessToken(){
    return new Promise((resolve, reject)=>{
        request.get(`${base.wxapi}/token?grant_type=client_credential&appid=${base.appid}&secret=${base.secret}`, function (error, response, body) {
            if(error!==null){
                reject("獲取access_token失敗 檢查getAccessToken函數(shù)");
            }
            resolve(JSON.parse(body));
        });
    });
}

/**
 * 根據(jù)access_token獲取api_ticket
 *
 * @param  {String} access_token
 * @return {Promise}
 */
function getTicket(access_token){
    return new Promise((resolve,reject)=>{
        request.get(`${base.wxapi}/ticket/getticket?access_token=${access_token}&type=jsapi`, function (error, response, body) {
            if(error!==null){
                reject("獲取api_ticket失敗 檢查getTicket函數(shù)");
            }
            resolve(JSON.parse(body));
        });
    });
}

/**
 * 根據(jù)api_ticket和url通過(guò)加密返回所有config數(shù)據(jù)
 *
 * @param  {String} href
 * @return {Object} configdata
 */
async function getConfigData(href){
    let configData;
    try{
        const accessTokenData = await getAccessToken();
        const ticketData = await getTicket(accessTokenData.access_token);
        const decodeHref = Base64.decode(href);
        configData = sign(ticketData.ticket,decodeHref);
        configData.appid = base.appid;
    }catch(err){
        //打印錯(cuò)誤日志
        console.log(err);
        configData = {};
    }
    return configData;
}

module.exports = getConfigData;

這里使用到了request來(lái)請(qǐng)求微信接口，sign.js是微信提供的node簽名算法，自己可以下載，通過(guò)微信接口請(qǐng)求以及node簽名算法就可以獲取到如下簽名數(shù)據(jù)。

  timestamp: ,  // 生成簽名的時(shí)間戳
  nonceStr: "", // 生成簽名的隨機(jī)串
  signature: "",// 簽名

上面wx.js已經(jīng)獲得數(shù)據(jù)， 接下來(lái)我們用node編寫(xiě)接口返回?cái)?shù)據(jù)。注意下面的href，href是前端傳回的用來(lái)生成簽名的，而且這個(gè)網(wǎng)頁(yè)地址的域名一定是在設(shè)置里加入白名單了的。

var express = require("express");
var app = express();
var getConfigData = require("./server/wx.js");
var port = "3000";

//獲取微信配置數(shù)據(jù)接口
app.get("/wxconfigdata", function(req, res){ //獲取配置
    let href = req.query.href;//get獲取前端傳來(lái)的base64網(wǎng)頁(yè)地址
    getConfigData(href).then((data)=>{
        res.send(JSON.stringify(data));
    });
});

var server = http.createServer(app);
server.listen(port);
server.on("listening", onListening);

這樣就啟動(dòng)了一個(gè)3000端口的服務(wù)
我們通過(guò)訪問(wèn) "http://localhost:3000/wxconfigdata" 就可以拿到數(shù)據(jù)，但這個(gè)數(shù)據(jù)是不正確的，因?yàn)閘ocahost跟在設(shè)置里的白名單域名不匹配，所以在開(kāi)發(fā)時(shí)我們要放到測(cè)試服務(wù)器里測(cè)試。

/*********************************************************************************
 * @file: src/wxconfig.js 通過(guò)接口獲取微信config數(shù)據(jù)
 * @ahthor: leinov
 * @usedate:2018-11-07
**********************************************************************************/

import { Base64 } from "js-base64";
const axios = require("axios");

/**
 * 頁(yè)面調(diào)用微信分享方法
 *
 * @param  {Object} obj      分享的標(biāo)題，描述，圖片等
 * @param  {type} callback
 * @return {type}
 */
function wxShare(obj,callback){
    const href = Base64.encode(location.href);
    //base64當(dāng)前頁(yè)面地址傳給后端生成簽名
    axios.get(`${location.origin}/wxconfigdata?href=${href}`).then((res)=>{
        wx.config({
            debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
            appId: res.data.appid, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
            timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
            nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串
            signature: res.data.signature,// 必填，簽名，見(jiàn)附錄1
            jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)文檔
        });
        shareConfig(obj,callback);
    }).catch((err)=>{
        shareConfig({},callback);
    });
}

function shareConfig(obj,callback){
    wx.ready(function(){
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title:  obj.timelinetitle ? obj.timelinetitle : obj.title , // 分享標(biāo)題
            link: obj.link, // 分享鏈接
            imgUrl: obj.imgUrl ? obj.imgUrl :"" , // 分享圖標(biāo)
            success: function () {
                if (typeof callback === "function"){
                    callback();
                }
            },
            cancel: function () {
                // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
            }
        });

        // 分享給微信好友
        wx.onMenuShareAppMessage({
            title: obj.title, // 分享標(biāo)題
            desc: obj.desc, // 分享描述
            link: obj.link, // 分享鏈接
            imgUrl: obj.imgUrl ? obj.imgUrl:"",
            success: function () {
                if (typeof callback === "function"){
                    callback();
                }
            },
            cancel: function () {
                // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
            }
        });
    });
}

export default wxShare;

假設(shè)我們使用的是react 在react 打包入口js文件里調(diào)用配置即可

import wxShare from "../component/wxconfig.js";
wxShare({
    title: "駕多多-小程序時(shí)代的駕校管理系統(tǒng)", // 分享標(biāo)題
    desc:"駕多多駕校管理系統(tǒng)。幫助駕校在互聯(lián)網(wǎng)時(shí)代，零門(mén)檻使用小程序工具，提升招生量、提升服務(wù)能力、降低運(yùn)營(yíng)成本，是為駕校提供人、財(cái)、物及業(yè)務(wù)辦理的綜合管理系統(tǒng)。", // 分享描述
    link: location.href, // 分享鏈接
    imgUrl:"https://***/jiaddwxicon.png" , // 分享圖標(biāo)
});

在配置正確的情況下就可以實(shí)現(xiàn)配置分享標(biāo)題描述和圖片了，并且微信提供的可用接口都可以實(shí)現(xiàn)。

在微信開(kāi)發(fā)者工具中調(diào)試

appid和secret一定要正確

域名一定是備案的

綁定域名需要的放在服務(wù)器上的txt位置一定要正確

微信公眾號(hào)開(kāi)發(fā)文檔