input、textarea穿透，层级最高，覆盖弹层
原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上
解决方案1：cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面，所以可以将弹层最外层用cover-view 标签，此时需要注意cocer-view需要设置z-index高于其他原生组件才能覆盖
解决方案2：控制input的显示隐藏，弹框出现时隐藏掉。或者用view,text等标签模拟输出框的展示样式，弹框出现时把输入框替换成view
ios底部定位按钮被遮挡
解决方案：判断是不是iphoneX以上的手机，是的话增加底部按钮的高度
app.js //全局js,小程序加载时先加载app.js
App({
onLaunch: function () {
this.checkIsIPhoneX();
}
isIpx: false,
checkIsIPhoneX: function () {
const me = this
wx.getSystemInfo({
success: function (res) {
if (res.safeArea.top > 20) {
me.isIPX = true
}
}
})
},
app.wxss //全局css样式
.fix-Full-button {
bottom: 68rpx !important;
}
.fix-Full-button::after {
content: ' ';
position: fixed;
bottom: 0 !important;
left: 0;
height: 68rpx !important;
width: 750rpx;
background: #fff;
}
index.js //使用页面的js文件引入isIPX这个属性
var app = getApp()
Page({
/** * 页面的初始数据 */
data: {
isIPX:app.isIPX
},
})
index.wxml //通过isIPX判断是否加载class
<view class="close-btn {{isIPX?'fix-Full-button':''}}" bindtap="close"><text>取消</text></view>
小程序组件无法加载app.wxss样式
解决方案：需要在组件js文件设置 addGlobalClass:true
Component({
options: {
addGlobalClass: true
}
})
小程序内打开h5,获取h5分享参数
小程序开放了webview组件，可用于开启一个webview容器。这个功能是很好用的，某些h5已经实现的页面可以避免小程序再开发一遍，也能解决掉小程序每次发版审核问题（需要在小程序后台配置将h5的域名配置为业务域名）。
小程序与h5传参主要是借助url传参，h5对小程序传参可以借助jssdk提供的api。
webview.wxml(小程序获取h5参数主要是借助 bindmessage 事件，它会在特定时机（小程序后退、
组件销毁、分享）触发并收到消息。e.detail = { data }，
data是多次 postMessage 的参数组成的数组。另外就是小程序的路由api（如reLaunch，navigateTo）,
本身支持参数传递）
<web-view src="{{url}}" bindmessage="message"></web-view>
webview.js
var app = getApp()Page({
/** * 页面的初始数据 */
data: {
url:"",
share:{
path:"",
imageUrl:"",
title:""
}
},
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
var url = options.url
this.setData({
url: decodeURIComponent(url)
})
},
message(data){
console.log(data,"message")
//获取h5页面触发的postMessage事件，因为返回的是一个出发时间正序的数组，
//所以获取最新的数据需要取数组最后一条
const obj = data.detail.data[data.detail.data.length-1]
this.data.share = obj },
/** * 用户点击右上角分享 */
onShareAppMessage: function (obj) {
return this.data.share
}})
index.html(h5页面必须引入jssdk才可以使用对应api，目前微信官方只开放了路由函数，postMessage
向小程序发送消息，getEnv获取环境 几个函数。h5无法直接唤起小程序的分享弹框，需要做一个分享引导的
模板，将分享参数传递给小程序端，提示用户从右上角点击分享）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>小程序h5交互</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js?v=1.0"></script>
</head>
<body>
<button onclick="toHome()">回首页</button>
<button onclick="share()">分享</button>
<script>
function toHome() {
wx.miniProgram.reLaunch({ url: '/pages/home/home' })
}
function share() {
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
wx.miniProgram.postMessage({
data: {
title: '分享标题',
imageUrl: '分享封面图，支持cdn',
path: '/pages/home/home?from=h5'
}
});
}
});
}
</script>
</body>
</html>
