微信小程序+.NET(八) 小程序之web-view讲解

微信小程序之web-view

微信小程序源码链接：

https://download.csdn.net/download/jinglell/11566840

web-view这个东西真的很好用，不过现在也真的依然存在着许多问题。

web-view的官方文档在这里：

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

有一些注意事项：
1.每个页面只能有一个web-view组件，多个会报错
2.web-view会铺满整个页面，而且不可使用自定义顶部导航栏
3.当web-view使用的是外部url比如我用的小说网站时，想要与你自己的小程序进行交互，比如说监控用户在内嵌网页内的点击事件等，是不可能的，那么我是怎么实现动态加载我的转码阅读页的？下面会说到这个问题
4.web-view顶部标题会显示当前内嵌页面的<title>，至于自己的网页设置自定义title，需要使用JSSDK，我没用过，请参考官网文档及相关资料，这里有个示例：https://www.jianshu.com/p/32283d43fb80

5.web-view的src问题，和日常一样，本机调试时勾选微信开发工具右上角详情里的“不校验合法域名”选项，要是高贵的服务器地址，注意一定要是https://也就是超文本传输安全协议，不然会报错

下面分享我对动态获取web-view内嵌网页信息实现转码阅读的方法：

1.如上图，首先实现依据请求参数动态渲染不同web-view，使用wx:if结构体

2.获取当前页面url

这个问题卡了我很久，首先可以知道的是，设置分享当前页事件时可以获取到当前的Url

这是官方文档里有的，可是我总不能分享后再转码阅读叭！太沙雕了！！！
然后我兜兜转转，又回到了官方文档，找到了最顶上这里的说明：

这里对web-view的内部参数有三个绑定函数，bindmessage这个是接收你自己的网站post过来的数据，binderror是和bindload成对的，一个是加载网页失败时一个是加载成功后，这里注意e.detail={{src}}也就是说他是返回给你url的这就解决了动态获取Url这一点。

3.动态转码当前页

我的需求是：当用户点击某个按钮，会转码web-view页面当前的内容，这里就需要保存当前页Url，上面已经获取到了，然后我想到的就是使用我在之前看到的setStorage()&getStorage()设置数据缓存。

messageShow : function(e){
    console.log(e.detail);
    var curUrl = e.detail.src;
	wx.setStorageSync('curUrl',curUrl);
}

注意这里我用到了setStorageSync也就是同步版本的setStorage，而且二者语法是不同的，注意：


4.这里我对bindload绑定的showMessage()还进行了广告拦截，其实机制并不太好，但是可以满足基本需求，具体实现见下一篇文章：
微信小程序+.NET(九) 小程序之简单的广告拦截https://blog.csdn.net/jinglell/article/details/99962076