Vue 프로젝트 history 모드 에서 위 챗 공유 구덩이 정리

매번 에 위 챗 공 유 는 하나의 구덩이 입 니 다.현재 의 쇼핑 몰 프로젝트 는 Vue 개발 을 사용 하고 history 의 경로 모델 을 사용 하여 위 챗 공 유 를 설정 하 는 데 많은 문제 가 발생 했 습 니 다.마지막 으로 해결 되 었 습 니 다.지금 은 해결 하 는 과정 을 공유 하 겠 습 니 다.
기술 요점
Vue，history
흔 한 문제 및 설명
debug 모드 에서 false 보고
이것 은 말 할 것 도 없 이 wx.config 방법 을 호출 하 는 매개 변수 오류 로 인 한 것 입 니 다.다음 사항 을 확인 하 십시오.

도 메 인 이름 을 성공 적 으로 연결 하 였 는 지 여부(도 메 인 이름 검사 파일 에 접근 할 수 있 습 니 다)

최신 js-sdk 파일 을 사용 합 니 다.위 챗 이 일부 api

를 바 꿀 수 있 기 때 문 입 니 다.

config 방법의 인자 가 올 바 르 게 전 달 됐 는 지 여부(맞 춤 법 오류,대소 문자...)

사용 해 야 할 방법 이 jsApiList 에 적 혀 있 는 지 여부

서명 을 받 은 url 은 decodeURIComponent

가 필요 합 니 다.

배경 에서 서명 을 만 드 는 암호 화 방법 은 공식 문서

를 대조 해 야 한다.
debug 반환 ok,공유 실패

코드 맞 춤 법 이 정확 하도록 확보

링크 도 메 인 이나 경 로 를 공유 하려 면 현재 페이지 에 대응 하 는 공식 번호 JS 보안 도 메 인 이름과 일치 해 야 합 니 다

인터페이스 호출 은 wx.ready 방법 에 넣 어야 합 니 다

단일 페이지 항목(SPA)의 요점
JS-SDK 를 사용 해 야 하 는 모든 페이지 는 설정 정 보 를 먼저 입력 해 야 합 니 다.그렇지 않 으 면 호출 할 수 없습니다.이 문 제 는 Android 6.2 에서 복 구 됩 니 다).
위의 그 말 에서 발췌 한 것공식 문서
개발 자가 주의해 야 할 사항:

안 드 로 이 드 와 ios 는 분리 처리 해 야 합 니 다

페이지 url 이 변 할 때 wx.config 방법 을 다시 호출 해 야 합 니 다.안 드 로 이 드 가 서명 한 url 을 가 져 오 면 window.location.href

로 전 달 됩 니 다.

Vue 프로젝트 가 페이지 를 전환 할 때 IOS 에서 브 라 우 저의 url 은 변 하지 않 고 처음 페이지 에 들 어 온 주소 이기 때문에 IOS 에서 서명 을 받 은 url 은 처음 들 어 온 페이지 url

을 전송 해 야 합 니 다.
Code
router/index.js

......
import { wechatAuth } from "@/common/wechatConfig.js";
......

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      meta: {
        title: "  ",
        showTabbar: true,
        allowShare: true
      },
    },
    {
      path: "/cart",
      name: "cart",
      meta: {
        title: "   ",
        showTabbar: true
      },
      component: () => import("./views/cart/index.vue")
    }
    ......
  ]
});


router.afterEach((to, from) => {
  let authUrl = `${window.location.origin}${to.fullPath}`;
  let allowShare = !!to.meta.allowShare;

  if (!!window.__wxjs_is_wkwebview) {// IOS
    if (window.entryUrl == "" || window.entryUrl == undefined) {
      window.entryUrl = authUrl; //         
    }
    wechatAuth(authUrl, "ios", allowShare);
  } else {
    //   
    setTimeout(function () {
      wechatAuth(authUrl, "android", allowShare);
    }, 500);
  }
});

코드 요점:

meta 의 allowShare 는 페이지 공유 여 부 를 판단 하 는 데 사 용 됩 니 다

window.__wxjs_is_wkwebview 는 위 챗 IOS 브 라 우 저 인지 판단 할 수 있 습 니 다

entry Url 은 프로젝트 가 처음 들 어 온 페이지 의 주소 로 window 대상 에 캐 시 합 니 다

왜 안 드 로 이 드 는 지연 기 를 추가 해 야 합 니까?안 드 로 이 드 는 서명 에 성공 하 더 라 도 기능 을 부 르 지 못 하 는 경우 가 있 기 때 문 입 니 다.이것 은 비교적 타당 한 해결 방법 인 것 같 습 니 다

wechatConfig.js

import http from "../api/http";
import store from "../store/store";

export const wechatAuth = async (authUrl, device, allowShare) => {
  let shareConfig = {
    title: "xx       ",
    desc: "xxxx",
    link: allowShare ? authUrl : window.location.origin,
    imgUrl: window.location.origin + "/share.png"
  };

  let authRes = await http.get("/pfront/wxauth/jsconfig", {
    params: {
      url: decodeURIComponent(device == "ios" ? window.entryUrl : authUrl)
    }
  });

  if (authRes && authRes.code == 101) {
    wx.config({
      //debug: true,
      appId: authRes.data.appId,
      timestamp: authRes.data.timestamp,
      nonceStr: authRes.data.nonceStr,
      signature: authRes.data.signature,
      jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"]
    });

    wx.ready(() => {
      wx.updateAppMessageShareData({
        title: shareConfig.title,
        desc: shareConfig.desc,
        link: shareConfig.link,
        imgUrl: shareConfig.imgUrl,
        success: function () {//    
          //shareSuccessCallback();
        }
      });
      wx.updateTimelineShareData({
        title: shareConfig.title,
        link: shareConfig.link,
        imgUrl: shareConfig.imgUrl,
        success: function () {//    
          //shareSuccessCallback();
        }
      });
      wx.onMenuShareTimeline({
        title: shareConfig.title,
        link: shareConfig.link,
        imgUrl: shareConfig.imgUrl,
        success: function () {
          shareSuccessCallback();
        }
      });
      wx.onMenuShareAppMessage({
        title: shareConfig.title,
        desc: shareConfig.desc,
        link: shareConfig.link,
        imgUrl: shareConfig.imgUrl,
        success: function () {
          shareSuccessCallback();
        }
      });
    });
  }
};

function shareSuccessCallback() {
  if (!store.state.user.uid) {
    return false;
  }
  store.state.cs.stream({
    eid: "share",
    tpc: "all",
    data: {
      uid: store.state.user.uid,
      truename: store.state.user.truename || ""
    }
  });
  http.get("/pfront/member/share_score", {
    params: {
      uid: store.state.user.uid
    }
  });
}

총결산
원래 공유 할 수 없 었 던 페이지 는 hidemenuItems 방법 으로 관련 단 추 를 숨 겼 습 니 다.ios 에서 시도 해 보 았 습 니 다.일부 bug:단 추 를 표시 하 는 페이지 에서 전환 하 는 그림자 숨 김 단추 의 페이지,공유 단 추 는 가끔 존재 합 니 다.새로 고침 하면 문제 가 없 을 것 입 니 다.또 하나의 깊 은 구덩이 일 것 입 니 다.고생 할 정력 이 없 으 면 프라이버시 페이지 로 홈 페이지 를 공유 하고 공공 페이지 에서 원래 주 소 를 공유 합 니 다.좋 은 해결 방법 이 있 으 면 연락 주세요!
처음에 저 는 sf 에 있 는 블 로그https://www.jb51.net/article/158685.htm를 참 고 했 습 니 다.위의 코드 에 따라 안 드 로 이 드 핸드폰 은 모두 성공 할 수 있 었 습 니 다.그러나 IOS 에 이상 한 문제 가 있 었 습 니 다.바로 간헐 적 인 실 효 를 공유 하 는 것 입 니 다.같은 페이지 에서 공유 에 성 공 했 습 니 다.다시 시도 하면 실 패 했 습 니 다(아이콘,title 없 이 첫 페이지 로 넘 어 갈 수 밖 에 없습니다).'끊 임 없 는'노력 을 통 해문 제 를 해결 한 것 같 습 니 다.과정 을 말씀 해 주세요.

처음에는 비동기 가 성공 하지 못 한 문 제 를 일 으 키 는 줄 알 았 는데 안 드 로 이 드 처럼 IOS 에 wechatAuth 를 호출 하 는 방법 도 타 이 머 를 추가 하여 테스트 했 지만 효과 가 없 었 고 포기 했다

처음에 js-sdk 는 npm 를 통 해 설치 되 었 고 버 전에 test 가 있 었 습 니 다.마음 에 걸 리 지 않 습 니 다.script 라벨 을 직접 사용 하여 공식 버 전

을 참조 하 는 것 으로 바 뀌 었 습 니 다.

문 서 를 다시 읽 었 는데 onMenuShareTimeline 등 방법 이 곧 폐 기 될 것 을 발견 하고 jsApiList 를 jsApiList 로 바 꾸 었 습 니 다.['updateAppMessageShareData','updateTimeline ShareData']는 IOS 가 성공 할 수 있 고 안 드 로 이 드 공유 실패

가 되 었 습 니 다.

바 이 두 update AppMessage Share Data 안 드 로 이 드 실패 원인 을 참고 하여 이 링크https://www.jb51.net/article/158690.htm를 참고 하여 오래된 api 도 jsApiList 에 추가 하고 두 가지 장 치 를 자세히,반복 적 으로 시도 해 보 았 습 니 다.모두 ok.성공 한 것 같 습 니 다.'자신 이 없 기 때 문 입 니 다.각종'마법'코드!

마지막 으로 여기 서 텐 센트 정부 가 간식 을 먹 을 수 있 는 지,문 서 를 제때에 업데이트 할 수 있 는 지,demo 가 완전한 점 을 제공 할 수 있 는 지...
참조 링크
https://www.jb51.net/article/158685.htm
https://www.jb51.net/article/158693.htm
https://www.jb51.net/article/158690.htm
https://github.com/vuejs/vue-router/issues/481
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.