Vue プロジェクトのグローバル設定 WeChat 共有を実装する方法

今回は、Vue プロジェクトのグローバル構成の WeChat 共有を実装する方法と、WeChat 共有を通じて Vue プロジェクトのグローバル構成を実装するための notes について説明します。これは実際的なケースです。見て。

このプロジェクトはモバイル プロジェクトであり、主にパブリック アカウント サービスにアクセスするために使用されます。このプロジェクトでは、WeChat 認証ログインとアカウントとパスワードによるログインの 2 つのログイン方法が使用されます。モバイル プロジェクトの場合、プロジェクトの拡張を容易にし、開発のホット アップデート速度を提供するために、プロジェクトはさまざまなモジュールに分割され、各モジュールは単一ページのアプリケーションになります。ページには、ユーザーログインを必要とする閲覧と、ログインせずに閲覧できるページの2種類があります。どちらを使用しても、WeChat 共有は設定されます。

使用するテクノロジー

1. フレームワークとして vue を使用する

グローバル設定 WeChat のアイデアを共有する

1. 一般的に、グローバル設定。デフォルトの共有コピー ; 2 つの特殊なケースがあります。1 つは、共有コンテンツを非同期で取得する必要がないため、

routing がジャンプするときに設定される場合です。非同期コンテンツを取得した後にコンテンツを更新する必要があります。

2. 非同期で取得する必要がないコンテンツについては、ルーティング メタ情報で定義されたメソッドを使用し、ルート ジャンプのたびにパブリック関数を直接呼び出して共有コンテンツを更新します。

詳細については、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)

上記の設定後、router.afterEach は wxShare を 1 回呼び出し、ルーター内のメタ情報を再読み取り、WeChat 共有コンテンツを再定義して、グローバル設定と特別な設定を組み合わせる目的。

非同期で取得する必要がある共有コンテンツ

この場合、vueインスタンスの作成されたフックを使用し、データ取得の成功したコールバックでwxShareを1回呼び出すことができます

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

支払う必要があるピット注意事項

1. プロジェクトが非履歴モードを採用している場合、URL の # 以降の部分を削除し、WeChat 署名と引き換えにバックエンドに渡す必要があります。

2. WeChat 公式手順によると:

JS-SDK を使用する必要があるすべてのページは、最初に構成情報を挿入する必要があります。そうしないと、それらのページは呼び出されません (同じ URL を呼び出す必要があるのは 1 回だけであり、SPA Web アプリはURL の変更は毎回呼び出すことができます URL が変更されたときに呼び出されます...

SPA アプリケーションにより、URL が変更された後、現在のページの構成情報を再挿入するために再構成する必要があるため、この手順はvue-router の指示に従って、グローバルの afterEach フックが呼び出されるため、router.afterEach で呼び出す必要があります。この時点で、ナビゲーションが確認され、URL が変更されます。更新された URL の WeChat 署名を取得します

この記事の事例を読んだ後は、方法を習得したと思います

推奨読書:

の詳細な説明。 vue プロジェクトを最適化する手順

Node.js で Koa を使用して JWT ユーザー認証を実装する方法

以上がVue プロジェクトのグローバル設定 WeChat 共有を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。