H5跳转到微信小程序

🌸 Date: 2021-6-8

👋 2021-6-9 补充app跳转微信小程序，注意点

🌸 2021-6-15 简单补充微信内部浏览器跳转小程序

微信内部浏览器跳转小程序

1、引入微信js包

在index.html中引入最新的js包

 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>

2、申请开放标签

通过config接口注入权限验证配置并申请所需开放标签 （开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的）

 wx.config({
  // debug: true, // 调试时可开启
  appId: 'appId', 
  timestamp: 0, // 必填，填任意数字即可
  nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
  signature: 'signature', // 必填，填任意非空字符串即可
  jsApiList: ['wx-open-launch-weapp'], // 安卓上必填一个，随机即可
  openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxx" path="/pages/home/home">
  <template>
    <div class="btn" >打开微信小程序</div>
  </template>
</wx-open-launch-weapp>

判断是否是微信浏览器

var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
console.log(ua)
if (ua.match(/MicroMessenger/i) == "micromessenger") {
  //在微信中打开
}

• pc端

mozilla/5.0 (linux; android 6.0; nexus 5 build/mra58n) applewebkit/537.36 (khtml, like gecko) chrome/90.0.4430.212 mobile safari/537.36

！！注意

• username不是appid是以gh开头的，是微信小程序的原始id,微信鉴权是公众号的appid
• 还有我们跳转的路径要带.html
• 本地会报组件未注册的错 可忽略
• 微信网页模拟器也不可以 需要在真机上才可展示出来 （若未展示出来按钮 检查自己config注入是否成功）

---

关于wx-open-launch-weapp样式

• 在开放标签中，写宽100%是可以生效的，但是高却不是那么容易生效。

• 在开放标签中，<script>标签中要加入<div style="position: absolute; "/>,这一块是触发区域，记得在这个div写样式(主要是让高生效)。

• 如果害怕写不好样式，可以在外面把样式写好，这个直接opacity: 0;

遇到的注意点

在开放的过程中，需要注意点：

1、 通过config接口注入权限验证配置并申请所需开放标签

• 微信鉴权必须得成功，注意vue中hash和history模式配置的区别

• 微信鉴权成功，肯定是部署到服务器并且真机的情况下，才能调试，否则，肯定失败

2、 vue中，template标签冲突，会被忽略。

<wx-open-launch-weapp ref="launchbtn" id="launch-btn" username="gh_xxxxx" path="/pages/home/home.html">
  <template>
    <div style="width: 100px;height: 100px;background: green;">打开微信小程序</div>
  </template>
</wx-open-launch-weapp>

以上代码会报：The slot <template> or <script type="text/wxtag-template"> of <wx-open-launch-weapp> is missing

解决办法：动态渲染，代码如下

const createdTag = () => {
  let script = document.createElement('script');
  script.type = 'text/wxtag-template'
  // 问题：行内样式，宽高不生效
  script.text = '<div style="background: rgba(52, 120, 245, 1);width: 5.38rem;height: .96rem;line-height: .96rem;text-align: center;border-radius: .2rem;">前往测试</div>' 
  document.getElementById('launch-btn').appendChild(script);
}

3、 wx-open-launch-weapp样式不生效

在开发过程中，发现放在wx-open-launch-weapp标签里面的样式根本不起作用，里面引入的图片也不生效；这里的解决思路是，用一个透明的div，在div填充些文本，悬浮在需要点击触发跳转的模块上，然后用开放标签包裹。这样就避免了样式问题。

代码如下：

<div class="footer-btn fx-row">
  <div class="btn tx-center tx-28 tx-ff bg-8f5 b-r-20 m-auto" @click="goTest">前往测试</div>
  <!-- wx-open-launch-weapp 标签只能在微信鉴权后，微信浏览器中使用 -->
  <!-- 如果是微信环境： wx-open-launch-weapp标签盖在 btn 上-->
  <!-- 不是-- 则会使用goTest方法跳转 -->
  <wx-open-launch-weapp v-if="isWX" id="launch-btn" :username="username" :path="goPathUrl" style="display: block;"></wx-open-launch-weapp>
</div>
<script>
// 动态创建script里的标签及内容
const createdTag = () => {
  let script = document.createElement('script');
  script.type = 'text/wxtag-template'
  // 2021-9-28 以下代码，在按钮边边角角，可能会触发不到，所以，优化下
  // script.text = '前往测试' // 文字随便写，行内样式不会生效
  // 优化：这儿才是按钮的触发区域，用绝对定位，可以撑起触发区域的高度
  script.text = '<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;opacity: 0;">前往测试</div>'
  document.getElementById('launch-btn').appendChild(script);
}
</script>
<style>
/* 样式写的比较多，也没有进行筛选 */
#launch-btn{
  color: #fff;
  width: 5.38rem;
  height: .96rem;
  line-height: .96rem;
  text-align: center;
  margin: auto;
  background: rgba(52, 120, 245, 1);
  border-radius: .2rem;
  word-break: break-all;
  word-wrap: break-word;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}
</style>

4、点击按钮，提示：信息不完整，无法启动

最有可能的原因是 usename 或者是跳转路径错误

解决办法：

必须要先加载wx.config再写wx-open-launch-weapp标签

因为二者是异步的，如果直接在html里写wx-open-launch-weapp标签，会因为wx.config还没执行导致信息不完整

5、单双引号嵌套问题

双引号内不能包含双引号，单引号内不能出现单引号

改成

 let html = `<wx-open-launch-weapp id="launch-btn" username='${VITE_APP_MINIPROGRAME_GHOST_ID}' path="${goPathUrl}">
    ${script.outerHTML}
  </wx-open-launch-weapp>`

  // VITE_APP_MINIPROGRAME_GHOST_ID = 'gh_xxxxx'

6、跳转之后显示页面不存在

跳转之后显示页面不存在，请检查下path的路径结尾是否写上了.html

这个，我暂时没有去验证，我是直接加的.html后缀，可以正常跳转

外部浏览器跳转小程序

检测【QQ、抖音、钉钉、企业微信、淘宝、支付宝、京东】是否可以成功跳转微信小程序

可以通过微信提供的链接测试是否可以正常跳转

https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

!! 注意

• 钉钉 6.0.13无法跳转微信小程序
• 微博无法跳转
• 支付宝app中，跳转微信小程序会长按复制链接，打开浏览器搜索，无法正常跳转小程序

---

微博内打开的h5，跳转到微信小程序，没有反应

以上都是当时2021年开发做的笔记。