＜wx-open-launch-weapp＞微信公众号H5激活微信小程序躺坑日记

前言

提示：这里可以添加本文要记录的大概内容：

业务需求需要在微信公众号里面唤起微信小程序，故研究完毕后做以下笔记记录，目前项目环境为 uni-app 脚手架创建，直接生成H5页面

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML结构 + 样式 + 逻辑

代码如下（示例）：

<template>
  <view class="test-container">
    
    <text style="font-size: 25px;">这里面写自己想要的样式text>
    <wx-open-launch-weapp
        :id="`launch-btn`"
        style="width: 100%;
               height: 100%;
               position: absolute;
               z-index:999;
               top: 0;
               left: 0;
               bottom:0;
               right:0;
               opacity: 0.3;
               background: #3A85E2;"
        username="跳转小程序的appid"
        path="跳转小程序页面路径.html?参数1=&参数2="
        env-version="跳转小程序环境"
        @launch="onlaunch" @error="onerror" @ready="onReady">
      <script type="text/wxtag-template">
        <div style="position: absolute;z-index:999; top: 0; left: 0;bottom:0;right:0;width: 100%;height: 100%;
               opacity: 0.3;
               background: #4cd964;" />
      script>
    wx-open-launch-weapp>
  view>
template>

<script>
export default {
  name: "testpage",
  methods: {
    onlaunch() {
      console.log('onlaunch---')
    },
    onReady() {
      console.log('开放标签加载成功')
    },
    onerror() {
      console.log('跳转失败')
    }
  }
}
script>

<style scoped lang="scss">
.test-container {
  position: relative;
  width: 100%;
  height: 170rpx;
  border: 1px solid red;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

二、内容介绍

介绍如下（示例）：

• 小程序唤起标签官方文档：小程序唤起标签官方文档
• 里面的内容及样式可以直接把背景色和透明度删掉，包裹标签的元素可以是自己的业务场景的DOM节点样式，只需要平铺占满自己所在的DOM节点的位置即可。不然就会出现没有内容值

二、结果内容

结果如下（示例）：

---

总结

1. 需要获取微信公众号的配置项
2. 将自己的样式和结构写好，之后在套入 wx-open-lanch-weapp 标签，可静态或者动态
3. 如果需要看到完整结构， wx-open-lanch-weapp 一定要按照上面的css 样式来填充整个元素，否则不可见
4. 激活 wx-open-lanch-weapp 标签的前置条件，

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});
1
2
3
4
5
6
7
8
9