最近做了一个项目就是在自己的项目里用户登陆以后通过手机号直接跳转并登陆第三方页面，在这个功能里用到了<web-view>这个标签，它有点像H5中的<iframe>标签，可以通过src中的链接将第三方页面嵌套到自己的小程序中，但是这个标签又有很多的坑，不是你想用就能用的。。
首先，小程序官方规定了，这个标签在个人类型的小程序是暂时不支持的 呵呵 了 NM TX。。。。
1564988937928.png
然后你以为你在公司的项目里就能随便用这个标签为你提供简单的跳转服务了？呵呵 了 NM TX。。。。
当然，如果你打开的是这个公众号自己的网址，那么你可以尽情的跳转吧。。。可是好多时候在公司的项目里既然要跳转就是跳别的页面。。。然后微信开发者文档说了：webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
1564989181750.png
就是在这里配置上你的域名。。
完了吗？
还没有呢。。。
还得怎么配？
看文档吧 这一点微信还是写的很清楚的（开发者文档-web-view）
1564989286503.png
不知道怎么配置白名单？给大家推荐个别人的文档吧微信小程序跳转到其他网页(外部链接)
JSSDK？就是你必须是HTTPS的协议！！！HTTP？？？呵呵~~
然后就是下面的白屏问题了。。。尼玛。。。差点没死在这儿，在src动态添加URL的时候，我以为我语法错了。。。。然后就各种改啊改啊改。。。。
1564989905562.png
就是我这里虽然是对的。。。但是通过组件传递进来值以后，发现：
1564989956125.png
尼玛？？？src去哪儿了？
实在搞不了了，请教了以为名为宋金亮的大神，大神说给你个文档你去看吧！
说到底，看的还是蒙了个比的。。。
于是，根据这个文档开始自己摸着石头过河。。。（注意了，下面是重点！！！以后碰到这个问题可以像我这样解决，嘿嘿）
//这个是你获取或者是你自己拼url的页面！！！
api.get_url(par).then(res => {
// * api.XXX是我自己封装的方法（不做解释）
//* 将URL转码后存储
this.url = encodeURIComponent(res.data.data)
wepy.setStorageSync("url",this.url)
console.log("获取URL",this.url)//打印一下看看对不对、、、、
this.$apply()
}).then(()=>{
//*跳转第三方该页面
api.pop_link().then(res => {
wepy.navigateTo({
url:'/pages/out_link'
//跳转之后的代码在下面！！！！！！！
})
})
this.$apply()
})
这个是你将存在storage里的URL再给他取出来！！！！
onLoad(opation){
// * 从本地取url
let url = wepy.getStorageSync("url")
console.log(url)//打印一下看看取来了啥。。。。
// *编码这个url
this.url = decodeURIComponent(url)
console.log(this.url,"在web页面")
}
这之中有个问题，就是你 必须转码 存然后取出来转码之后再用，不然。。。还是呵呵。。。
终于可以跳了啊。。。。然后又发现了其他问题 嘿嘿 就是。。你根本无法控制你跳的页面~~~
1564990433842.png
哈哈 强大的微信提供了强大的功能和爬不出来的坑~~~
不过有些东西也无可厚非，毕竟微信需要控制小程序打开的页面，不然。。。什么爱情动感激情链接啥的都能打开，小程序就废了。。。所以 老老实实的配置吧 让第三方好好配合你 哈哈哈
最后！！！！！愿世间没有BUG。。。。。
image
网友评论