微信小程序-调用微信js-sdk接口(使用微信提供的API)

1,111 阅读1分钟
思路:

第一步:

小程序没办法直接调用js-sdk,但是微信h5可以调用。

第二步:

小程序里面嵌套一个h5

//需要在小程序里面,另起一个页面,因为嵌套进来的h5页面,层级会比较高
<web-view :src='url'></web-view>
//用组件web-view 其中url就是公众号页面路径

第三步:

创建一个h5项目,并且下载js-sdk依赖

//npm i jweixin-module
//在main.js中引入以及挂载
import wx from 'jweixin-module';
import request from './utils/request1';//这是请求

Vue.prototype.$wx= wx;
Vue.prototype.$request = request;

第四步:

在utils中建一个wechat.js

import Vue from "vue";
import jweixin from 'jweixin-module';
export default {

    //调试模式

    debug: false,

    //权限

    jsApiList: [//这里就是sdk提供的微信api

        'scanQRCode'

    ],

    //判断是否在微信中

    isWechat: function () {

        var ua = window.navigator.userAgent.toLowerCase();

        if (ua.match(/micromessenger/i) == 'micromessenger') {

            return true;

        } else {

            return false;

        }

    },



    //初始化sdk配置

    initJssdk: function (callback, url) {

        if (!this.isWechat()) { return; }

        //服务端进行签名 ,可使用uni.request替换。 签名算法请看文档
		//这里的接口,让后端去写接口,让后端根据文档
        //https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
        Vue.prototype.$request('/sft/public/getWeixinConfig', {

            url: url || location.href.split('#')[0],

        }).then(res=>{
            const {data}=res
            jweixin.config({

                debug:this.debug,

                appId: data.appId,

                timestamp: data.timestamp,

                nonceStr: data.noncestr,

                signature: data.signature,

                jsApiList: this.jsApiList

            });
            //配置完成后,再执行分享等功能

            if (typeof callback === 'function') {

                callback(res.data);

            }
        })

    },



    //准备就绪

    ready: function (callback, url) {

        if (!this.isWechat()) { return; }

        this.initJssdk(function () {

            jweixin.ready(function () {

                //配置完成后,再执行
 
                if (typeof callback === 'function') {

                    callback(jweixin);

                }

            })

        }, url)

    },



    closeWindow: function () {

        this.ready(function (wx) {

            wx.closeWindow();

        })

    },

    //在需要定位页面调用

    location: function (success, fail) {

        this.ready(function (wx) {

            wx.getLocation({

                type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'

                success: function (res) {

                    if (typeof success === 'function') {

                        success(res);

                    }

                },

                fail: function (res) {

                    if (typeof fail === 'function') {

                        fail(res);

                    }

                }

            });
        });

    }

}

第五步:

在需要用的页面进行调用

		mounted(){
				this.scna()
		},
		methods: {
			scna(){
				const url=window.location.href.split('#')[0];//这里是获取当前页面的url,微信要根据页面路径,进行授权
				wechat.ready(this.sucssful,url)
			},
			sucssful(e){
						this.$wx.scanQRCode({
											needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
											scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
											success: function (res) {
												var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
											}
										})
						
				
			}
		}

第六步:

在微信公众平台,进行 JS接口安全域名配置,这个js安全域名,就是h5线上的地址,这个项目是挂载腾讯云上面的,所以这个地址就是腾讯的地址

image-20220712172437365.png