Vue 应用中使用微信 jssdk

分享接口只有认证公众号才能使用,域名必须备案且在微信后台设置。

先确认已经满足使用jssdk的要求再进行开发。

WechatPlugin 插件提供了commonJS的引入方式,因此你不需要在 index.html 引入文件。

版本要求

WechatPluginvux@^2.1.0-rc.19开始支持

引入

main.js 中全局引入:

  1. import { WechatPlugin } from 'vux'
  2. Vue.use(WechatPlugin)
  3. console.log(Vue.wechat) // 可以直接访问 wx 对象。

组件外使用

考虑到你需要在引入插件后调用config方法进行配置,你可以通过 Vue.wechat 在组件外部访问wx对象。

jssdk需要请求签名配置接口,你可以直接使用 VUX 基于 Axios 封装的 AjaxPlugin

  1. import { WechatPlugin, AjaxPlugin } from 'vux'
  2. Vue.use(WechatPlugin)
  3. Vue.use(AjaxPlugin)
  4. Vue.http.get('/api', ({data}) => {
  5. Vue.wechat.config(data.data)
  6. })

组件中使用

那么之后任何组件中都可以通过 this.$wechat 访问到 wx 对象。

  1. export default {
  2. created () {
  3. this.$wechat.onMenuShareTimeline({
  4. title: 'hello VUX'
  5. })
  6. }
  7. }