進入配置的正題，這里我使用的是新浪云的服務器。然后進行配置。

一、服務器配置

進入微信公眾號開發(fā)平臺。

找到：開發(fā) => 基本配置

然后在右側(cè)就有一些公眾號的開發(fā)信息，其中appid和AppSecret會十分有用，還有服務器配置，這就是我們要配置的第一項。

服務器地址就是要驗證請求是不是來自微信服務器，token可以自己填寫，后期是用來進行一些加密算法的。

在點擊提交的時候會顯示配置失敗，那是需要后臺的一些驗證。

這里會涉及到前后的一些交互，所以我使用的就是express框架搭建前后端的項目運行。

使用express應用程序生成器快速創(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

項目創(chuàng)建成功后就可以部署到新浪云中。新浪云有文檔。

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

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

timestamp：時間戳

nonce：隨機字符串

signature：簽名

echostr：返回的字符串

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

簽名算法：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接口安全域名

設置 => 公眾號設置 => 功能設置

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

這個是使用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: "*******",

    secret: "*********"

}

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, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，

      scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有

      success: function (res) {

        var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果

        console.log(result);

      }

    });

  }

</script>

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