解决小程序webview 跳转已关联的公众号下的页面，显示未配置

公众号链接：https://mp.weixin.qq.com/s?__biz=MzU0NDc5NjAzNg==&mid=2247483958&idx=1&sn=4347f7040aa01ad48ed17270121ccce5&chksm=fb77feddcc0077cb95a2e6b0ea7464e06953b19da26fe637596781b8a3a95d625a6b90975700#rd

如果这样动态传入url,显示未配置业务域名

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

<script>
export default {
    data() {
        return {
            url: null,
        };
    },
    onLoad(options) {
        this.url= options.froms; 
    }
};
</script>

经过排查：1.首先需要调整调试基础库，调成这样：

image.png

2.再把链接写死：

<template>
    <web-view src="https://mp.weixin.qq.com/s?__biz=MzU0NDc5NjAzNg==&mid=2247483958&idx=1&sn=4347f7040aa01ad48ed17270121ccce5&chksm=fb77feddcc0077cb95a2e6b0ea7464e06953b19da26fe637596781b8a3a95d625a6b90975700#rd"></web-view>
</template>

这样页面就可以正常打开

但这样只能解决燃眉之急，并不能永远解决问题，不能一个新的链接再复制出来一份webview吧，所以还需要寻找一劳永逸的解决方案
经过对比，发现已配置的业务域名后面无参数（可以通过动态传入url,并能正常显示）而该链接后面又拼接了一些参数，所以猜想可能是参数的问题
所以尝试通过编码、解码的形式看看能否解决问题：

跳转到公众号链接时需要编码

// 关注公众号
        officialAccount() {
            // 此处需要encodeURIComponent 编码一下
            uni.navigateTo({
                url: `../webView/webView?froms=${encodeURIComponent('https://mp.weixin.qq.com/s?__biz=MzU0NDc5NjAzNg==&mid=2247483958&idx=1&sn=4347f7040aa01ad48ed17270121ccce5&chksm=fb77feddcc0077cb95a2e6b0ea7464e06953b19da26fe637596781b8a3a95d625a6b90975700#rd')}`
            });
        }

在webview页面进行解码：

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

<script>
export default {
    data() {
        return {
            url: null,
        };
    },
    onLoad(options) {
        this.url= decodeURIComponent(options.froms); 
    }
};
</script>

这样就完美解决了问题

看了这么久，累了吧，关注一下吧

image.png