微信小程序:利用web-view方式嵌入h5页面,产生的微信双导航兼容及分享问题

·  阅读 1099

公司要求微信小程序快速开发,时间就给了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; } });

收藏成功!
已添加到「」, 点击更改