一、服務(wù)器配置

進入微信公眾號平臺。
找到：開發(fā) => 基本配置
然后在右側(cè)就有一些公眾號的開發(fā)信息，其中appid和AppSecret會十分有用，還有服務(wù)器配置，這就是我們要配置的第一項。

服務(wù)器地址就是要驗證請求是不是來自微信服務(wù)器，token可以自己填寫，后期是用來進行一些加密算法的。
在點擊提交的時候會顯示配置失敗，那是需要后臺的一些驗證。
這里會涉及到前后的一些交互，所以我使用的就是express框架搭建前后端的項目運行。
使用express應(yīng)用程序生成器快速創(chuàng)建

npm install -g express-generator

express --no-view myapp

這樣就快速創(chuàng)建了一個項目

├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

具體的目錄信息參照官網(wǎng)
https://www.expressjs.com.cn/starter/generator.html
項目創(chuàng)建成功后就可以部署到新浪云中。新浪云有文檔。

把你的遠(yuǎn)程倉庫克隆下來，里面是個空倉庫，然后把你創(chuàng)建的項目復(fù)制進來（node_modules這個文件夾不用），然后提交代碼，最后推送到遠(yuǎn)程倉庫，這個時候會自動給你下包，同時進行部署，會耗時一段時間。部署完成就可以使用新浪云提供的二級域名進行訪問。

服務(wù)器配置填寫完成后點擊提交，這時會向你的服務(wù)器發(fā)送請求，同時會攜帶四個參數(shù)：

timestamp：時間戳
nonce：隨機字符串
signature：簽名
echostr：返回的字符串

后臺接收這四個參數(shù)在配合token進行簽名算法加密，然后和請求中的簽名進行比對，如果一致就返回echostr，那么這個時候服務(wù)器就可以配置成功了。

簽名算法：timestamp，nonce，token進行字典排序，把排序后的數(shù)據(jù)拼接成字符串然后使用sha1進行加密，就會得到簽名。

router.get('/auth', (req, res) => {
  const { timestamp, nonce, signature, echostr } = req.query;
  const token = "xxxxx";
  const sha1Str = sha1([timestamp, nonce, token].sort().join(''));
  if (sha1Str === signature) {
    res.set('Content-Type', 'text/plain')
    res.send(echostr)
  } else {
    res.send('err')
  }
})

這個時候點擊提交，就會顯示配置成功。

二、js接口安全域名
設(shè)置 => 公眾號設(shè)置 => 功能設(shè)置

填入服務(wù)器域名，同時還需要把它指定的文件下載下來放到項目的根目錄下。

這個是使用express搭建的項目，其中public就是靜態(tài)資源存放的目錄，打開網(wǎng)址就會顯示這個目錄下的文件，所以把下載好的文件放到這個文件的根目錄即可。沒有這一步的話，添加不成功。倉庫修改了，需要重新提交代碼，重新部署。

三、js-sdk的注入

要想使用微信的接口那么就需要引入微信提供的js文件，在項目開發(fā)中也提供了js-sdk。注入js-sdk則需要一些配置項，其中就需要后臺返回的簽名包。

為了能夠成功使用微信的功能，所以就寫一個接口來返回簽名包。

1、獲取access_token
2、根據(jù)access_token請求拿到ticket
3、創(chuàng)建數(shù)據(jù)對象包含jsapi_ticket，url，noncestr，timestamp
4、字段字典排序
5、拼接數(shù)據(jù)
6、sha1加密

功能封裝config.js

module.exports = {
    appid: "wx9543e309a2c227d8",
    secret: "59fb4912887403d299fe3b3936c6d4d6"
}

const { appid, secret } = require('../config');
const axios = require('axios');
const sha1 = require('sha1');
let getTicket = async () => {
    //獲取token
    let tokenUrl = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
    let token_data = await axios.get(tokenUrl);
    let token = token_data.data.access_token;
    //獲取ticket
    let ticketUrl = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`
    let ticket_data = await axios.get(ticketUrl);
    return ticket_data.data.ticket
}
let sign = async (url) => {
    let jsapi_ticket = await getTicket();
    //創(chuàng)建數(shù)據(jù)
    let obj = {
        jsapi_ticket,
        url,
        noncestr: Math.random().toString(36).substring(2, 15),
        timestamp: parseInt(new Date().getTime() / 1000) + ''
    }
    //開始生成簽名
    //1、字段字典排序
    let keys = Object.keys(obj).sort();
    //2、數(shù)據(jù)進行字段排序后的對象
    let newObj = {};
    keys.forEach(key => {
        newObj[key] = obj[key];
    })
    //3、拼接數(shù)據(jù)
    let str = '';
    for (const k in newObj) {
        str += "&" + k + "=" + newObj[k]
    }
    //4、sha1加密
    str = sha1(str.substr(1))
    //5、后臺數(shù)據(jù)返回
    obj.signature = str
    return obj
}
module.exports = sign

接口處理

router.get('/jsapi', async (req, res) => {
  let url = decodeURIComponent(req.query.url)
  let config = await sign(url)
  res.send(config)
})

前端可以傳入url參數(shù)
這樣就會返回簽名包供前端使用。

四、前端接口調(diào)用
在public中的index.html中進行測試

• 引入文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>

• 請求數(shù)據(jù)，配置sdk

<script>
  let url = encodeURIComponent(location.href.split('#')[0]);
  axios.get(`http://zhancjian.applinzi.com/jsapi?url=${url}`).then(res => {
    console.log(res);
    wx.config({
      debug: true,
      appId: 'wx9543e309a2c227d8',
      timestamp: res.timestamp,
      nonceStr: res.noncestr,
      signature: res.signature,
      jsApiList: ['getLocation', 'scanQRCode']
    });
  })
</script>

現(xiàn)在已經(jīng)配置成功，然后就可以調(diào)用微信接口了，這里試驗了兩個接口獲取地理位置和調(diào)起微信掃一掃。

<button onclick="getl()">獲取地理位置</button>
<button onclick="sao()">掃一掃</button>

<script>
  function getl() {
    wx.getLocation({
      type: 'wgs84',
      success: res => {
        console.log(res);
      }
    });
  }
  function sao() {
    wx.scanQRCode({
      needResult: 0, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
      scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
      success: function (res) {
        var result = res.resultStr; // 當(dāng)needResult 為 1 時，掃碼返回的結(jié)果
        console.log(result);
      }
    });
  }
</script>

現(xiàn)在一切配置完成，可以使用微信開發(fā)者工具調(diào)試。同時也可以把代碼進行提交，重新部署，這個時候找手機微信打開網(wǎng)址測試就可以使用微信服務(wù)。

原文閱讀