开发公众号前期准备

1. npm i weixin-jsapi
2. 创建src/assets/js/wxconfig.js

import wx from 'weixin-jsapi'
import {post} from "./request";
import {getConfigData} from "./url"; // get方法-->到/utils/request
async function wxconfig() {
    const url = window.location.href.split('#')[0]
    console.log(process.env.NODE_ENV);
    const data = {
        url: decodeURIComponent(localStorage.getItem("href"))
    }
   await post(getConfigData, JSON.stringify(data)).then((res) => {
        wx.config({
            beta:true,
            //调用的官方方法需要在jsApiList中声明
            jsApiList: [
                'getNetworkType',
                'requestWxFacePictureVerify',
                'getLocation',
                'scanQRCode',
                'closeWindow',
                'openLocation',
                'chooseImage',
                'getLocalImgData'
            ],
            appId: localStorage.getItem("appid"),
            nonceStr: res.data.nonceStr,
            signature: res.data.signature,
            timestamp: res.data.timestamp.toString(),
            debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

           

        });
//         wx.error(function(res){
//             alert(JSON.stringify(res))
// //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
//         });
    })


}

export default wxconfig;

1. main.js引入
   import wx from 'weixin-jsapi'
   import wxConfig from "./assets/js/wxconfig";
   Vue.use(wxConfig);
2. 调用微信官方接口前需要调用wxConfig();

wxConfig();
wxData.ready((res) => {
//调用微信接口
})