web-view 与 H5 混合开发实战

配置流程：
1. 准备 HTTPS 域名（需有效证书，且非 IP、非端口）
2. 下载微信提供的校验文件 domain-check.txt
3. 将校验文件放到域名根目录，如 https://h5.example.com/domain-check.txt
4. 在公众平台添加域名并验证
5. 开发者工具中勾选「不校验合法域名」以便本地联调

<!-- pages/h5/h5.wxml：内嵌 web-view -->
<web-view
  src="https://h5.example.com/activity/2026"
  bindmessage="onH5Message"
  bindload="onH5Load"
  binderror="onH5Error"
/>

// pages/h5/h5.js
Page({
  onH5Load(e) {
    console.log('web-view 加载成功', e);
  },
  onH5Error(e) {
    // 域名未配置、证书异常、页面 404 都会触发
    wx.showToast({ title: '页面加载失败', icon: 'none' });
  }
});

// 拼接 URL 参数
const token = wx.getStorageSync('access_token');
Page({
  data: {
    h5Src: ''
  },
  onLoad(options) {
    const target = options.target || 'activity/2026';
    // 只传业务标识，登录态通过 JSBridge 传递
    this.setData({
      h5Src: 'https://h5.example.com/' + target + '?channel=miniprogram'
    });
  }
});

H5 → 小程序：wx.miniProgram.postMessage(数据)
     ↓ 小程序侧通过 bindmessage 事件接收
小程序 → H5：web-view 的 src 变更 / wx.miniProgram 无法直接推消息

// H5 侧：判断是否运行在小程序中
function isInWechatMiniProgram() {
  return !!(
    window.__wxjs_environment === 'miniprogram' ||
    window.wx?.miniProgram
  );
}

// H5 向小程序发送消息
function sendToMiniProgram(payload) {
  if (!isInWechatMiniProgram()) return;
  window.wx.miniProgram.postMessage({
    type: 'H5_EVENT',
    data: payload
  });
}

// pages/h5/h5.js 接收 H5 消息
Page({
  onH5Message(e) {
    const detail = e.detail || {};
    const data = Array.isArray(detail.data) ? detail.data[0] : detail.data;
    if (!data) return;

    switch (data.type) {
      case 'H5_EVENT':
        // 例如 H5 上报「点击领券」，小程序侧拉起对应逻辑
        this.handleH5Event(data.data);
        break;
      default:
        break;
    }
  },
  handleH5Event(payload) {
    wx.showToast({ title: '收到 H5 事件', icon: 'none' });
  }
});

// 小程序侧：获取票据并通过 postMessage 传给 H5
async function fetchTicket() {
  const res = await wx.request({
    url: 'https://api.example.com/auth/ticket',
    method: 'POST',
    data: { openid: getOpenid() }
  });
  return res.data.ticket;   // 例如 JWT，有效期 5 分钟
}

// H5 侧：加载完成后向小程序索取票据
window.onload = function () {
  if (isInWechatMiniProgram()) {
    window.wx.miniProgram.postMessage({
      type: 'H5_NEED_TICKET',
      data: { page: location.pathname }
    });
  }
};

// H5 请求拦截器中的 401 处理
function handleUnauthorized() {
  // 通知小程序侧刷新登录态
  if (isInWechatMiniProgram()) {
    window.wx.miniProgram.postMessage({
      type: 'H5_AUTH_EXPIRED'
    });
  } else {
    window.location.href = '/login?redirect=' + encodeURIComponent(location.href);
  }
}

// pages/h5/h5.js：配置标题、分享、返回
Page({
  onLoad(options) {
    wx.setNavigationBarTitle({
      title: decodeURIComponent(options.title || '活动详情')
    });
  },
  onShareAppMessage() {
    return {
      title: '快来参与活动',
      path: '/pages/h5/h5?target=activity/2026&title=' + encodeURIComponent('活动详情')
    };
  }
});

// 小程序侧接收 H5 请求并调用原生能力
Page({
  onH5Message(e) {
    const data = e.detail?.data?.[0];
    if (data.type === 'H5_SAVE_IMAGE') {
      wx.saveImageToPhotosAlbum({
        filePath: data.data.url,
        success: () => {
          // 结果通过 web-view 变更 src 或下一条消息回传
          this.sendToH5({ type: 'SAVE_IMAGE_RESULT', ok: true });
        }
      });
    }
  }
});