解析H5页面和微信小程序JSsdk的无缝连接

2023-09-19 16:45:03

H5 页面和微信小程序 JS SDK 无缝衔接：让开发更轻松

在当今移动互联网时代，H5 页面和微信小程序已成为移动开发的主流方式。为了让 H5 页面和微信小程序能够无缝衔接，微信小程序 JS SDK 应运而生。本文将详细解析 H5 页面使用微信小程序 JS SDK 以及微信内嵌 WebView 使用微信小程序 JS SDK 时遇到的坑和注意事项。

一、H5 页面使用微信小程序 JS SDK

1. 引入微信小程序 JS SDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2. 配置微信小程序 JS SDK

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: 'wx1234567890', // 必填，公众号的唯一标识
  timestamp: 1552378636, // 必填，生成签名的时间戳
  nonceStr: 'kReZCsuKUZ6QB7vR', // 必填，生成签名的随机串
  signature: '947a8d467244616410d0637c7019b7d180b95e21', // 必填，签名
  jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage'] // 必填，需要使用的JS接口列表
});

3. 使用微信小程序 JS SDK

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  }
});

二、微信内嵌 WebView 使用微信小程序 JS SDK

1. 配置 WebView

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:webkitSettings.javaScriptEnabled="true"
    android:webkitSettings.domStorageEnabled="true"
    android:webkitSettings.allowUniversalAccessFromFileURLs="true"
    android:webkitSettings.allowFileAccess="true"
    android:background="#ffffff"/>

2. 引入微信小程序 JS SDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

3. 配置微信小程序 JS SDK

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: 'wx1234567890', // 必填，公众号的唯一标识
  timestamp: 1552378636, // 必填，生成签名的时间戳
  nonceStr: 'kReZCsuKUZ6QB7vR', // 必填，生成签名的随机串
  signature: '947a8d467244616410d0637c7019b7d180b95e21', // 必填，签名
  jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage'] // 必填，需要使用的JS接口列表
});

4. 使用微信小程序 JS SDK

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
  }
});

三、常见坑和注意事项

1. 微信小程序 JS SDK 需要在微信环境下才能使用

2. 微信小程序 JS SDK 的签名需要在服务器端生成

3. 微信小程序 JS SDK 只能在 H5 页面中使用，不能在原生 App 中使用

4. 微信内嵌 WebView 使用微信小程序 JS SDK 时，需要在 WebView 中引入微信小程序 JS SDK

5. 微信内嵌 WebView 使用微信小程序 JS SDK 时，需要在 WebView 中配置微信小程序 JS SDK

6. 微信内嵌 WebView 使用微信小程序 JS SDK 时，需要在 WebView 中使用微信小程序 JS SDK

7. H5 页面使用微信小程序 JS SDK 时，需要在 H5 页面中引入微信小程序 JS SDK

8. H5 页面使用微信小程序 JS SDK 时，需要在 H5 页面中配置微信小程序 JS SDK

9. H5 页面使用微信小程序 JS SDK 时，需要在 H5 页面中使用微信小程序 JS SDK

10. H5 页面和微信小程序 JS SDK 的版本需要保持一致

结论

微信小程序 JS SDK 的引入极大地便利了 H5 页面和微信小程序之间的交互。本文详细介绍了在 H5 页面和微信内嵌 WebView 中使用微信小程序 JS SDK 的方法，并总结了常见的坑和注意事项。通过遵循本文中的指导，开发者可以轻松地实现 H5 页面和微信小程序之间的无缝衔接，为用户提供更流畅、更丰富的移动体验。