Глобальная конфигурация проекта Vue Практика обмена WeChat

внешний интерфейс WeChat JavaScript Vue.js

Эта статья также размещена в моем блоге,Добро пожаловать на просмотр 😄

написать впереди

Этот проект представляет собой проект мобильного терминала, который в основном используется для доступа к услугам публичного аккаунта. В проекте используются два метода входа в систему: авторизованный логин WeChat и логин с паролем учетной записи. Для мобильных проектов, чтобы облегчить расширение проекта и обеспечить скорость горячего обновления разработки, проект разделен на разные модули, каждый модуль представляет собой одностраничное приложение. Существует два типа страниц: на первом пользователи должны войти в систему, прежде чем они смогут просматривать их, а на другом пользователи могут просматривать их без входа в систему. В любом случае общий доступ WeChat настроен.

используемая технология

  1. использовать vue в качестве фреймворка
  2. Использование vux в качестве библиотеки компонентов пользовательского интерфейса

Глобальная конфигурация WeChat для обмена идеями

  1. Различие между общим и специальным. В общем, глобальная конфигурация по умолчанию использует совместное копирование; есть два особых случая. Один из них заключается в том, что общий контент не нужно получать асинхронно, который настраивается при переходе маршрута, а другой - что общий контент должен быть получен асинхронно.Обновите общий контент после получения асинхронного контента.
  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 один раз, повторно прочитает метаинформацию в маршрутизаторе и переопределит содержимое обмена WeChat, чтобы достичь цели объединения глобальной конфигурации и специальной конфигурации.

Общий контент, который необходимо получать асинхронно

В этом случае мы берем созданный хук экземпляра vue и один раз вызываем wxShare в успешном обратном вызове получения данных


// 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-адрес нужно вызывать только один раз, а веб-приложение SPA, которое изменяет URL-адрес, может вызываться каждый раз). когда URL изменится...

Из-за приложения SPA после изменения URL-адреса его необходимо перенастроить, чтобы повторно ввести информацию о конфигурации текущей страницы, поэтому этот шаг должен быть вызван в router.afterEach! Потому что, согласно описанию vue-router, после подтверждения навигации вызывается глобальный хук afterEach.В это время навигация была подтверждена, URL-адрес изменен, и подпись WeChat может быть повторно получена для обновленный URL.

Хочу записать процесс наступания на яму с этим, есть много недочетов, надеюсь вы меня поправите!

Категории