vue获取微信登陆权限_Vue获取微信JSSDK授权,以及微信分享

场景

Vue获取JSSDK授权以便在微信浏览器,或者嵌在小程序里面做些小事情,如朋友/朋友圈分享,微信支付,图片上传下载等

步骤一 配置安全域名:

在微信公众平台对应的公众号设置里面配上相应的JS接口安全域名(开发者需要有对应的权限)

步骤二 引入JS文件:

在需要调用接口的页面引入JS文件,我直接使用npm包'jweixin-module'

(npm install --save jweixin-module),

所有使用JSSDK的页面都要进行config配置,不过同一个URL只需要调用一次就可以了,如果有多个,则每次URL变化的时候调用一次即可.

# 在vue的main.js引入'jweixin-module', 全局调用wx接口

import wx from 'jweixin-module'

Vue.prototype.$wx = wx

复制代码

步骤三 获取相应的配置信息:

传入需要配置的URL,通过后台获取到相应的信息,对应的配置上去即可.

URL可以通过window.location.href.split('#')[0]获取,并且使用encodeURIComponent编码(因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败)

# 需要可以远程访问的URL

var url = encodeURIComponent(window.location.href.split('#')[0])

复制代码

步骤四 通过config接口注入权限验证配置:

//需要配置的页面,也可以在APP.vue直接设置,别的框架在相应的位置即可

getJsConf