前言

原来小程序里要注意的地方还这么多，今天的晨读文章由腾讯@结一 贡献。

正文从这里开始～～

对于开发者来说，如果能够直接将H5页面嵌入到小程序中就太好了，web-view组件就提供了这样的功能（个人和海外小程序暂不支持）。简单来说，它是一个可以用来承载网页的容器，会自动铺满整个小程序页面。虽然这带来了很大的便利，但需要注意的地方还是很多的。

帐户权限

如果你要在小程序中使用 web-view 组件，首先你需要有一个开发者账号，这个账号不仅是小程序的开发者，还具备 web 开发权限。这就需要在小程序关联的公众号中以开发者身份绑定开发者账号。否则开发工具中会弹窗提示你没有 web 开发权限。提示如下：

商业域名

如果web-view组件的src属性没有指向关联的公众号文章，而是指向了其他网页，需要登录小程序管理后台（设置->开发设置）配置业务域名，如下图：

在配置业务域名的时候会提示需要上传验证文件到域名进行验证，如果域名下没有验证文件或者验证文件错误，web-view页面会直接提示错误，无法正常访问。

另外如果页面中还有其他链接跳转非业务域名，跳转的时候也会报错，导致无法正常访问，比如富文本内容中的链接，数据上报或者支付的跳转，其他非业务域名的链接。

另外：避免链接中有中文，iOS打开会出现白屏问题，建议添加

登录状态

小程序登录态和网页登录态属于两个孤立的系统，所以我们要想办法把小程序中的登录态传递到网页中，目前最简单最常用的方案就是作为 URL 参数传递，然后在 H5 中获取并设置，为了增加难度，也可以弄点小花招。

当然更巧妙的办法是，搭建一个中间服务，传入需要重定向的URL和code，中间服务通过code获取，然后返回一个302重定向地址。

组件层次结构

web-view 组件是原生组件，所以级别高，如果需要覆盖，需要使用 -view 组件。但是 -view 组件在开发工具中是无法覆盖的， 默认是无法覆盖的，只有 iOS 默认可以覆盖。所以为了得到想要的效果，不得不用一些非常手段：

由于的默认设置无法覆盖，所以目前的解决办法是，对-view的显示进行延时，先显示web-view，再显示-view。

对开发工具来说是不可见的，如果想调试效果可以先注释掉web-view组件。

另外，在封装组件的时候，如果需要覆盖web-view，那么一定要选择-view组件。但是如果这个组件不只是在web-view页面使用，在普通的小程序页面中也使用-view会导致另一个问题：弹窗浮层根本无法覆盖。比如右下角的一些咨询按钮，在小程序页面和web-view页面中都有使用。所以在做组件的时候可以做个属性判断，如果是web-view页面，就用-view，否则就用view。

另外，-view组件里的组件并不是真实的，而是-view模拟出来的。所以在修改样式的时候，需要小心。

web-view页面小程序环境判断

官网说明可以在网页上使用 . 变量来判断是否在小程序环境中，建议在回调中使用。也可以使用（1.3.2以上版本）提供的接口，代码如下：

// 在网页下的 web-view 中

（）{

.log(. === '') // 真

如果（！。||！。）{

.（''，，）

} 别的 {

（）

// 或者

wx..((res) {

.log(res.) // true

}）

实际应用中，一般都是直接用 . ，但如果页面没有完全加载出来，就不准确，而且如果在 web-view 中进入第二个页面， 就取不到值了，总之“很不靠谱”。

既然“不靠谱”，那我们可以在 URL 中添加参数来判断，绝对靠谱。比如添加一个 mp 参数()。但如果页面有多次跳转，总不能每次都判断并添加 mp 参数吧。所以建议直接在进入的第一个页面种下，以后再根据它来判断。

通过这三层保证（变量||mp参数||），只要有一个为真，就是小程序环境。这样锁住小程序环境就很稳定了。

另外：从微信7.0.0开始，可以通过判断是否包含文字来判断小程序的web-view环境。

微信

如果你使用web-view，请确保网页中的微信版本大于1.3.2，目前微信版本为1.4.0，对分享接口进行了升级，所以如果要升级微信到最新版本，请记得升级H5页面的分享接口，原有的wx.、wx.e、wx.、wx.接口将被废弃，取而代之的是ata，最终导致新接口无法获取分享成功或失败的信息。

web-view页面与小程序通信

目前web-view网页可以向小程序发送信息，但是信息只会在特定时刻（小程序回归、组件销毁、分享）触发和接收。

在小程序中，通过设置web-view中的属性，来接收信息，如下图：

这样就为H5分享到小程序分享提供了一个很靠谱的解决方案。比如有些场景会引导用户分享（砍价，帮忙等），这样当点击按钮出现引导时，就要把原H5页面的分享信息传递给小程序，小程序点击分享时就会获取H5页面传入的信息，然后用这些信息构造分享信息。web-view页面包含首先域名必须是业务域名，否则页面也会提示错误，无法正常显示。其次页面不能使用官网备案的相关接口。1 如果想跳转到其他小程序页面，可以使用..wx..，但是在IOS中不行。页面刷新刷新页面需要更新web-view的src属性，也就是更新页面的URL，最简单的方式就是加一个参数。 比如你注册了详情页，那么注册成功之后就需要更新详情页的注册信息，由于页面返回会触发生命周期，所以在这个函数里需要更新URL值。另外如果H5页面里有一些播放任务（音乐，视频等），那么页面进入后台的时候要把URL设置为空，否则音视频会在后台一直播放，直到小程序销毁或者音视频结束。 调试 web-view 开发工具调试 在开发工具展示面板里右键会调出调试，打开一个调试面板。当然这样是看不到cgi请求的，想要看到请求我们要重新发送请求，在里面执行页面刷新或者直接再次右键调试，都会触发页面刷新请求重新发送。

总结

最后，不管开发工具里显示的好不好，一定要用真机检查效果，iOS和都要检查，不要太相信你的代码，但也不要不相信你的代码。