vue 项目 H5接入微信sdk

  • Post author:
  • Post category:vue


安装
npm install weixin-js-sdk
//页面引入
const $wx = require('weixin-js-sdk');

//使用
if (isWeixin()) {
//此处封装的请求,可以换成axios,请求自己的接口参数传当前使用微信sdk的地址
        weChat({ url: encodeURIComponent(location.href.split('#')[0]) }).then(res => {
          console.log(res)
          $wx.config({
            debug: true, // 开启调试模式
            appId: res.data.appId, // 必填,公众号的唯一标识
            timestamp: res.data.timestamp, // 必填,生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
            signature: res.data.signature,// 必填,签名
            jsApiList: [
              //         "updateAppMessageShareData",//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
              //         "updateTimelineShareData",//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
              //         "onMenuShareWeibo",//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
              "scanQRCode",//扫码
            ] // 必填,需要使用的JS接口列表
          })
          $wx.ready(function () {
            this.scanQRCode();
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
          });
        })
      } else {
        this.$toast("非微信浏览器暂不支持~")
      }
//判断当前环境
// 判断浏览器环境 也是封装引入的
export const isWeixin = function() {
	let ua = navigator.userAgent.toLowerCase();
	console.log(ua)
	if (ua.match(/MicroMessenger/i) == "micromessenger") {
		return true;
	}
	return false;
};



版权声明:本文为weixin_45730243原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。