Liora

Embedding H5 Pages in WeChat Mini Programs

wechat; h5; jssdk; mixed
569 words

During the development of embedding H5 pages in WeChat mini programs, I encountered several issues. Here I'll document them.

JSSDK Initialization

At the Taro mini program level, you don't need to worry about JSSDK initialization because Taro has already handled it. However, in H5 pages, you need to initialize JSSDK yourself.

import wx from 'weixin-js-sdk';

const url = window.location.href.split('?')[0]
const signature = await getWxH5JSdkSignature(url, WX_H5_APP_ID)
wx.config({
  debug: false,
  appId: signature.appId,
  timestamp: signature.timestamp,
  nonceStr: signature.nonceStr,
  signature: signature.signature,
  jsApiList: ['getLocation', 'chooseImage'],
  success(res) {},
})

The url here must meet the following conditions:

  1. Must be an HTTPS address. So during local development, you must map your local address to an HTTPS address. (The development experience is not great)
  2. Must be a JS interface security domain registered in the WeChat Official Account backend for the corresponding WX_H5_APP_ID. See → JSSDK Usage Steps
  3. The URL must be the address of the initialization page and cannot contain parameters.

getWxH5JSdkSignature is a backend interface used to get the signature information for the WeChat JSSDK. See → Appendix 1 - JS-SDK Permission Signature Algorithm

APP ID: Use the APP ID of whoever is initializing. If initializing at the mini program level, use the mini program's APP ID; if initializing in an H5 page, use the APP ID of the Official Account bound to the H5 page. Even if it's an H5 page embedded in a mini program, use the Official Account's APP ID when initializing in the H5.

jsApiList is the list of JSSDK APIs you need to use. You must initialize the APIs you want to use here, otherwise they won't work. Here I've only listed getLocation and chooseImage. For more APIs, see → Appendix 2 - All JS Interface List

WeChat Positioning: getLocation

Positioning in H5 Pages

During development, use the WeChat Developer Tools to open the corresponding H5 page with the "Official Account Web" option. When using getLocation to get positioning information, the positioning result has a large offset.

Even when directly accessing the H5 page in WeChat, the positioning result has a large offset. ~This might be because WeChat offsets the positioning result when getting positioning information in H5 pages to protect user privacy.~ Found the explanation! But this explanation isn't in the WeChat documentation... Details

Using the wx.getlocation method in the developer tools uses IP positioning, and positioning deviation is normal and not an SDK issue, no need to investigate.

However, when an H5 page nested in a mini program is opened in the WeChat developer tools, the positioning authorization popup won't appear. (Time freeze #1)

In this case, you need to open the H5 page in a real device mini program to get positioning and see the authorization popup. And when opening the H5 page in a real device mini program for positioning, the positioning result is actually quite accurate. (Time freeze #2)

Confusing... continuously confusing... speechless... continuously speechless...

But in any case, you can only get latitude and longitude information, not detailed address information like province, city, district, and street.

In this case, you need other services to get detailed address information. For example, Tencent's own Map Service.

CSS Height Units

~In a certain H5 page, I used 100vh as the min-height for the entire page. But in actual use, this would likely prevent the H5 page from scrolling in WeChat.~

~Eventually I had to set the unit to 'px', like: min-height: 400px, and then it scrolled normally in WeChat.~

Solved! It's not a WeChat embedded browser issue, it's a Tencent/tdesign-mobile-vue/issues/1503 issue with the component library... but I also fixed it in Tencent/tdesign-mobile-vue/pull/1504! 🎉