h5 открыть программы микроканала (используя wx-open-launch-weapp a)

WeChat

Что касается использования wx-open-launch-weapp, вы можете сначала прочитать официальную документацию:Шаги использования Open Label.

Пример реализованной ссылки:sourl.cn/6AqdUC

Ниже представлена ​​схема эффекта:

0. Определить браузер

Сводка. Откройте вкладку разработки апплета WeChat, которая применима только к мобильным браузерам WeChat с версией WeChat 7.0.12 и выше.

В: Только ли мобильный браузер WeChat поддерживает открытие mp? О: Да,wx-open-launch-weappЭтот тег должен быть определен только внутри браузера WeChat. И вызов апплета WeChat также требует встроенной поддержки WeChat.

var userAgent = window.navigator.userAgent.toLowerCase();
var is_android = /(android)/.test(userAgent);
var is_iphone = /(iphone|ios)/.test(userAgent);
var is_mobile = is_android || is_iphone;
var is_weixin_browser = /micromessenger/.test(userAgent);

В: Существуют условия использования для открытия мини-программ (требования к версии WeChat: 7.0.12 и выше. Требования к версии системы: iOS 10.3 и выше, Android 5.0 и выше), нужно ли мне принимать решение? A: Сделайте это.Ведь последняя версия WeChat (28.07.2020) всего лишь 7.0.14.Насчет версии системы судить не надо.

// 获取微信的版本号，如： 7.0.14
let wechat = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i)

if (wechat) {
  let judgewechat = wechat[1].split('.')

  if (judgewechat[0] >= 7) {
    if (judgewechat[1] >= 0) {
      if (judgewechat[2] >= 12) {
        // 微信版本是 7.0.12及以上
      }
    }
  }
}

1. Знакомство с JS

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

2. Введите информацию о конфигурации

wx.config({
  debug: false,
  beta: true,
  appId: data.appid,
  timestamp: data.timestamp,
  nonceStr: data.noncestr,
  signature: data.signature,
  jsApiList: [''], // 备注：这里有一个坑，这项不能是 []，会不显按钮...
  openTagList: ['wx-open-launch-weapp']
})
wx.ready(() => {
  // 显示小程序跳转按钮
})

Обратите внимание:

  • jsApiList, это значение не может быть [], кнопка может вести не отображается (2020/07/28 есть эта проблема).

3. Добавьте кнопку на страницу

<div class="btn-wechat-mp__wrap" v-if="false">
  <!-- 显示的按钮 -->
  <div class="btn-wechat-mp--show">
    <div class="btn-wechat-mp__icon">
      <!-- 自定义的组件 -->
      <itv-icon type="i-applet" size="12" />
    </div>
    <span>立即使用</span>
  </div>
  <wx-open-launch-weapp id="launch-btn" username="gh_cb8edfaxxxx" :path="report_params.url">
    <!-- 必须写：占位的按钮 -->
    <script type="text/wxtag-template">
      <style>
        .ctn{width: 120px;height: 40px;}
      </style>
      <div class="ctn"></div>
    </script>
  </wx-open-launch-weapp>
</div>

/* 备注：样式不重要，这里就不换行了 */
.btn-wechat-mp__wrap {
  display: block;width: 120px;height: 40px;margin-top: 30px;position: relative;
  .btn-wechat-mp--show {
    background-color: #3464e0;border-radius: 2px;position: absolute;top: 0;right: 0;left: 0;bottom: 0;display: flex;justify-content: center;align-items: center;color: #ffffff;font-size: 14px;z-index: 0;
    .btn-wechat-mp__icon {
      margin-right: 8px;line-height: 12px;color: #3464e0;box-sizing: border-box;padding: 2px;width: 16px;height: 16px;border-radius: 100%;background: #fff;display: flex;align-items: center;
    }
  }
  #launch-btn {
    z-index: 10;position: absolute;top: 0;right: 0;left: 0;bottom: 0;background: transparent;
  }
}

Обратите внимание здесь (сущность совести)

  • к пути необходимо добавить суффикс .html, и путь может быть динамическим.
  • Слот должен быть записан, а содержимое должно иметь размер (например, div.ctn выше). Слоты в vue нужно заменить скриптом.
  • Компоненты нельзя использовать внутри слотов, поэтому отображаемый контент может быть позиционирован абсолютно (например, div.btn-wechat-mp--show выше).

4. Отладка

Поскольку информация о конфигурации, введенная WeChat, не может быть протестирована локально, для проверки метки вам необходимо опубликовать кнопку в тестовой среде, прежде чем вы сможете ее увидеть.

Категории