Vue 프로젝트 글로벌 구성 WeChat 공유 단계 지침

이번에는 Vue 프로젝트의 글로벌 구성을 WeChat에서 공유하는 단계별 지침을 알려 드리겠습니다. Vue 프로젝트의 글로벌 구성 및 WeChat 공유에 대한 Notes는 무엇입니까? 살펴보자.

본 프로젝트는 주로 공용 계정 서비스에 접속하는 데 사용되는 모바일 프로젝트입니다. 프로젝트는 WeChat 인증 로그인과 계정 및 비밀번호 로그인이라는 두 가지 로그인 방법을 사용합니다. 모바일 프로젝트의 경우 프로젝트 확장을 촉진하고 개발 핫 업데이트 속도를 제공하기 위해 프로젝트는 여러 모듈로 나뉘며 각 모듈은 단일 페이지 애플리케이션입니다. 페이지에는 두 가지 유형이 있습니다. 하나는 사용자 로그인이 있어야 탐색할 수 있는 페이지이고 다른 하나는 사용자가 로그인하지 않고도 탐색할 수 있는 페이지입니다. 어느 것을 사용하든 WeChat 공유가 구성됩니다.

사용된 기술

1. vue를 프레임워크로 사용
2. vux를 UI 구성 요소 라이브러리로 사용

글로벌 구성 WeChat 공유 아이디어

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를 한 번 호출하고, 라우터의 메타 정보를 다시 읽고, 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>

결제가 필요한 구덩이 attention to

1. 프로젝트가 비히스토리 모드를 채택하는 경우 URL에서 # 뒤의 부분을 제거하고 WeChat 서명과 교환하여 백엔드에 전달해야 합니다.

2. WeChat 공식 지침에 따르면:

JS-SDK를 사용해야 하는 모든 페이지는 먼저 구성 정보를 삽입해야 합니다. 그렇지 않으면 호출되지 않습니다(동일한 URL은 한 번만 호출하면 되며 SPA 웹 앱은 URL이 변경되면 매번 호출할 수 있습니다...

SPA 애플리케이션으로 인해 URL이 변경된 후 현재 페이지의 구성 정보를 다시 주입하려면 다시 재구성해야 하므로 이 단계는 vue-router의 지시에 따라 네비게이션이 확인된 후 전역 afterEach 후크가 호출되므로 router.afterEach에서 호출해야 합니다. 업데이트된 URL에 대한 WeChat 서명을 얻으세요.

이 기사의 사례를 읽으신 후 방법을 익히셨다고 생각합니다. PHP 중국어 웹사이트에서 다른 관련 기사를 주목하세요.

3가지 요약 JS 파일을 동적으로 로드하는 방법

게시물 요청을 지원하기 위한 js의 도메인 간 방법 요약

위 내용은 Vue 프로젝트 글로벌 구성 WeChat 공유 단계 지침의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!