Vue 프로젝트 글로벌 구성 WeChat 공유 구현 방법

이번에는 Vue 프로젝트의 글로벌 구성에 대한 WeChat 공유를 구현하는 방법과 WeChat 공유를 통해 Vue 프로젝트의 글로벌 구성을 구현하기 위한 노트가 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. 바라보다.

본 프로젝트는 주로 공용 계정 서비스에 접속하는 데 사용되는 모바일 프로젝트입니다. 프로젝트는 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 중국어 웹사이트에서 다른 관련 기사를 주목하세요.

자세한 설명 vue 프로젝트를 최적화하는 단계

Node.js에서 Koa를 사용하여 JWT 사용자 인증을 구현하는 방법

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