云开发静态网站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

`

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        
正在打开 “填入你的小程序名称”...
 
        
          
          打开小程序
        
      
      

        
点击以下按钮打开 “填入你的小程序名称”
 
        
         
          
        
      
      

        
请在手机打开网页链接
      
    
  

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