Лучшее решение для открытия апплета на официальном аккаунте (Vue)

Сцены

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

Технические решения

Использование веб-страниц WeChatJSSDK

Применимая среда

Требования к версии WeChat:7.0.12и выше
Требования к версии системы:iOS 10.3и выше,Android 5.0и выше

Конкретные шаги

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

Привязать доменное имя
- Сначала войдите на общедоступную платформу WeChat, введите «Настройки функций» в «Настройки официальной учетной записи» и заполните «Имя домена безопасности интерфейса JS».
представлятьJSдокумент
- звонить когда надоJSСтраница интерфейса импортируется следующим образомJSфайл, (поддержкаhttps):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
- Для дальнейшего повышения стабильности сервиса, когда вышеперечисленные ресурсы недоступны, вы можете изменить доступ:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js(служба поддержкиhttps).
- Примечание: поддержите использованиеAMD/CMDЗагрузка стандартного модуля
пройти черезconfigКонфигурация проверки разрешения на внедрение интерфейса
- Все нужно использоватьJS-SDKСтраница должна сначала внедрить информацию о конфигурации, иначе она не сможет вызывать (тот же самыйurlнужно вызвать только один раз, для измененийurlизSPAизweb appдоступен каждый разurlВызывается при изменении, в настоящее времяAndroidКлиент WeChat не поддерживаетpushStateизH5новая функция, поэтому используйтеpushStateреализоватьweb appприведет к сбою подписи, и проблема будетAndroid6.2ремонт в).
```
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '', // 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: ['wx-open-launch-weapp'] // 微信开放标签 小程序跳转按钮：<wx-open-launch-weapp>
});
```

пройти черезreadyОбработка интерфейса успешно проверена

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

пройти черезerrorОбработка интерфейса не прошла проверку

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

Получено через внутренний интерфейс запросаconfigТребуемые параметры, после деинициализации добавить на страницу следующие теги

 // 请求 config需要的参数
 postUrl({url: curUrl}).then(res => {
     if (res.code === 0) {
         wx.config({
             debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
             appId: res.data.appId, // 必填，公众号的唯一标识
             timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
             nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
             signature: res.data.signature, // 必填，签名
             jsApiList: ['onMenuShareAppMessage'],
             openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
         });
         wx.ready(function(){})
         wx.error(function(error){})
     }
 })

 // html
  <wx-open-launch-weapp
     id="launch-weapp1"
     username="gh_xxxxxx"
     path="xxxxxx"
     @launch="onLaunch"
     @error="onError"
 >
     <script type="text/wxtag-template">
         <div style="font-size: 14px;margin-top: 10px;text-align: center;">打开小程序</div>
     </script>
 </wx-open-launch-weapp>

(1)username: оригинальный апплет для открытияidкgh_начало;
(2)path: страница апплета, которую нужно открыть (страница должна быть добавлена в конце.html,Например:'pages/index/index.html',иначеIOS Страница апплета не настраивается при переходе)

обработка ошибок

Ошибка ярлыка

Решение: вmain.jsДобавьте следующий код в;

// main.js
Vue.config.ignoredElements = ['wx-open-launch-weapp'];

wx-open-launch-weappсерединаDomНе показывай

токwx-open-launch-weappна этикеткеDomОн будет отображаться только под реальной машиной и не будет отображаться в браузере на компьютере или в инструменте разработчика WeChat;Это приводит к проблемеwx-open-launch-weappУправление контентом и отладка стилей внутри сложны, а данные рендеринга очень хлопотны.

wx-open-launch-weappсерединаDomОтображается, но не реагирует на настоящий машинный щелчок

Если используемый тег позволяет предоставлять слоты, так как стиль шаблона в слоте изолирован от страницы, необходимо уделить внимание определению стиля шаблона в слоте. Необходимо передать шаблоны и стили слотов<template></template>обернуть.дляVueи т. д. рамка просмотра, во избежаниеtemplateДля проблем с конфликтом меток вы можете использовать<script type="text/wxtag-template"><script>заменить, чтобы обернуть шаблоны и стили слотов.

апплет не открывается

Этот метод может открывать только легальные и совместимые мини-программы, и мини-программы были официально выпущены (пробная версия недоступна).

оптимизация

Когда нам нужно передать карту или иметь много динамических данных для рендеринга большогоDomСтруктура, стиль внутри писать очень хлопотно, а также очень неудобно динамически задавать в ней данные, поэтому наш лучший выход - неwx-open-launch-weappвпиши что нибудь.
После моих собственных попыток я отказался отwx-open-launch-weappСтиль написан на китайском языке, потому что это слишком хлопотно, и небольшое изменение нужно развернуть и проверить на реальной машине.

решение

Мы генерируем упаковочный слой, где нам нужно прыгать, и накладываться на упаковочный слой по области нажатой, а затем установить цвет фона для прозрачного. и динамически сгенерированwx-open-launch-weapp

Добавить слой обертывания

<div class="weapp-cover"></div>

// weapp-cover的宽高应该根据点击区域动态设置
.weapp-cover {
    z-index: 90;
    position: absolute;
    bottom: 16px;
    right: 26px;
    // background-color: red;
}

Динамически задайте ширину и высоту слоя обертки

mounted() {
  const weappDom = this.$el.querySelector('.weapp-cover');
  const menuItemDom = this.$el.querySelector('.menu-item');// 点击区域对象
  weappDom.style.width = menuItemDom.clientWidth + 'px';
  weappDom.style.height = menuItemDom.clientHeight + 'px';
}

Динамическая генерацияwx-open-launch-weapp


/**
 * @description: 生成wx-open-launch-weapp
 * @param {Object} info 
 */

/* 
 * @description: info参数
let params={
    width: "", 点击区域宽度
    height: "", 点击区域高度
    ele:"", // 元素ID
    appid:"", // 小程序id号 gh_****
    url:"", // 跳转小程序的页面路径地址 例: pages/home/home.html - (后面必须带上.html后缀 否则IOS跳转时出现小程序页面未配置)
    content:"" // html字符串 例: "<button>点我</button>"
}
*/
export function wx_launch(info) {
      const btn = info.ele.querySelector('.weapp-cover'); //获取元素
      const script = document.createElement("script");// 创建script内容插槽 避免template标签冲突
      script.type = "text/wxtag-template"; // 使用script插槽 必须定义这个type
      script.text = info.content // 自定义的html字符串内容
      const html = `<wx-open-launch-weapp 
                      style="width:${info.width};
                      height:${info.height};
                      display:block;" username="${info.appid}" 
                      path="${info.url}">${script.outerHTML}</wx-open-launch-weapp>`;
      btn.innerHTML = html; // html字符串赋值
}

Увеличьте оценку браузера WeChat

// 判断是否微信环境
function is_weixn() {
    let ua = navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true
    } else {
        return false
    };
};

Добавить оценку версии WeChat

В ходе тестирования было обнаружено, что WeChat у некоторых людей продолжал подсказыватьВаш номер версии не поддерживается, при проверке каждой версии WeChat обнаруживается, что полученные строки версии WeChat несовместимы, некоторые из них содержат три цифры, а некоторые — четыре;

  const wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); // 微信浏览器信息
  // 微信版本号 wxInfo[1]
  // 我们当前正常的版本
  wxInfo[1] = "8.0.1840"
  // 异常版本号
  wxInfo[1] = "8.0.1.1840"

Требования к версии WeChat:7.0.12и выше
Через вышеуказанную проблему мы можем изменитьis_versionметод, сначала определите основной номер версии, и первая цифра больше, чем7возвращаться напрямуюtrue, когда равно7При , определите, больше ли вторая цифра0, больше, чем0возвращаться напрямуюtrue,равный0При оценке того, является ли третья цифра больше или равной12. код показывает, как показано ниже:

  // 判断当前微信版本号是否支持
  function is_version() {
      const wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); // 微信浏览器信息
      // 微信正常版本号 wxInfo[1] = "8.0.1840" (示例)
      // 微信异常版本号 wxInfo[1] = "8.0.1.1840" (示例)
      //进行split转成数组进行判断 ['8','0','1','1840'] (示例)
      const version = wxInfo[1].split(".");
      // console.log('version', version);
      // 判断版本在7.0.12及以上的版本
      if (Number(version[0]) > 7) {
          return true;
      } else if (Number(version[0]) === 7) {
          if (Number(version[1]) > 0) {
              return true;
          } else if (Number(version[1]) === 0) {
              if (Number(version[2]) >= 12) return true;
          }
      }
      return false;
  }

Примечание. Строковый вызовsplitПосле метода числа находятся в массиве в виде строк.

Изменить динамическую генерациюwx-open-launch-weappметод

export function wx_launch(info) {
+    if (!is_weixn()) {
+        return
+    }
+    if (is_version()) {
        const btn = info.ele.querySelector('.weapp-cover'); //获取元素
        ...
+    } else {
+        alert("您的版本号不支持")
+    }

передачаwx_launch

mounted() {
  const weappDom = this.$el.querySelector('.weapp-cover');
  const menuItemDom = this.$el.querySelector('.menu-item');// 点击区域对象
  weappDom.style.width = menuItemDom.clientWidth + 'px';
  weappDom.style.height = menuItemDom.clientHeight + 'px';
  // 动态生成小程序跳转遮罩层
+  wx_launch({
+      ele: this.$el,
+      width: menuItemDom.clientWidth + 'px',
+      height: menuItemDom.clientHeight + 'px',
+      appid: 'gh_xxxx',
+      url: this.miniProgramPath,
+      content: 
+          `<style>
+              .res-cover {
+                  width: ${menuItemDom.clientWidth}px;
+                  height: ${menuItemDom.clientHeight}px;
+              }
+          </style> 
+          <div class="res-cover"></div>`
+  })
}

Суммировать

После получения требований, во-первых, проверить, есть ли соответствующие технические решения, которые могут реализовать такие функции; когда есть технические решения, проанализировать требования, чтобы увидеть, что необходимо реализовать, и проблемы, с которыми можно столкнуться;
Яма, с которой я столкнулся: в обработке ошибок4столкнулись с проблемами,wx-open-launch-weappПроблема со стилем отображения контента и проблема, заключающаяся в том, что данные карты не могут быть динамически отображены и динамически сгенерированы вwx-open-launch-weappизDomНе могу найти и многие другие мелкие проблемы;
После того, как функция реализована, мы можем достичь желаемых ожиданий с помощью некоторых уловок или косвенных методов и не ограничиваться требованиями.

Пополнить

Сюда добавляются дополнительные вопросы
1. URLПерейти к апплету с параметрами, если апплет не получен полностью, прыгайURLСледующим образом:
Что получает апплет"Source=public&token={", посколькуtokenявляется объектом черезJSON.stringifyсгенерированная строка,URLВставки, сгенерированные из строк шаблонаtokenсгенерирован, кавычки усекаются, когда апплет получает его, поэтому нам нужно использовать его в сгенерированной строке типа объектаencodeURIпровестиURLкодирование.
```
  const pathStr = 'pages/detail/speakingDetail.html?Source=public';
  let tokenParams = {};
  const miniProgramUrl = `${pathStr}&token=${encodeURI(JSON.stringify(tokenParams))}`;
```
1. iOSсистемный прыжокURLбудут проблемы, потому чтоiOSправильноencodeURIМетод кодирования не поддерживается, замените его наencodeURIComponentВот и все.(Примечание. После того, как этот путь кодируется, апплет должен декодировать устройство.
2. После перехода к апплету в некоторых случаях может потребоваться закрыть текущую официальную веб-страницу учетной записи.addEventListenerДобавить кlaunchСобытие не может быть запущено;
```
[dom].addEventListener("launch", function (e) {
    //     console.log("success");
    // });
```
Решение: Динамика нужна там, где это необходимоdomДобавить кlanunchсобытие, черезinfoОпределенного параметра суждения достаточноlaunchсобытие плюс соответствующий обратный вызов, который будет выполняться при необходимости.
```
export function wx_launch(info) {
...
 +   var launchScript = document.createElement("script");
 +   launchScript.type = "text/javascript";
 +   if (info.needLaunch) {
 +      launchScript.appendChild(document.createTextNode(
 +           `var btn = document.getElementById('launch-btn');
 +           btn.addEventListener('launch', function (e) {\n
 +               WeixinJSBridge.call('closeWindow'); // info.callback
 +          });`
 +       ));
 +      btn.appendChild(launchScript)
 +   }
 -   btn.addEventListener("launch", function (e) {
 -      console.log("success");
 -   });
```
Примечание:WeixinJSBridge.call('closeWindow')Это закрыть текущий браузер и вернуться в диалоговое окно официальной учетной записи.Он действует только в браузере WeChat.

Ссылаться на

Официальная документация WeChat
Открытая вкладка WeChat — wx-open-launch-weapp (динамическая генерация vue)

Больше отличных статей

Структура спецификации интерфейса разработки HXDM
Продукт: Я хочу такой интерфейс выбора даты и времени! ! !
Как много вы знаете о методах коммуникации JS? JS и многотерминальное взаимодействие приложений
Часто используемые, но игнорируемые методы ES6 (седьмой пункт асинхронности)
Широко используемые, но игнорируемые методы ES6 (четвертый пункт Proxy и Reflect)
Общие, но игнорируемые методы ES6 (первое деструктурирование присваиваний и значений)
Заходите и посмотрите самую полную рукописную реализацию ES6 Promise

«Нравится, добавляете в избранное и комментируете»

❤️Подписывайтесь + лайк + избранное + комментарий + вперед ❤️, оригинальность непроста, поощряйте автора создавать лучшие статьи, спасибо 🙏 всем.