vue调用微信qpi

冷不防 2021-08-14 00:41 307阅读 0赞

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

一.流程

步骤一：绑定域名

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

引入js[https://res2.wx.qq.com/open/js/jweixin-1.4.0.js][https_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('触发照片')
                        }
                    });
    
                }
            }
        }

[参考报错问题][Link 1]

[Js-SDK]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
[https_res2.wx.qq.com_open_js_jweixin-1.4.0.js]: http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
[Link 1]: https://www.cnblogs.com/joshua317/p/4761948.html