Vueプロジェクトグローバル構成微信共有実践

この文章も私のブログに投稿しています.
前に書く
このプロジェクトはモバイル端末プロジェクトで、主に公衆番号サービスにアクセスするために使用されています.プロジェクトは2つのログイン方式を採用し、微信授権ログインとアカウントパスワードログインを採用している.モバイルエンドプロジェクトでは、プロジェクトの拡張を容易にし、開発熱更新速度を提供するために、プロジェクトは異なるモジュールに分けられ、各モジュールは単一ページアプリケーションです.ページには、ユーザーがログインしてから閲覧できるものと、ユーザーがログインせずに閲覧できるものの2種類があります.いずれにしても、微信共有を構成します.
使用するテクノロジー

は、フレーム

としてvueを用いる.

vuxをUIコンポーネントライブラリ

として使用する.
グローバル構成微信共有構想

一般と特殊を区別し、一般状況、グローバル構成のデフォルト共有文案;特殊な場合は、共有コンテンツが非同期取得を必要としない場合、ルーティングジャンプ時に構成され、共有コンテンツが非同期取得を必要とする場合、非同期コンテンツ取得後に共有コンテンツを更新する必要がある場合の2つに分けられます.

非同期で取得する必要はありません.ルーティングメタ情報を定義する方法を採用し、ルーティングジャンプのたびに共通関数を呼び出して共有コンテンツを更新します.

具体的には、微信JSDKの利用説明をご覧いただけます

// 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)

上の構成を経て、router.afterEachはwxShareを呼び出し、routerのmetaの情報を再定義し、微信共有コンテンツを再定義し、グローバル構成と特殊構成を結合する目的を達成します.
非同期で取得する必要がある共有コンテンツ
この場合、vueインスタンスのcreatedフックで、データの取得に成功したコールバックでwxShareを1回呼び出せばよい.

// homepage.vue



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

注意すべき穴

プロジェクトがhistoryモードでない場合は、url上の#の後の部分を削除してバックエンドに送信し、微信署名を交換する必要があります.

WeChatの公式説明によると、

JS-SDKを使用する必要があるすべてのページは、まず構成情報を入力する必要があります.そうしないと呼び出せません(同じurlを1回呼び出すだけで、変化urlのSPAのweb appはurlが変化するたびに呼び出すことができます...
SPAアプリケーションでは、urlが変化する後、一度再configし、現在のページの構成情報を再注入する必要があるため、この手順はrouterでなければならない.afterEachで呼び出せ!vue-routerの説明によれば、ナビゲーションが確認された後、グローバルなafterEachフックを呼び出すので、この時点でナビゲーションが確認され、urlが変更され、更新されたurlに対して微信署名を再取得することができます.
謹んでこれによって自分が穴を踏む過程を記録して、多くて不足があって、各位の官の指摘を見てください!