weixin-js-sdk使用

注意：以下内容自身的项目为uniapp编译生成微信小程序。小程序内嵌webview。

一、微信初始化

1. 安装微信sdk

npm install weixin-js-sdk --save

1. 页面引入

import wx from "weixin-js-sdk";

1. 微信初始化

wx.config({
    debug: false, // 开启调试模式,
    appId: data.appId, //必填，企业号的唯一标识，此处企业号corpid
    timestamp: data.timestamp, //必填，生成签名的时间戳
    nonceStr: data.nonceStr, //必填，生成签名的随机串
    signature: data.signature, //必填，签名，见附录1
    jsApiList: ["chooseImage"], //必填，需要使用的JS接口列表JS接口列表见附录2
    });

• 该操作中的参数为后台获取的数据
• wx.config执行微信配置初始化，debug为true时为调试模式，微信初始化错误还是正确都是弹框提示。类似于{“errMsg”:“config:ok”}
• jsApiList为要使用微信哪些内置方法，但navigate跳转路由除外，不需要微信初始化也可以直接调用。详见微信官方文档附录二

以下附上vue中详细代码

<!--
 * @Author: your name
 * @Date: 2021-01-06 10:18:31
 * @LastEditTime: 2021-01-18 19:23:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /my-demo/src/views/Home.vue
-->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1 @click="selectImg">这是点击微信按钮</h1>
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src

import axios from "axios";
import wx from "weixin-js-sdk";
export default {
  name: "Home",
  components: {
    'HelloWorld':()=> import("@/components/HelloWorld.vue")
  },
  methods: {
    // 初始化
    getConfig() {
      axios({
        method: "post",
        url: "xxxxx",//请求后端接口的地址
        data: {
          url: location.href.split("#")[0],
        }, //向服务端提供授权url参数，并且不需要#后面的部分
        //注意：这个url必须是小程序进入webview的地址，并且是合法域名形式地址！这样获取的数据才能保证签名没问题
      }).then((res) => {
        let data = res.data.results;
        wx.config({
          debug: false, // 开启调试模式,
          appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录1
          jsApiList: ["chooseImage"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function () {
          alert("ready");
          // 在这里调用 API
          //判断当前客户端版本是否支持指定JS接口
          wx.checkJsApi({
            jsApiList: [
              // 所有要调用的 API 都要加到这个列表中
              "chooseImage"
            ], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function (res) {
              console.log('checkJsApi成功=====', res);
              alert('支持chooseImage');
              // 以键值对的形式返回，可用的api值true，不可用为false
              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            },
            fail:function(e){
              alert('不支持');
            }
          });
        });
        wx.error(function (res) {
            // wx.config注册失败就会执行
          alert("error");
        });
      });
    },
    //选择图片
    selectImg() {
      wx.chooseImage({
        success: function (res) {
          console.log("success=====", res);
          alert("成功");
        },
        fail: function (e) {
          console.log("=====", e);
          alert("失败");
        },
        complete: function () {
          alert("立即完成");
        },
      });
    },
  },
  mounted() {
    this.getConfig();
  },
};
</script>