进入配置的正题，这里我使用的是新浪云的服务器。然后进行配置。

一、服务器配置

进入微信公众号开发平台。

找到：开发 => 基本配置

然后在右侧就有一些公众号的开发信息，其中appid和AppSecret会十分有用，还有服务器配置，这就是我们要配置的第一项。

服务器地址就是要验证请求是不是来自微信服务器，token可以自己填写，后期是用来进行一些加密算法的。

在点击提交的时候会显示配置失败，那是需要后台的一些验证。

这里会涉及到前后的一些交互，所以我使用的就是express框架搭建前后端的项目运行。

使用express应用程序生成器快速创建

npm install -g express-generator

express --no-view myapp

这样就快速创建了一个项目

├── app.js

├── bin

│   └── www

├── package.json

├── public

│   ├── images

│   ├── javascripts

│   └── stylesheets

│       └── style.css

├── routes

│   ├── index.js

│   └── users.js

└── views

    ├── error.pug

    ├── index.pug

    └── layout.pug

项目创建成功后就可以部署到新浪云中。新浪云有文档。

把你的远程仓库克隆下来，里面是个空仓库，然后把你创建的项目复制进来（node_modules这个文件夹不用），然后提交代码，最后推送到远程仓库，这个时候会自动给你下包，同时进行部署，会耗时一段时间。部署完成就可以使用新浪云提供的二级域名进行访问。

服务器配置填写完成后点击提交，这时会向你的服务器发送请求，同时会携带四个参数：

timestamp：时间戳

nonce：随机字符串

signature：签名

echostr：返回的字符串

后台接收这四个参数在配合token进行签名算法加密，然后和请求中的签名进行比对，如果一致就返回echostr，那么这个时候服务器就可以配置成功了。

签名算法：timestamp，nonce，token进行字典排序，把排序后的数据拼接成字符串然后使用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就是静态资源存放的目录，打开网址就会显示这个目录下的文件，所以把下载好的文件放到这个文件的根目录即可。没有这一步的话，添加不成功。仓库修改了，需要重新提交代码，重新部署。

三、js-sdk的注入

要想使用微信的接口那么就需要引入微信提供的js文件，在项目开发中也提供了js-sdk。注入js-sdk则需要一些配置项，其中就需要后台返回的签名包。

为了能够成功使用微信的功能，所以就写一个接口来返回签名包。

1、获取access_token

2、根据access_token请求拿到ticket

3、创建数据对象包含jsapi_ticket，url，noncestr，timestamp

4、字段字典排序

5、拼接数据

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();

    //创建数据

    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、数据进行字段排序后的对象

    let newObj = {};

    keys.forEach(key => {

        newObj[key] = obj[key];

    })

    //3、拼接数据

    let str = '';

    for (const k in newObj) {

        str += "&" + k + "=" + newObj[k]

    }

    //4、sha1加密

    str = sha1(str.substr(1))

    //5、后台数据返回

    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参数

这样就会返回签名包供前端使用。

四、前端接口调用

在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>

请求数据，配置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>

现在已经配置成功，然后就可以调用微信接口了，这里试验了两个接口获取地理位置和调起微信扫一扫。

<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>

现在一切配置完成，可以使用微信开发者工具调试。同时也可以把代码进行提交，重新部署，这个时候找手机微信打开网址测试就可以使用微信服务。