마이크로 채널 공유 개방 홈 VUE 해시 모드에서 세 개의 완벽한 솔루션 후

즉 마이크로 페이지 편지 H5 플랫폼에서 개발 한 마이크로 채널에 기반하여 좋은 확산 될 수 있도록 마이크로 채널 공유는 우리에게 큰 편의를 가져왔다. 따라서, 각 공유의 기본적 기능이 통합 된 마이크로 편지-H5 믿음의 개발을 기반으로합니다. 그러나 마이크로 편지 API를 도킹하기 전에 며칠 구덩이를 공유 할 수있는 시간을 발견했다. VUE의 개발을위한 응용 프로그램 프레임 워크를 사용하여 링크 밖으로 점유율은 잘립니다 :

일반 링크 : https://hxkj.vip/#/article?article_id=8
공유 링크가 열린 후이되었다 : https://hxkj.vip/?from=singlemessage&isappinstalled=0는
오른쪽 구덩이 있도록합니다. 뿐만 아니라 경로가 차단되고, 매개 변수가 사라 졌어요. . . . . .

위의 문제를 해결하려면 첫 번째 생각은 온라인 도움말을하는 방법을 찾는 것입니다. 어디로 링크를 공유 할 수있는 방법을 찾을 수 :(이 문서에서 사용하는 shareLink변수의 이름을)

let shareLink = window.location.href.split("#")[0]+"#"+window.location.href.split("#")[1]; // 使用这种方法重新拼接一下当前连接

그러나, 사용, 절단 또는 절단 할 수는 없다. 따라서, 그것은 다음과 같은 세 가지 효과적인 방법을 태어났다.

1 링크 글로벌 라우팅 차단
2 전송의 첫 페이지, 재
리디렉션의 후단 3,

첫째, 차단 링크의 글로벌 라우팅

애드 # 개 앞의 1? 호

후 발견 테스팅을 그만큼 # 경로 추가 앞에? 도메인 이름과 매개 변수 플러스 사이의 링크는 경우에만 분리 위챗 번호 ?from=singlemessage&isappinstalled=0, 나중에 여전히 원래 매개 변수가 완전히 차단되지 않습니다 수행한다. 그래서, 추가 한 후 :

let shareLink = 'https://hxkj.vip/?#/article?article_id=8';
shareLink = shareLink.replace('/#/', '/?#/');

링크를 공유하는 것은으로 전환 될 : https://hxkj.vip/?#/article?article_id=8
링크에서 공유 한 후이된다 : https://hxkj.vip/?from=singlemessage&isappinstalled=0#/ 기사? article_id를 = 8

이 삽입되었지만, 그 사이의 차이를 발견 ?from=singlemessage&isappinstalled=0물건이 잔뜩 있지만, 적어도 라우팅 매개 변수 및 유지, 우리는이 기간 링크를 처리합니다.

2, 정기적으로 교체 `?from=singlemessage&isappinstalled=0`

이 단계의 요구가 글로벌 라우팅 VUE 수행 할 작업이 아니라 다음 있습니다 :

// router.js
router.beforeEach((to, from, next) => {
    let url = window.location.href;
    if (url.includes('?from=')) { // 判断是否携带了 from 参数，这一步灵活变通，只要能判断出是从微信分享链接进来的就 OK
        url = url.replace(/vip.+.#/, 'vip/#'); // 利用正则表达式去掉微信携带的 ?from=singlemessage&isappinstalled=0 这串参数，如果这串参数对于你当前的页面有用处的话，可以重新拼接到你正常的链接后面去
        window.location.href = url; // 重定向到正常链接
    }
})

그 정기적으로 교체 위의 핵심 코드는 url = url.replace(/vip.+.#/, 'vip/#'),이는 할 수있는 비정규직을 쓸 아무것도 공급하지 않습니다. 그러나 각 채널 마이크로 채널 공유 (단일 마이크로 채널 채팅, 마이크로 채널 그룹 채팅, 친구의 원형, QQ ...)에 의해 운반 from매개 변수가 숫자 # 때까지, 그래서 이후 도메인 이름 접미사와 일치이 필요하다, 동일하지 않습니다 . 삭제 된 마이크로 채널을 추가 매개 변수의 무리의 등가를 교체 한 후!

제대로 위의 단계 :

링크 공유 할 수 있습니다 : https://hxkj.vip/?#/article?article_id=8
개방 공유 링크를 다시 공유 한 후. 이 경로는 거래를 할 수 있기 때문에, 링크가 정상 상태가된다 : https://hxkj.vip/#/article?article_id=8

둘째, 교통의 첫 페이지, 리디렉션

1, 새로운 교통 페이지

에서 public폴더를 새로 만들고 html(프로젝트와 페이지 index.html의 이름을 딴, 같은 수준) redirect.html은 다음과 같습니다 파일의 내용을 :

<script>
    let url = location.href.split('?')
    let params = url[1].split('&')
    let data = {}
    params.forEach((n, i) => {
        let p = n.split('=')
        data[p[0]] = p[1]
    })
    if (!!data.shareRedirect) {
        window.location.href = decodeURIComponent(data.shareRedirect)
    }
</script>

당신은 다른 것들, 그것은 JS 그냥 쓰기가 필요하지 않습니다 만 점프의 사용과 같은, 그래서 때문에

2, 조립 링크를 공유

링크를 공유하려면, 경로는 페이지의 중간으로 설정

let shareLink = 'https://hxkj.vip/#/article?article_id=8';
shareLink = window.location.href.split('#')[0] + 'redirect.html?shareRedirect=' + encodeURIComponent(shareLink);

이러한 접근 방식, 첫 번째 방법보다 중간 페이지는, 일반적으로는 매우 간단합니다.

제대로 위의 단계 :

링크 공유 할 수 있습니다 : https://hxkj.vip/redirect.html?shareRedirect=https%3A%2F%2Fhxkj.vip%2F%3F%23%2Farticle%3Farticle_id%3D8
개방 공유 링크를 다시 공유 한 후. 페이지의 중간 리디렉션 프로세스를 수행하기 때문에, 링크가 정상 상태가된다 : https://hxkj.vip/#/article?article_id=8

셋째, 백엔드 리디렉션 지원

let shareLink = 后端地址;

두 번째 방법에 대한 이러한 접근은, 본질적인 차이는 없다. 다만 처리하는 백엔드에 해당 단계 리디렉션와 같습니다. 백엔드 동료에 대한 링크는 페이지의 주소를 공유 할 수 있습니다.

IV 요약

마지막으로, 이해하지 않는 무엇을, 당신은 피드백을 읽은 후 메시지를 남길 수 있습니다.

: 소스 알려주십시오 https://www.jianshu.com/p/97729dd2c94d
TSY : 저자
개인 공간 : https://hxkj.vip