How to Solve Common WeChat Mini‑Program Issues: Dates, Navigation, Images, and More

iOS Date Conversion Issue

Problem: iOS returns null when parsing a date string like

var resData = '2017-3-14 10:03:45'

. The same code works on PC and Android.

Solution: Replace hyphens with slashes before parsing.

<code>resData = resData.replace(/-/g, '/');</code>

Live‑Streaming Message Rate Limiting

Problem: The client needs real‑time notifications for pause, resume, and end events, but Tencent Cloud IM limits group messages to 100 requests/s.

Solution: 1) Stop client polling; let the server handle state. 2) Use the admin backend to poll, send a message when the state changes, and let the client distinguish these messages by a specific code.

Storage Sharing Between Mini‑Program and Plugin

Problem: Data cannot be shared directly between a mini‑program and its plugin.

Solution: Pass a shared method from the plugin’s constructor; the plugin can then request, store, and retrieve data through the mini‑program.

Navigation Depth Limit (10‑Level Jump)

Problem: Mini‑programs cannot navigate more than ten pages using

navigateTo

.

Solution: Detect the current page stack length; use

redirectTo

when the limit is reached, otherwise use

navigateTo

.

<code>var jumpUrl = function (data) {
  let pages = getCurrentPages();
  if (pages.length >= 10) {
    wx.redirectTo({ url: data });
  } else {
    wx.navigateTo({ url: data });
  }
}</code>

Floating‑Point Precision

Problem: Inaccurate results when performing arithmetic with floating‑point numbers.

Solution: Convert operands to integers, perform the operation, then divide back. Example implementation for subtraction:

<code>function accSub(arg1, arg2) {
  var r1, r2, m, n;
  try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; }
  try { r2 = arg2.toString().split(".")[1].length; } catch (e) { r2 = 0; }
  m = Math.pow(10, Math.max(r1, r2));
  n = (r1 >= r2) ? r1 : r2;
  return ((arg1 * m - arg2 * m) / m).toFixed(n);
}</code>

QR‑Code Scene Length Limitation

Problem: The scene parameter in a mini‑program QR code is limited to 32 visible characters.

Solution: 1) Use an intermediate page that receives a short scene and then fetches the full parameters from an API. 2) Encode a short parameter directly in the scene and retrieve the full data via an API call.

Image Preloading for Large Activity Images

Problem: Displaying many large images can cause brief blanks while they load.

Solution: Implement an image preloader component.

Step 1 – JavaScript class:

<code>class ImgLoader {
  constructor(pageContext, defaultCallback) {
    this.page = pageContext;
    this.defaultCallback = defaultCallback || function () {};
    this.callbacks = {};
    this.imgInfo = {};
    this.page.data.imgLoadList = []; // download queue
    this.page._imgOnLoad = this._imgOnLoad.bind(this);
    this.page._imgOnLoadError = this._imgOnLoadError.bind(this);
  }
  load(src, callback) {
    if (!src) return;
    let list = this.page.data.imgLoadList,
        imgInfo = this.imgInfo[src];
    if (callback) this.callbacks[src] = callback;
    if (imgInfo) {
      this._runCallback(null, { src, width: imgInfo.width, height: imgInfo.height });
    } else if (list.indexOf(src) == -1) {
      list.push(src);
      this.page.setData({ imgLoadList: list });
    }
  }
  _imgOnLoad(ev) {
    let src = ev.currentTarget.dataset.src,
        width = ev.detail.width,
        height = ev.detail.height;
    this.imgInfo[src] = { width, height };
    this._removeFromLoadList(src);
    this._runCallback(null, { src, width, height });
  }
  _imgOnLoadError(ev) {
    let src = ev.currentTarget.dataset.src;
    this._removeFromLoadList(src);
    this._runCallback('Loading failed', { src });
  }
  _removeFromLoadList(src) {
    let list = this.page.data.imgLoadList;
    list.splice(list.indexOf(src), 1);
    this.page.setData({ imgLoadList: list });
  }
  _runCallback(err, data) {
    let callback = this.callbacks[data.src] || this.defaultCallback;
    callback(err, data);
    delete this.callbacks[data.src];
  }
}
module.exports = ImgLoader;</code>

Step 2 – WXML template:

<code>&lt;template name="img-loader"&gt;
  &lt;image mode="aspectFill" wx:for="{{ imgLoadList }}" wx:key="*this"
         src="{{ item }}" data-src="{{ item }}"
         bindload="_imgOnLoad" binderror="_imgOnLoadError"
         style="width:0;height:0;opacity:0" /&gt;
&lt;/template&gt;</code>

Step 3 – Usage:

<code>let images = [
  'http://cdn.weimob.com/saas/activity/bargain/images/arms/shoulie.png',
  // ... other URLs
];
this.imgLoader = new ImgLoader(this, null);
images.forEach(item => this.imgLoader.load(item));
</code>

Server‑Client Time Synchronization

Problem: Countdown timers become inaccurate when server and client clocks differ.

Solution: Retrieve the server time via an API, compute the offset with the client clock, and apply this offset when calculating countdowns.