公司要求微信小程序快速开发，时间就给了3天， 实在是来不及了。所以用了微信小程序的壳子嵌入H5的方式开发。利用了最新的方式web-view的方式将内容src嵌入。目前遇到双头的问题，我想把微信小程序头部隐藏，然后在app.json的window定义"navigationStyle": "custom"，将头部隐藏了。但是遇到的问题是头部与微信的胶囊不匹配。
遇到问题：微信导航自定义问题：自定义导航在苹果X上部兼容，它的顶部有个黑色条幅和底部黑色线把我的导航和底部都挡住了。
解决方案：在h5的页面中读取是否是小程序的环境，判断机型尺寸及系统，来定义微信小程序胶囊在h5头部的位置。代码定义在APP.VUE中，这样页面加载之后就可以判断这些了！
addHeaderTop() {
let u = navigator.userAgent;
let isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
// 判断是否是小程序的环境内
if (window.__wxjs_environment === 'miniprogram') {
if (isAndroid) {
// 微信小程序不支持宽度小于320及宽度大于700的机器调整兼容胶囊状
if (screen.height === 640 && screen.width === 360) {
this.paddingTop = 5;
} else if (screen.height === 640 && screen.width === 384) {
this.paddingTop = 5;
} else if (screen.height === 533 && screen.width === 320) {
this.paddingTop = 7;
} else if (screen.height === 720 && screen.width === 360) {
this.paddingTop = 5;
} else if (screen.height === 731 && screen.width === 411) {
this.paddingTop = 4;
} else if (screen.height === 736 && screen.width === 414) {
this.paddingTop = 3;
} else if (screen.height === 732 && screen.width === 412) {
this.paddingTop = 3;
} else if (screen.height === 818 && screen.width === 393) {
this.paddingTop = 9;
} else if (screen.height === 854 && screen.width === 480) {
this.paddingTop = 2;
} else if (screen.height === 760 && screen.width === 360) {
this.paddingTop = 8;
}
}
if (isIos) {
// 微信小程序不支持苹果4的尺寸调整
if (screen.height === 812 && screen.width === 375) {
// 判断导是否是苹果X机型
this.paddingTop = 10;
} else if (screen.height === 568 && screen.width === 320) {
// 判断导是否是苹果5/SE
this.paddingTop = 6;
} else if (screen.height === 667 && screen.width === 375) {
// 判断导是否是苹果6/7/8
this.paddingTop = 4;
} else if (screen.height === 736 && screen.width === 414) {
// 判断导是否是苹果6/7/8 plus
this.paddingTop = 3;
}
}
};
}
第二个问题：产品让我固定几个页面分享，而我的页面是用的web-view的方式，一个首页嵌入就完成小程序的开发，但是针对单个页面去做不同的分享文字，我应该怎么解决呢？
解决方案：我没想到掘金居然不支持微信小程序的源码...贴出来大家贴到微信小程序里格式化查看吧！
//card.js
Page({
data: {
url: 'https://你的域名/h5/card/self'
},
onLoad: function(options) {
if (options.src){
this.setData({
url: decodeURIComponent(options.src)
})
}
},
// 微信分享接口
onShareAppMessage: function(res) {
console.log(res)
var webViewUrl = res.webViewUrl;
var path;
var shareObj = {
path: /pages/card/card?src=${encodeURIComponent(webViewUrl)}
}
function hasIt(val) {
if (webViewUrl.indexOf >= 0) {
return true;
} else {
return false;
}
}
switch (webViewUrl) {
// 我的名片
case hasIt('self'):
shareObj.title = '我的名片';
break;
// 他的名片
case hasIt('preview'):
shareObj.title = '他的名片';
break;
// 有传黄页
case hasIt('enterpris'):
shareObj.title = '有传黄页 - 您要找的单位的信息都在这里！';
break;
// 单位动态
case hasIt('unit'):
shareObj.title = '单位动态';
break;
// 动态列表
case hasIt('news/list'):
shareObj.title = '动态列表';
break;
// 文章列表
case hasIt('news/detail'):
shareObj.title = '文章列表';
break;
// 他的名片
default:
shareObj = {
title: '分享',
path: /pages/card/card?src=${encodeURIComponent('https://你的域名/h5/card/self')}
}
break;
}
return shareObj;
}
});
