消息通知

对于微信公众号开发的配置方式

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

一、服务器配置

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

找到:开发 => 基本配置

然后在右侧就有一些公众号的开发信息,其中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>

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

企业开发高端应用的优势!
企业开发高端应用的优势!
产品设计过程中的几个重要点
产品设计过程中的几个重要点