方案

本篇文章从纯前端的角度讲解，不涉及到后端相关。

js安全域名

众所周知，只有配置了安全域名并且在安全域名下才能成功调用sdk，那么第一步就是，如何在本地环境成功调用sdk进行开发。

这一步很简单，直接修改电脑的host，把域名映射到本地地址。

比如我的安全域名为：baidu.com，本地开发环境为localhost，那么host直接增加一行127.0.0.1 baidu.com。

这里有一点要提醒大家的就是，一般如react项目端口8080啥的，但其实安全域名都是默认80端口，所以建议大家把端口改成80便于测试。

配置完上面的就可以通过访问baidu.com直接进到我们的本地项目了

测试环境

这里我推荐大家使用官方提供的微信测试平台测试，如下图，直接使用测试的appid等，安全域名也使用下面的即可

服务部署

这一步正常来讲都是后端完成的，但考虑到前后端分离，如果前端想独立调试也是可以的，只需要自己启动一个服务端，然后通过nodejs去访问微信相关接口即可。

这里贴个代码给大家参考，不是本文的主题。有兴趣的可以自己去了解nodejs

const request = require('request');
const sha1 = require('js-sha1'); // 引入sha1加密算法，需要使用sha1算法生成签名
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var cors = require('cors');
app.use(bodyParser());

app.use(cors());

// eslint-disable-next-line no-undef
app.post('/getWX', function (req, res) {
  const appId = 'wxc91550d6660630ed'; // 测试公众号的addId
  const appSecret = '9e356bbea07c944e58b55399ee6c4e0d'; // 测试公众号的appSecret
  const url = decodeURIComponent(req.body.url); // 初始化jsdk的页面url，如果是单页应用记得截掉url的#部分
  let promise = new Promise((resolve, reject) => {
    // 第一步，通过appId和appSecret 获取access_token
    request(
      `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`,
      function (error, response, body) {
        if (!error && response.statusCode == 200) {
          let access_token = JSON.parse(body).access_token;
          console.log('第一步获取access_token：', access_token);
          resolve(access_token);
        } else {
          reject(error);
        }
      },
    );
  });

  promise
    .then((access_token) => {
      // 第二步，通过第一步的access_token获取票据ticket
      return new Promise((resolve, reject) => {
        request(
          `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`,
          function (error, response, body) {
            if (!error && response.statusCode == 200) {
              let ticket = JSON.parse(body).ticket;
              console.log('第二步获取ticket：', ticket);
              resolve(ticket);
            } else {
              reject(error);
            }
          },
        );
      });
    })
    .then((ticket) => {
      const createNonceStr = () => Math.random().toString(36).substr(2, 15);
      const createTimeStamp = () => parseInt(new Date().getTime() / 1000) + '';
      const calcSignature = function (ticket, noncestr, ts, url) {
        var str = `jsapi_ticket=${ticket}&noncestr=${noncestr}&timestamp=${ts}&url=${url}`;
        var shaObj = sha1(str); //使用sha1加密算法
        return shaObj;
      };
      const noncestr = createNonceStr(); // 随机字符串
      const timestamp = createTimeStamp(); // 时间戳
      const signature = calcSignature(ticket, noncestr, timestamp, url); // 通过sha1算法得到签名
      res.send({
        data: {
          noncestr: noncestr,
          timestamp: timestamp,
          signature: signature,
          appId,
          appSecret,
        },
      });
    })
    .catch((error) => {
      console.log(error);
    });
});

app.get('/', function (req, res) {
  res.send('hello world');
});

app.listen(9999, function () {
  console.log('App started on port 9999');
});

api调用

通过上一步拿到sdk需要的参数，调用wx.config即可

至此，整个微信sdk的调用就完成了，剩下的参考官方文档就能用了

微信sdk本地环境部署调试

方案

js安全域名

测试环境

服务部署

api调用

扩展资料