vue开发微信公众号,获取JSSDK微信授权

1.微信公众平台,登录账号,去后台

设置ip白名单

设置js接口安全域名

2.

url需要前端传给后端,而且不能写死。用window.location.href.split("#")[0]这个即可。

vue的路由我是hash模式,没试过history模式。网上有人说还要区分ios和安卓,说url会不同,我没试。

url前端传encode的过去,后端decode一下。貌似直接传url,不编码也可以。

3.我是要隐藏‘转发给好友’‘分享到朋友圈’这两个菜单。所以是公共的。在app.vue调用一次即可,不需要每个页面都调用。

如果是所有页面分享的是同一个页面,也可以在app.vue调用一次即可。如果每个页面的分享都需要自定义。那就只能一个一个页面的写了。


export function getJSSDK(){

const APPID='xxxxxxxxxxxxxxxxx';

  let currentUrl = window.location.href.split("#")[0];

  //let currentUrl = encodeURIComponent(window.location.href.split("#")[0]);

  axios.post('/login/getJsapiTicket',{url:currentUrl})

.then(res => {

let data=res.data;

      if(data.code==200){

let result=data.data;

          wx.config({

debug:false, // 开启调试模式,调用的所有api的返回值

            appId: APPID, // 必填,公众号的唯一标识

            timestamp: result.timestamp, // 必填,生成签名的时间戳

            nonceStr: result.nonceStr, // 必填,生成签名的随机串

            signature: result.signature, // 必填,签名

            jsApiList: [

'hideAllNonBaseMenuItem',

              'hideMenuItems',

              'hideOptionMenu'

            ]// 必填,需要使用的JS接口列表

          })

wx.ready(function () {

wx.hideMenuItems({

menuList: [

"menuItem:share:timeline",

                "menuItem:copyUrl",

                "menuItem:share:appMessage",

                "menuItem:share:qq",

                "menuItem:share:weiboApp",

                "menuItem:favorite",

                "menuItem:share:facebook",

                "menuItem:share:QZone",

                "menuItem:editTag",

                "menuItem:delete",

                "menuItem:copyUrl",

                "menuItem:originPage",

                "menuItem:readMode",

                "menuItem:openWithQQBrowser",

                "menuItem:openWithSafari",

                "menuItem:share:email",

                "menuItem:share:brand",

              ]// 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮

            });

            wx.hideAllNonBaseMenuItem();

            wx.hideOptionMenu();

          })

wx.error(function (res) {

//Toast("微信验证失败");

          });

      }

})

}

你可能感兴趣的:(vue开发微信公众号,获取JSSDK微信授权)