vue中使用wx-js-sdk相关

记录下vue中使用微信接口,后续用到一种功能就更新一种,养成写日记的习惯。
大神们有更好的写法的话还请分享分享~

微信接口依赖(wx-js-sdk)

安装微信js-sdk:

npm install weixin-js-sdk -S

可以增加公共sdk.js文件用于配置config校验

import wx from 'weixin-js-sdk'//微信sdk依赖
import axios from 'axios'		
const jsApiList = ["hideOptionMenu",'hideMenuItems']//要用到的微信API列表
																			
function getJSSDK(url) {
    axios.post('后台获取签名接口',{
      params:{
        // url:encodeURIComponent(url) //和后台定义路径参数是否要编码
        url:url
      }
    ).then(res => {
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId: res.appId, // 必填,公众号的唯一标识
      timestamp: res.timestamp, // 必填,生成签名的时间戳
      nonceStr: res.noncestr, // 必填,生成签名的随机串
      signature: res.signature, // 必填,签名
      jsApiList: jsApiList // 必填,需要使用的JS接口列表
    })
    wx.error(function (res) {
      // alert("微信验证失败");
    });
  })
}
export default {
  // 暴露JSSDK方法
  getJSSDK: getJSSDK
}

使用

在需要的页面中引入

import sdk from '../../commonJS/sdk'; //引入sdk.js
import wx from 'weixin-js-sdk';

mounted中执行或者调用封装的方法

sdk.getJSSDK('#之前的路径地址')
wx.ready(function () {
	wx.hideOptionMenu();//隐藏右上角按钮里面的功能按钮
	/*wx.hideMenuItems({   
        menuList: [
           "menuItem:share:qq", 
           "menuItem:favorite",
           "menuItem:share:QZone",
           "menuItem:share:email"
      	] // 指定要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见附录3
     });*/
     //分享给朋友(即将废弃)
      /*wx.onMenuShareAppMessage({
         title: 'shareTitle',
         desc: 'shareDesc',
         link: 'shareLink',
         imgUrl:'shareImg',
         trigger: function trigger(res) { },
         success: function success(res) {
           // alert('已分享');
         },
         cancel: function cancel(res) {
           // alert('已取消');
         },
         fail: function fail(res) {
           // alert(JSON.stringify(res));
         } 
       });*/
})

关于即将废弃接口以及其他接口说明,详细 官网文档:js-sdk说明文档
可以使用 微信开发者工具 查看相关的权限信息

待更新~

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值