How to realize Vue project global configuration WeChat sharing

This time I will show you how to implement WeChat sharing of the global configuration of the Vue project, and what are the precautions for realizing the global configuration of the Vue project WeChat sharing. The following is a practical case, let's take a look.

This project is a mobile project, mainly used to access public account services. The project uses two login methods, WeChat authorized login and account and password login. For mobile projects, in order to facilitate project expansion and provide development hot update speed, the project is divided into different modules, each module is a single-page application. There are two types of pages, one that requires users to log in before they can be browsed, and the other that users can browse without logging in. No matter which one is used, WeChat sharing is configured.

Technology used

1. Use vue as the framework
2. Use vux as the UI component library

Global configuration of WeChat Sharing ideas

1. Distinguish between general and special. In general, the default sharing copy is configured globally; there are two special cases. One is that the shared content does not need to be obtained asynchronously, so in routingConfigure when jumping. The other is that the shared content needs to be obtained asynchronously, and the shared content needs to be updated after the asynchronous content is obtained.

2. For content that does not need to be obtained asynchronously, we use the method defined in the routing meta-information and directly call the public function to update the shared content after each routing jump.

For details, please check the usage instructions of WeChat JSSDK

// wxShare.js
import Vue from 'vue'
// 在组件外使用vux集成的微信jssdk
import { WechatPlugin, AjaxPlugin } from 'vux'
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)
export default function wxShare ({title, desc, timelineTitle, link, imgUrl} = {}) {
  Vue.wechat.config({
   debug: false,
   appId: appId,
   timestamp: timestamp,
   nonceStr: nonceStr,
   signature: signature,
   jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
  })
  Vue.wechat.ready(() => {
   Vue.wechat.onMenuShareAppMessage({
    title: title, // 分享标题
    desc: desc || '默认分享文案', // 分享描述
    link: link || window.location.href, // 分享链接
    imgUrl: imgUrl || '图标地址（必须是有效的Link）' // 分享图标
   })
   Vue.wechat.onMenuShareTimeline({
    title: timelineTitle || desc || '默认分享文案', // 分享标题，由于分享到朋友圈没有desc，所以这里采用的策略是，指定的朋友圈分享标题优先，其次采用发送给朋友的描述，最后采用默认文案。
    link: link || window.location.href, // 分享链接
    imgUrl: imgUrl || '图标地址（必须是有效的Link）' // 分享图标
   })
  })
  Vue.wechat.error((res) => {
  })
}
// 为Vue的原型对象添加该方法，则所有vue实例都能继承该方法
Vue.prototype.$wxShare = wxShare
// router/index.js 每个模块都有自己内部的路由配置
// codes...
const routes = [
  {
    path: '/index',
    name: 'index',
    redirect: '/index/homepage',
    children: [
     {
      path: '/index/homepage',
      name: 'homepage',
      component: homepage
      meta: { 
        title: '这是主页', 
        shareDesc: '这是本站的主页', 
        desc: 'homepage, click and see!',
        timelineTitle: '这是首页，欢迎点击关注，blablablablabla~~~',
        imgUrl: 'http://frankzhang.me/wp-content/uploads/2017/08/cropped-favicon-01.png'
      }
     },
    ]
   }
]
// routerRule，公共路由配置，所有模块共用一个路由控制策略
import wxShare from '@/utils/wxShare'
export default function routerRule (router) {
  // other codes...
  router.afterEach(( to, from ) => {
    wxShare({ title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo})
   })
}
// main.js
import routerRule from ...
routerRule(router)

After the above configuration, router.afterEach will call wxShare once, re-read the meta information in the router and redefine the WeChat sharing content to achieve The purpose of combining global configuration and special configuration.

Shared content that needs to be obtained asynchronously

In this case, we can use the created hook of the vue instance and call wxShare once in the successful callback of obtaining the data.

// homepage.vue
<script>
export default {
  data() {
    return {
    }
  },
  created() {
    getHomepageInfo()
      .then( res => {
        this.$wxShare({
          title: res.title,
          desc: res.desc,
          imgUrl: res.logo
        })
      } )
  }
}
</script>

Points to note

1. If the project adopts non-history mode, you need to remove the part after # on the URL and pass it to the backend in exchange for WeChat signature.

2. According to WeChat official instructions:

All pages that need to use JS-SDK must first inject configuration information, otherwise they will not be able to be called (the same URL only needs to be called once, for changing URLs The SPA web app can be called every time the url changes...

Due to the SPA application, after the url changes, it needs to be reconfigured once and the configuration information of the current page is re-injected, so this step must be done in the router. Called in afterEach! Because according to the instructions of vue-router, after the navigation is confirmed, the global afterEach hook is called. At this time, the navigation has been confirmed and the url has changed. You can re-obtain the WeChat signature for the updated url.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to optimize the Vue project

How to use Koa in Node.js to implement JWT user authentication

The above is the detailed content of How to realize Vue project global configuration WeChat sharing. For more information, please follow other related articles on the PHP Chinese website!