使用微信 JS-SDK

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

微信JS-SDK如何使用及相关注意事项可以查看以下文档

微信JS SDK 说明文档

这里就直接呈上代码：
前端的事情:

 // 拿到当前的 url ，向后台发送请求，拿到配置项   vue 中演示

<template>
  <div id="app">
    <h1>微信项目</h1>
    <button @click="btnAction()">选取图片</button>
    <div v-for="(item, index) in imgs" :key="index" class="img-list">
      <img :src="item" alt="" />
    </div>
    <button @click="btn2Action()">扫一扫</button>
    <div>扫描结果为：{{ qrCode }}</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      imgs: [],
      qrCode: ""
    };
  },
  methods: {
    async configWX() {
      // 1.发送请求，向后台询问timestamp，nonceStr，signature
      const url =
        window.location.origin +
        window.location.pathname +
        window.location.search;
      const { data } = await axios.get("/api/sign", { params: { url } });
      //获得数据后，配置wx
      wx.config({
      // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，
      //可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        debug: true, 
        appId: "wx412bbe740f1c025", // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: ["chooseImage", "scanQRCode"] // 必填，需要使用的JS接口列表
      });
      wx.ready(function() {
        console.log("ready.......");
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
        // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
        // 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
        // 则可以直接调用，不需要放在ready函数中。
      });
      wx.error(function(error) {
        console.log(error);
        // config信息验证失败会执行error函数，
        // 如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，
        // 也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      });
    },

    btnAction() {
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          const localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          this.imgs = localIds;
          console.log(localIds);
        }
      });
    },
    btn2Action() {
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: res => {
          this.qrCode = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
        }
      });
    }
  },
  created() {
    this.configWX();
  }
};
</script>

<style>
.img-list {
  margin: 10px 0;
}
.img-list img {
  width: 50%;
}
</style>

后台的事情

// 后台需要根据文档进行测试是否有用 
// 根据 appid 和 secret 请求拿到 access_token； 
// 根据拿到的 access_token 请求拿到 ticket；
// 保存 ticket，以免触发频率限制，过期时间是 两个小时；
// 生成JS-SDK权限验证的签名；返回签名给客户端

const express = require('express');
const axios = require('axios');
const sign = require('./sign');

const app = express();

app.use('/MP_verify_kx0eoWxOzJcfpiDj.txt', (req, res)=>{
  res.sendFile(__dirname+'/static/MP_verify_kx0eoWxOzJcfpiDj.txt');
})

app.get('/api/sign', async (req, res)=>{

  // 1.获得access_token
  const {data: {access_token}} = await axios.get('https://api.weixin.qq.com/cgi-bin/token', {
    params: {
      grant_type: 'client_credential',
      appid: 'wx412bbe740f1c9d0f',
      secret: '94d4b0869151a0cd6a383188d821889a'
    }
  });
  // 2.获得jsapi_ticket
  const {data: {ticket}} = await axios.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket', {
    params: {
      access_token: access_token,
      type: 'jsapi'
    }
  });

  // 3.保存jsapi_ticket

  // 4.生成JS-SDK权限验证的签名
  const code = sign(ticket, req.query.url);

  // 响应给客户端
  res.json(code);

});


app.get('/', (req, res)=>{
  res.sendFile(__dirname+'/www/index.html');
})

app.use('/js', express.static('./www/js'));

app.listen(8000, (error)=>{
  console.log(error);
})

生成JS-SDK权限验证

var createNonceStr = function () {
  return Math.random().toString(36).substr(2, 15);
};

var createTimestamp = function () {
  return parseInt(new Date().getTime() / 1000) + '';
};

var raw = function (args) {
  var keys = Object.keys(args);
  keys = keys.sort()
  var newArgs = {};
  keys.forEach(function (key) {
    newArgs[key.toLowerCase()] = args[key];
  });

  var string = '';
  for (var k in newArgs) {
    string += '&' + k + '=' + newArgs[k];
  }
  string = string.substr(1);
  return string;
};

/**
* @synopsis 签名算法 
*
* @param jsapi_ticket 用于签名的 jsapi_ticket
* @param url 用于签名的 url ，注意必须动态获取，不能 hardcode
*
* @returns
*/
var sign = function (jsapi_ticket, url) {
  var ret = {
    jsapi_ticket: jsapi_ticket,
    nonceStr: createNonceStr(),
    timestamp: createTimestamp(),
    url: url
  };
  var string = raw(ret);
      jsSHA = require('jssha');
      shaObj = new jsSHA(string, 'TEXT');
  ret.signature = shaObj.getHash('SHA-1', 'HEX');

  return ret;
};

module.exports = sign;