H5 加载小程序标签

使用 rem 单位问题

需要在小程序标签里面指定以下样式

html {
    font-size: 50px;
}

.text {
  font-size: .26rem;
}

可以通过以下代码，可以动态获取页面 html 标签上的 font-size 值，小程序标签里面 html 的 font-size 应该要和页面的保持一致

var docEl = window.document.documentElement;
// 在使用 rem 的情况下，获取页面 html 标签上的 font-size 值
var fontSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);

动态加载小程序标签问题

进入页面的时候，调用wx.config初始化小程序标签。如果页面需要通过 js 动态加载小程序标签，需要在每次加载前都调用wx.config初始化配置，否则会报错，导致动态加载的小程序标签无法正常显示。

var config;
function wxJsApiInit() {
  if (config) {
    wx.config(config);
  } else {
    $.post('获取 jsticket 接口', {
      url: window.location.href
    }, function (data) {
      if (0 === data.errcode) {
        config = {
          // 必填，公众号的唯一标识
          appId: '后端返回的 appId',
          // 必填，生成签名的时间戳
          timestamp: '后端返回的 timestamp',
          // 必填，生成签名的随机串
          nonceStr: '后端返回的 nonceStr',
          // 必填，签名
          signature: '后端返回的 signature',
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: [
            'chooseImage',
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
          ],
          // 小程序标签
          openTagList: ['wx-open-launch-weapp']
        }
        // 初始化配置
        wx.config(config);
      }
    }, 'json');
  }
}

$(function () {
  wxJsApiInit();
});

function search() {
  $.get('搜索接口获取小程序数据', function (data) {
    var item = data.item;
    var html = miniapp(item.username, miniapp.path, miniapp.name);
    // 动态添加小程序到页面，需要重新 wx.config 初始化
    wxJsApiInit();
    $('#miniapp_1').html(html);
  });
}

/**
 * 拼接小程序 html 代码
 * @param username 需要打开的小程序账号
 * @param path 需要打开的小程序路径
 * @param name 小程序标签展示的名称
 * @returns {string}
 */
function miniapp(username, path, name) {
  var docEl = window.document.documentElement;
  // 在使用 rem 的情况下，获取页面 html 标签上的 font-size 值
  var fontSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
  return '<wx-open-launch-weapp username="' + username + '" path="' + path + '" style="display:block; width: 60px">' +
    '    <template>' +
    '        <style>' +
    '            html {' +
    '                font-size: ' + fontSize + 'px' +
    '            }' +
    '            html,' +
    '            body {' +
    '                margin: 0;' +
    '                padding: 0;' +
    '                border: 0;' +
    '                outline: 0;' +
    '                font-weight: inherit;' +
    '                font-style: inherit;' +
    '                font-family: "Microsoft YaHei", simsun, Arial, Helvetica, sans-serif;' +
    '                vertical-align: baseline;' +
    '                text-align: center;' +
    '            }' +
    '            * {' +
    '                color: #fff;' +
    '                font-size: .26rem;' +
    '                font-weight: normal;' +
    '            }' +
    '        </style>' + name +
    '    </template>' +
    '</wx-open-launch-weapp>';
}