云开发静态网站H5跳转小程序（记录过程）以及云环境共享（同一主体）_云开发静态托管实现 h5 跳转小程序流程

作者：Guff_9hys | 2024-07-20 23:53:24

踩

云开发静态托管实现 h5 跳转小程序流程

需求：老板要求是在H5网页端，无论是在微信浏览器还是在微信外部浏览器都可以打开这个H5之后，然后跳转到小程序上。查看了微信相关的文档，发现H5端跳转小程序是有两种方式：
一：微信内网页跳转小程序官方文档

二：静态网站H5跳转小程序：微信外部浏览器和内部浏览器都可以跳转小程序。官方文档

静态网站H5可以解决老板的这个需求。今天我们就主要来说静态网站H5跳转小程序。

1.新建一个小程序，开通云开发：现在云开发没有免费的了，都是按量付费，基础的一个月的费用是19.9.
这里的环境名称：写一个自己需要区分记忆的名字
在这里插入图片描述

2.云函数
云函数微信给写好了，但是，还有很多其他的问题，我们需要自己配置。
1.新建一个专门写云函数的文件夹：我这里自己写的是function的文件夹
在这里插入图片描述

2.在manifest.json文件夹里面填写云函数的文件夹地址 “cloudfunctionRoot”
在这里插入图片描述

3.在function里面直接把维信给我们写好的public函数复制过来就可以
同时我们要修改一下云函数里面的我们需要修改的内容，把path修改为我们自己需要页面

在这里插入图片描述

4.鼠标点钟public，点击右键，选择使用命令行打开所在目录，在命令行执行： npm install 命令，安装所需依赖。

在这里插入图片描述

到这一步，我们运行我们的小程序，发现在微信开发者工具中根本找不到functions这个文件，也没有云函数。原因是因为我们这个functions是我们自己加上去的，并不属于uniapp默认的文件夹里面的内容。所以，我们这里通过webpack包管理工具的复制插件将 /functions 复制到项目包中（以下解决方案是在网上的资料后得出来的解决方案。）

1.在根目录下面新建vue.config.js文件
vue.config.js里面的内容：里面的from：path.join(__dirname,‘functons’) 这个文件夹的名字修改成自己的文件夹名字就可以


const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
 
module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.join(__dirname, 'functions'),
          to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'functions')
        }
      ])
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.找到小程序的根目录，使用命令窗口打开根目录执行以下命令

npm install -save copy-webpack-plugin

这个时候我们就可以在unpackage文件夹看到functions了，然后我们重新运行小程序项目
在这里插入图片描述

3.运行小程序项目到微信开发者工具，点击右键选择环境，然后，点击右键上传云函数

在这里插入图片描述

云函数结束，然后我们配置静态H5，

1.打开云开发
1

在这里插入图片描述

2.选择静态网站 并开通
1

在这里插入图片描述

3.上传文件，现在官方提供给的文件，我们修改成自己的即可
1

<html>
  <head>
    <title>打开小程序</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <script>
      window.onerror = e => {
        console.error(e)
        alert('发生错误' + e)
      }
    </script>
    <!-- weui 样式 -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"></link>
    <!-- 调试用的移动端 console -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
    <!-- <script>eruda.init();</script> -->
    <!-- 公众号 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- 云开发 Web SDK -->
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
    <script>
      function docReady(fn) {
        if (document.readyState === 'complete' || document.readyState === 'interactive') {
          fn()
        } else {
          document.addEventListener('DOMContentLoaded', fn);
        }
      }

      docReady(async function() {
        var ua = navigator.userAgent.toLowerCase()
        var isWXWork = ua.match(/wxwork/i) == 'wxwork'
        var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
        var isMobile = false
        var isDesktop = false
        if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
          isMobile = true
        } else {
          isDesktop = true
        }

        if (isWeixin) {
          var containerEl = document.getElementById('wechat-web-container')
          containerEl.classList.remove('hidden')
          containerEl.classList.add('full', 'wechat-web-container')

          var launchBtn = document.getElementById('launch-btn')
          launchBtn.addEventListener('ready', function (e) {
            console.log('开放标签 ready')
          })
          launchBtn.addEventListener('launch', function (e) {
            console.log('开放标签 success')
          })
          launchBtn.addEventListener('error', function (e) {
            console.log('开放标签 fail', e.detail)
          })

          wx.config({
            // debug: true, // 调试时可开启
            appId: '小程序 AppID', // <!-- replace -->
            timestamp: 0, // 必填，填任意数字即可
            nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
            signature: 'signature', // 必填，填任意非空字符串即可
            jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
            openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
          })
        } else if (isDesktop) {
          // 在 pc 上则给提示引导到手机端打开
          var containerEl = document.getElementById('desktop-web-container')
          containerEl.classList.remove('hidden')
          containerEl.classList.add('full', 'desktop-web-container')
        }  else {
          var containerEl = document.getElementById('public-web-container')
          containerEl.classList.remove('hidden')
          containerEl.classList.add('full', 'public-web-container')
          var c = new cloud.Cloud({
            // 必填，表示是未登录模式
            identityless: true,
            // 资源方 AppID
            resourceAppid: '小程序 AppID', // <!-- replace -->
            // 资源方环境 ID
            resourceEnv: '云开发环境 ID', // <!-- replace -->
          })
          await c.init()
          window.c = c

          var buttonEl = document.getElementById('public-web-jump-button')
          var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
          try {
            await openWeapp(() => {
              buttonEl.classList.remove('weui-btn_loading')
              buttonLoadingEl.classList.add('hidden')
            })
          } catch (e) {
            buttonEl.classList.remove('weui-btn_loading')
            buttonLoadingEl.classList.add('hidden')
            throw e
          }
        }
      })

      async function openWeapp(onBeforeJump) {
        var c = window.c
        const res = await c.callFunction({
          name: 'public',
          data: {
            action: 'getUrlScheme',
          },
        })
        console.warn(res)
        if (onBeforeJump) {
          onBeforeJump()
        }
        location.href = res.result.openlink
      }
    </script>
    <style>
      .hidden {
        display: none;
      }

      .full {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

      .public-web-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .public-web-container p {
        position: absolute;
        top: 40%;
      }

      .public-web-container a {
        position: absolute;
        bottom: 40%;
      }

      .wechat-web-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .wechat-web-container p {
        position: absolute;
        top: 40%;
      }

      .wechat-web-container wx-open-launch-weapp {
        position: absolute;
        bottom: 40%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .desktop-web-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .desktop-web-container p {
        position: absolute;
        top: 40%;
      }
    </style>
  </head>
  <body>
    <div class="page full">
      <div id="public-web-container" class="hidden">
        <p class="">正在打开 “填入你的小程序名称”...</p> <!-- replace -->
        <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()">
          <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>
          打开小程序
        </a>
      </div>
      <div id="wechat-web-container" class="hidden">
        <p class="">点击以下按钮打开 “填入你的小程序名称”</p> <!-- replace -->
        <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
        <wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace -->
          <template>
            <button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button>
          </template>
        </wx-open-launch-weapp>
      </div>
      <div id="desktop-web-container" class="hidden">
        <p class="">请在手机打开网页链接</p>
      </div>
    </div>
  </body>
</html>
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

`
重点：我们修改的部分是：appid 修改成我们自己要跳转的小程序的appid，resourceAppid也是我们要跳转小程序的appid，resourceEnv 就是我们开通云开发的这个环境id
wx-open-launch-weapp 里面的username 和path 修改成我们自己小程序的那个原始id和我们小程序跳转的页面路径

在这里插入图片描述

以上上传到静态网站中，我们点击HTML后面的详情，可以看到一个下载地址，我们可以先暂时通过这个地址查看我们跳转的效果。

在这里插入图片描述

最后：关于云环境共享：
共享的前提是：小程序是同一主体下的非个人小程序。（同一个公司的资质注册的小程序），否则，无法共享环境。
1.开通云环境共享：在云开发-设置-拓展功能-环境共享 -点击开通

2.点击更多--环境共享--添加共享，填写要共享的appid（必须是同一资质下的小程序，否则无法共享，下面会有提示）
1

以上就是所有的步骤了，借鉴了网上其他的优秀大佬的文章，如果我这个方案大家没有成功，可以看一下大佬的文章

https://developers.weixin.qq.com/community/develop/article/doc/000204bd4d41a879112edbae354c13

https://blog.csdn.net/wang1099970453/article/details/111239868

https://blog.csdn.net/hlc162181/article/details/113503220?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166985901916782425196583%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=166985901916782425196583&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-6-113503220-null-null.142^v67pc_rank_34_queryrelevant25,201^v3add_ask,213^v2t3_esquery_v2&utm_term=uniapp%20%E9%9D%99%E6%80%81H5%E8%B7%B3%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F&spm=1018.2226.3001.4187

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/858897