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说明文档
可以使用 微信开发者工具 查看相关的权限信息

待更新~

你可能感兴趣的:(微信API,vue.js)