H5 嵌入微信 / 支付宝 / 抖音小程序 WebView：调用原生能力完整方案

html 体验AI代码助手 代码解读复制代码<!-- 引入微信JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<button id="btn">微信选图/拍照</button>
<script>
// 1. 从后端获取配置参数
async function getWxConfig() {
  const url = location.href.split('#')[0];
  const res = await fetch(`/api/wx-jssdk-config?pageUrl=${encodeURIComponent(url)}`);
  return await res.json();
}

// 2. 初始化wx.config
async function initWx() {
  const config = await getWxConfig();
  wx.config({
    debug: false,
    appId: config.appId,
    timestamp: config.timestamp,
    nonceStr: config.nonceStr,
    signature: config.signature,
    jsApiList: ['chooseImage', 'getLocalImgData']
  });
}

// 3. 选图/拍照
document.getElementById('btn').addEventListener('click', () => {
  wx.chooseImage({
    count: 1,
    sourceType: ['album', 'camera'], // 相册 + 拍照
    success: (res) => {
      // res.localIds 为图片本地ID数组
      console.log('选择图片成功', res.localIds);
      
      // 进一步获取base64预览/上传
      wx.getLocalImgData({
        localId: res.localIds[0],
        success: (imgRes) => {
          console.log('图片Base64', imgRes.localData);
          // 可用于预览、表单提交、上传服务器
        }
      });
    },
    fail: (err) => {
      console.error('选择图片失败', err);
    }
  });
});

// 初始化
initWx();
</script>

html 体验AI代码助手 代码解读复制代码<!-- 引入支付宝JS-SDK -->
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
<button id="aliBtn">支付宝选图/拍照</button>
<script>
// 等待支付宝JS桥就绪
function alipayReady(cb) {
  if (window.AlipayJSBridge) {
    cb();
    return;
  }
  document.addEventListener('AlipayJSBridgeReady', cb, false);
}

document.getElementById('aliBtn').addEventListener('click', () => {
  alipayReady(() => {
    ap.chooseImage({
      count: 1,
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log('支付宝选图成功', res.localIds);
        // res.localIds 可用于预览、上传
      },
      fail: (err) => {
        console.error('支付宝选图失败', err);
      }
    });
  });
});
</script>

html 体验AI代码助手 代码解读复制代码<!-- 引入抖音JS-SDK -->
<script src="https://lf3-cn-beijing.volces.com/obj/open-platform/ttjsapi/ttjsapi-1.0.0.min.js"></script>
<button id="ttBtn">抖音选图/拍照</button>
<script>
// 判断是否在抖音小程序WebView
function isDouyinMiniProgram() {
  return navigator.userAgent.toLowerCase().includes('toutiaomicroapp');
}

document.getElementById('ttBtn').addEventListener('click', () => {
  if (!isDouyinMiniProgram()) {
    alert('请在抖音小程序内打开');
    return;
  }

  tt.miniProgram.chooseImage({
    count: 1,
    sourceType: ['album', 'camera'],
    success: (res) => {
      console.log('抖音选图成功', res.tempFilePaths);
      // 临时路径可预览、上传
    },
    fail: (err) => {
      console.error('抖音选图失败', err);
    }
  });
});
</script>