位置：首页-资讯-移动开发

如何在微信内外部浏览器唤起小程序

2023-09-10 14:12

短信预约 -IT技能 免费直播动态提醒

目的：通过发送短信召回流失用户。

官方文档地址

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

步骤一

该API我们主要用到的配置如下：
**jump_wxa：**跳转到的目标小程序信息。该对象内包含两个字段。
path：通过scheme码进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带query
query：通过scheme码进入小程序时的query。

步骤二

需要注意的是，query必传，然而如果我们需要跳转的页面不需要参数，也需要配置上query，默认我们填写的是from=sms, 用于统计是从浏览器渠道来的。

步骤三

与后端约定access_token 通过前端传递appKey进行区分，传哪个微信小程序的appKey 就生成对应小程序的access_token。

步骤四

支持设置scheme的过期时间，默认永久，我们的应用场景很少，暂不详说。

步骤五

代码里操作如下，由后端聚合参数信息。

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)})https://blog.csdn.net/qq_37215621/article/details/

注意点

该链接只支持在外部浏览器打开，微信内部浏览器访问是无法打开的，微信内部浏览器打开需要使用微信的开放标签，下面详说。

微信内部浏览器唤起小程序

官方文档地址

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

步骤一

首先需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，该域名我们配置的是https://m.qtshe.com, 所以导致我们调试的时候需要每次都发布到线上看效果（大坑）。

步骤二

在需要调用JS接口的页面引入如下JS文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js，1.6.0版本内才增加了上述标签，低于该版本的都无法显示。

步骤三

通过config接口注入权限验证配置并申请所需开放标签, 在wx.config里增加openTagList标签，内置两个开放标签 wx-open-launch-app 微信h5唤起本地已经安装的app，以及 wx-open-launch-weapp 微信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'  ]})https://blog.csdn.net/qq_37215621/article/details/

注意点

对于Vue等视图框架，为了避免template标签冲突的问题，可使用进行代替，来包裹插槽模版和样式。
页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；
对于有CSP要求的页面，需要添加白名单frame-class="lazy" data-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。
Vue里操作代码如下，如果需要写样式，最好是外部包一个div进行样式编写，内部的内容宽高100%即可，调试样式可使用微信开发者工具的网页模式：