vue调用微信qpi

接口签名校验工具   Js-SDK说明文档

一.流程

步骤一：绑定域名

微信公众号的后台设置，必须是线上的，同时没有端口号
步骤二：引入JS文件

引入jshttps://res2.wx.qq.com/open/js/jweixin-1.4.0.js

或是

npm install weixin-js-sdk --save

然后在相应的页面引入
步骤三：通过config接口注入权限验证配置
步骤四：通过ready接口处理成功验证
步骤五：通过error接口处理失败验证

<template>
    <div class="cnt">
        <h1>获取微信sdk</h1>
        <button @click="clickFn">上传照片</button>
    </div>
</template>

<script>
    import wx from 'weixin-js-sdk'
    import {apState,mapActions} from "vuex";
    export default {
        namespace: "my",
        data() {
            return {
                name: ""
            }
        },
        created() {
            let params = {
                url:location.href.split("#")[0],// 这里是当前页面的url，一定要 location.href 获取，不然签名会无效。
            }
            //getSignFns 是后端接口，请求成功，后端返回需要的参数 
            this.getSignFns(params).then(res => {
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId:'wx8eeb3334724ac61b', // 必填，公众号的唯一标识
                    timestamp: res.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.noncestr, // 必填，生成签名的随机串
                    signature: res.signature, // 必填，签名
                    jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表
                });
                wx.ready(function(res) {
                    console.log('成功', res)
                });
                wx.error(function(res) {
                    alert('配置验证失败: ' + res.errMsg)
                });
            });
        },
        methods: {
            ...mapActions([
                "getSignFns",
            ]),
            clickFn() {
                console.log('触发点击事件')
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function(res) {
                        console.log('触发照片')
                    }
                });

            }
        }
    }

参考报错问题