小程序通过webview打开公众号的文章

需求介绍

小程序中有进入公众号的入口，通过入口可以正常打开公众号页面

1.前置准备 公众号和小程序是同主体并进行关联

查看公众号主体信息

查看小程序主体信息

公众号关联小程序

小程序关联公众号

2.使用链接

这里有坑啊........

运营同学提供的链接是 https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg2OTg1NjgxMg==&action=getalbum&album_id=2831320276918403073&scene=173&from_msgid=2247483884&from_itemidx=1&count=3&nolastread=1&devicetype=android-31&version=2800213b&lang=zh_CN&nettype=WIFI&ascene=78
实际地址是 https://mp.weixin.qq.com/s?__biz=Mzg2OTg1NjgxMg==&mid=2247483901&idx=1&sn=efe1859e0f89df33d08c0d05188a817c&chksm=ce97e2bef9e06ba83c931f00f90aa6a8e54305bdb53cf407a6f20d7e930c399218a38c87c260#rd
虽然域名一样，但是结果完全不一样

运营提供的地址

实际地址

3.关键代码

1.复制到的地址是

https://mp.weixin.qq.com/s?__biz=Mzg2OTg1NjgxMg==&mid=2247483901&idx=1&sn=efe1859e0f89df33d08c0d05188a817c&chksm=ce97e2bef9e06ba83c931f00f90aa6a8e54305bdb53cf407a6f20d7e930c399218a38c87c260#rd

2.将地址转码

let pageUrl = 'https://mp.weixin.qq.com/s?__biz=Mzg2OTg1NjgxMg==&mid=2247483901&idx=1&sn=efe1859e0f89df33d08c0d05188a817c&chksm=ce97e2bef9e06ba83c931f00f90aa6a8e54305bdb53cf407a6f20d7e930c399218a38c87c260#rd'
let linkUrl = pageUrl.split('?')  // 将域名和参数分隔开，把参数使用encodeURIComponent编码
uni.navigateTo({
    url: '/pages/public/webview/webview?url=' + linkUrl[0] + '&params=' + encodeURIComponent(linkUrl[1])
});

3.最终跳转

<web-view :src="url"></web-view>

data() {
    return {
        url:"",
    }
},

onLoad: function(option) {
    console.log('跳转webview参数', option);
    let link = option.url + '?'+ decodeURIComponent(option.params)
    console.log('跳转地址',link);
    this.url = link;
    console.log('跳转webview地址',this.url);
}

小程序的开发者工具模拟器不好使； 需要生成预览码，在手机上是可以的