Как активировать мини-программу во внутреннем и внешнем браузерах WeChat

Цель: Отозвать потерянных пользователей, отправив SMS.

Официальный адрес документа

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html

первый шаг

Конфигурация, которую мы в основном используем для этого API, выглядит следующим образом:
**jump_wxa: **информация о целевом апплете перехода. Этот объект содержит два поля.
путь: путь к странице апплета, введенный через код схемы, это должна быть страница опубликованного апплета , и запрос не может быть выполнен
запрос: запрос при входе в апплет через код схемы.

шаг второй

Следует отметить, что запрос должен быть пропущен.Однако, если страница, которую нам нужно перейти, не требует параметров, нам также необходимо настроить запрос.По умолчанию мы заполняем from=sms, а статистика идет из браузера канал.

шаг третий

С серверной частью согласовано, что access_token отличается передачей appKey от внешнего интерфейса, а appKey, из которого передается апплет WeChat, сгенерирует access_token соответствующего апплета.

шаг четвертый

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

шаг пятый

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

let postData = {
  appKey: 'QTSHE_MINI_APP',
  path: 'pages/partdetails/partdetails',
  query: 'partJobId=123456' || 'a=1'
}
this.$axios.post('/qtsWeChat/wechat/qrCode/scheme/info', postData).then((res) => {
  if (res.success) {
    const url = res.data.openlink
    // 将scheme转为我们平台的短链接，否则在安卓手机上无法打开微信小程序，会默认打开浏览器搜索。
    this.$axios.get(`/misc/shortLink/conversion`, {url}).then((res) => {
      if (res.success) {
        this.shortLink = res.data
      }
    })
  } else {
    this.$Message.error('获取失败，请稍后重试')
  }
}).catch((err) => {
  console.log(err)
})

важная точка

Эта ссылка может быть открыта только во внешнем браузере и не может быть открыта во внутреннем браузере WeChat.Чтобы открыть ее во внутреннем браузере WeChat, вам необходимо использовать вкладку открытия WeChat, которая будет подробно объяснена ниже .

Внутренний браузер WeChat вызывает апплет

Официальный адрес документа

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

первый шаг

Во-первых, вам необходимо войти на общедоступную платформу WeChat и войти в «Настройки функций» в «Официальных настройках учетной записи», чтобы заполнить «Доменное имя интерфейса JS». Настроенное нами доменное имя — https://m. qtshe.com , поэтому нам нужно каждый раз его отлаживать.Каждый раз, когда я публикую его в Интернете, чтобы увидеть эффект (большая яма).

шаг второй

Вставьте следующий JS-файл на страницу, которая должна вызывать JS-интерфейс: https://res.wx.qq.com/open/js/jweixin-1.6.0.js, указанный выше тег был добавлен в версии 1.6.0. , ниже эта версия не может быть отображена.

шаг третий

Введите конфигурацию проверки полномочий через интерфейс конфигурации и подайте заявку на необходимые открытые теги, добавьте тег openTagList в wx.config, встроенные два открытых тега wx-open-launch-appWechat h5 вызывает локально установленное приложение, а wx-open-launch-weappWechat h5 вызывает апплет, операция выглядит следующим образом:

window.wx.config({
  debug: false,
  appId: window.g_info.wx_appid,
  timestamp: data.data.timestamp,
  nonceStr: data.data.nonceStr,
  signature: data.data.signature,
  jsApiList: [],
  openTagList: [
    'wx-open-launch-app',
    'wx-open-launch-weapp'
  ]
})

важная точка

Для фреймворков просмотра, таких как Vue, чтобы избежать конфликта тегов шаблонов, вы можете использовать вместо них <script type="text/wxtag-template"></script>шаблоны и стили слотов.
Стили, связанные с макетом и позиционированием на странице, такие как position: fixed; top -100;и т. Д., Старайтесь не писать в узле шаблона слота, пожалуйста, объявите его на метке или его родительском узле;
Для страниц с требованиями CSP вам необходимо добавить белый список frame-src https://*.qq.com webcompt:, чтобы использовать открытые теги на странице в обычном режиме.
Код операции в Vue выглядит следующим образом.Если вам нужно написать стили, лучше всего обернуть div снаружи для написания стилей.Ширина и высота внутреннего содержимого могут быть 100%.Вы можете использовать режим веб-страницы WeChat инструменты разработчика для отладки стиля:

<style>
          img {
            width: 100%;
            display: block;
          }

<изображение источник = "

https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" />

расширять

// 各个端口跳转兼职详情页
jumpToPartJobDetail(partJobId) {
  util.isAliMiniApp().then((res) => {
    if (res) { // 如果是在支付宝小程序环境则打开小程序详情页
      my.navigateTo({
        url: `/pages/partdetails/partdetails?partJobId=${partJobId}`
      })
    } else {
      // 如果是在客户端app环境，则打开原生岗位详情页
      if (util.isAndroidApp() || util.isIosApp()) {
        jsBridge.evokeNormalPartJobDetailPage(partJobId)
      } else if (util.isMiniApp()) { // 微信小程序里则打开微信小程序岗位详情
        wx.miniProgram.navigateTo({
          url: `/pages/partdetails/partdetails?partJobId=${partJobId}`
        })
      } else if (util.isMobile()) {
        // 如果是在手机自带浏览器或者除微信外的app浏览器，统一打开支付宝小程序
        let url = `alipays://platformapi/startapp?appId=2018082861168647&page=pages/partdetails/partdetails&query=partJobId%3D${partJobId}`
        window.location.href = `https://ds.alipay.com/?scheme=${encodeURIComponent(url)}`
      } else { // pc端打开h5的兼职详情页
        window.location.href = `/app/partdetails?partJobId=${partJobId}`
      }
    }
  })
}

План доработки после новой версии 4.11:

Сначала создайте лендинг: https://b.qtshe.com/1DF43E

код показывает, как показано ниже:

import toast from 'toast'
export default {
  created() {
    this.init()
  },
  methods: {
    // 获取微信scheme地址，并且主动跳转一次
    init() {
      this.$axios.post(`https://xxx/你们的接口地址/user/device/scheme`, this.$route.query).then(res => {
        if (res.success) {
          window.location.href = res.data
        } else {
          toast(res.msg)
        }
      }).catch(() => {
        toast('服务器错误，请稍后重试')
      })
    }
  }
}

Принцип: Настройте параметры, которые необходимо перенаправить через адресную строку.После того, как страница h5 получит параметры, она будет преобразована в адрес протокола схемы, начинающийся с weixin://xxxx через интерфейс, и проявит инициативу к местоположению. один раз. Это может гарантировать, что каждый раз, когда пользователь открывает новый адрес схемы, для проблемы верхнего предела 500 000 в день один и тот же пользователь может попробовать те же параметры в течение фиксированного времени и вернуть тот же адрес схемы.

Вышеуказанные ограничения существуют только во внешних браузерах, кроме WeChat, а в контейнере WeChat вышеуказанных ограничений нет .