h5页面和小程序交互小程序web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

引入jsdk文挡

h5跳转小程序页面 demo$('.span-icon1').click(function(){

wx.miniProgram.navigateTo({url:'/pages/share/share'});

})

h5嵌入小程序传递message给小程序wx.miniProgram.postMessage(Util.shareToWechart(params)); // 传递消息给webview

web-view 通过属性 bindmessage 触发得到h5传过来的消息。

相关的apiwx.miniProgram.navigateTo //跳转小程序页面

wx.miniProgram.navigateBack //返回小程序上一个路由

wx.miniProgram.switchTab //切换tab

wx.miniProgram.reLaunch //重新启动

wx.miniProgram.redirectTo // 跳转小程序，删除当前页面，类似 history.replace()

wx.miniProgram.postMessage //向小程序传递信息

wx.miniProgram.getEnv //获取当前环境

//获取小程序环境

wx.miniProgram.getEnv(function(res) {

console.log(res.miniprogram) // true

})

tip网页内 iframe 的域名也需要配置到域名白名单。

开发者工具上，可以在 组件上通过右键 - 调试，打开 组件的调试。

每个页面只能有一个 ， 会自动铺满整个页面，并覆盖其他组件。

网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。

在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 的 src 后面加个#wechat_redirect解决。

避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent

这些东西实际上在小程序开发文档都可以查看到，我主要记录一下我在开发web-view的时候，所遇到的一些问题

屏幕适配 (除了屏幕适配外，其他的东西jssdk有提供就用，没有提供就没有办法罗。。。。o(￣︶￣)o)

iPhoneX

ipx再浏览器手机模拟器中，我们可以看到设备的宽高分别为375、812、dpr=3，我们的设计稿是ip6的设计稿，对于ipx需要做单独的样式。

按照我们的思路，可以获取设备信息，动态增减类，来控制样式；也可以写媒体查询，根据屏幕的宽或则高，或则dpr来做控制。

首先，我们项目中不知道谁写了一个判断ipx的的方法。。。。如下

isIphoneX: function () {

return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)

},

同事，告诉我，他们就是用的这个方法，我也就没有在意，粗略一看，没什么问题，是判断ipx的方法，于是乎。。。。。经过我在小程序测试，发现这个

方法，并没有起到作用，原因是web-view组件中嵌入h5页面，你在h5页面中获取的屏幕高度并不是ipx通屏的高度。。。。还记得小程序头顶上的一些东西吗？

经过测试，在小程序web-view中，ipx的height只有724px。。。

发现问题了，立马弃用公共的判断方法，当然，也可以重新判断高度的。我们决定采用媒体查询来做，代码如下：

//ipx 适配

@media only screen and (device-width: 375px) and (device-height:724px) and (-webkit-device-pixel-ratio:3),

only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {

.christmas_activity {

background: url('../images/home-bg-ipx.jpg') no-repeat;

background-size: 100% 100%;

.foot {

height: 2.5rem;

bottom: 0;

}

}

}

这里媒体查询写死了两种屏幕的宽高，一种是ipx通屏，一种是ipx在小程序中的，这样就可以做到ipx的适配。嗯，不错。

但是，只是做到了ipx的适配，如果尺寸不是ipx的尺寸，但是屏幕比ipx还长，或则比它短一点呢？又是另外的问题了，目前，我采用的方法是ip6用一张背景图，比ip6-plus高度还大的手机换ipx的背景图，这样基本可以做到长屏幕手机上面背景图片不会拉伸了，哈哈哈。

其实web-view组件嵌套h5页面还是非常有必要的，就拿我们目前的小程序项目来说的话，主包除外，已经分包两个了，如果不用h5嵌套，过不了多久小程序直接就超额了，还搞个毛线。包的大小都是做了限制的，没办法罗。。。