微信小程序 web-view 无法外链 和 不支持打开非业务域名

微信小程序 web-view 无法外链 和 不支持打开非业务域名

这个问题搞了我一下午啊, 终于解决了, 简直太菜了, 还是要多学习啊.

首先, 链接组件主要有两个: navigator 和 web-view
navigator 只能跳转到小程序内的页面, 不能直接跳转外链 (例如: 百度, 淘宝什么的网页都不能跳). 说白了, 就是只能小程序内部跳来跳去的.

web-view 可以跳转小程序外的页面, 但有个前提, 需要在微信公众平台先设置好 业务域名 + 校验文件 (就是你要跳的网站域名). 这也意味着, 想要跳转到指定网页, 必须将校验文件放到业务域名的服务器根目录下才行. 说白了: 只能跳转到自家的web服务器页面, 想跳别人的家网页, 除非你能把校验文件给放进去

小结: 想要用外链, 就使用 web-view

---

用了外链后, 错误提示: 不支持打开非业务域名.....
解决方案: 只要在微信公众平台绑定一下外链 (业务域名)就可以了

解决步骤:

1. 确认要跳转的业务域名
   我要跳转的外链是 https://www.omso2o.com/xxxxxxx, 所以业务域名为 https://www.omso2o.com

2. 登录微信公众平台
   地址: https://mp.weixin.qq.com
   依次找到 开发 -> 开发设置 -> 业务域名
   
   上图中, 一定要先把 检验文件 上传到业务域名所在的服务器根目录下, 才能点上传, 否则一直提示你失败, 检验不通过.

3. 跳转代码
   情景: 点击文件A的链接跳转到外部网页
   文件A不能直接使用 web-view 组件, 因为这样不用点击, 就会自动跳转到网页.
   所以, 先创建一个目录, 比如outUrl目录, 并新建一个文件Bprotocal.vue, 文件中里面用 web-view 跳转到外部网页
   文件B : 文件A 则通过navigator 跳转到outUrl 目录下的protocal.vue文件, 这样就可以了

   文件A :

---

顺便说一下我遇到的其他问题:

1. Appid 不要在用测试Appid了, 一定要用小程序的真实的Appid. 我当时用测试Appid嗨了半天.
2. 如果上面的操作完了, 但依旧提示不支持打开非业务域名..., 可以尝试重启微信开发者工具