喋喋不休

真正的勇士,胖还贪吃,困还熬夜,穷还追星,丑还颜控

0%

h5页面和小程序交互

h5页面和小程序交互

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

引入jsdk文挡

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

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传过来的消息。
相关的api
wx.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 
})

其他api 包括图像接口、音频接口、设备信息、地理位置等,自行查看https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

tip

网页内 iframe 的域名也需要配置到域名白名单。
开发者工具上,可以在 <web-view> 组件上通过右键 - 调试,打开 <web-view> 组件的调试。
每个页面只能有一个 <web-view>,<web-view> 会自动铺满整个页面,并覆盖其他组件。
<web-view> 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
在 iOS 中,若存在JSSDK接口调用无响应的情况,可在 <web-view> 的 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嵌套,过不了多久小程序直接就超额了,还搞个毛线。包的大小都是做了限制的,没办法罗。。。