Vue project global configuration WeChat sharing ideas

This article mainly introduces the detailed WeChat sharing ideas about the global configuration of the Vue project. It has a certain reference value. Now I share it with everyone. Friends in need can refer to it.

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 browse, 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, and is configured when the route jumps. , 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 changes in the url 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, the global afterEach hook is called after the navigation is confirmed. At this time, the navigation has been confirmed and the url has changed. The WeChat signature can be re-obtained for the updated url ##.

webpack vue project development environment LAN binding IP method

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