注意:以下内容自身的项目为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执行微信配置初始化,debugtrue时为调试模式,微信初始化错误还是正确都是弹框提示。类似于{“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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐