互联网上有许多教程，但是无法避免特定的坑。在这里，我们将介绍如何以图形和文本的形式实现静态H5跳动小程序。
1。首先发布官方开发文件。
1。官方开发文件参考：
官方文档仅提供一个关键代码，但我没有说如何上传静态文件以及如何上传云功能。
2.自己自己的期货，鲍勃，终于在浏览器中拉起了这个小程序
我没有提及工作令。没有人问一个问题。这是进行微信发展的最大事情。 之后，我搜索了很长时间，发现了一种相对简单且可行的方法。如果您没有使用过云功能，则可以在这里参考本文。
关于验证，此示例可以在微信的内部和外部环境中调整微信小组编程。
3。需要准备的工具和材料
微信开发人员工具，非个人主题和认证（微信认证）小程序。
4。操作步骤：
1。开放云开发服务，云开发权限设置，打开静态网站功能：
1-1开放云开发服务，微信开发人员工具云开发
创建云开发环境，设置环境名称和付费方法（默认预付费，您可以选择付款，有一定的免费配额，无论是个人发展，调试还是公司项目使用，请支付金额和付款）
开口成功后，在概述接口的右侧，您可以看到环境ID，记住此ID，并且H5页面将在以后使用。
1-2设置云开发权限，设置 - 通用设置，而不是在用户访问云资源权限设置中登录，请查看未经许可的用户访问权限：
1-3打开镜头网站，菜单栏“更多” - 静态网站开放
扫描代码以确认初始化时，您可能需要一些时间，无需等待，如果您成功打开它，将会发出短信通知。您可以首先按照步骤进行操作。
（打开一个静态网站需要管理员扫描代码）
2。创建云开发小程序，设置云开发环境记录用户访问云资源权限设置
2-1创建云开发小程序：
如果小程序已经是云开发服务，则可以直接使用。如果没有，请创建一个云开发小程序。
该小程序仅用于上传云功能。您需要填写需要打开云开发功能的小程序，也就是说，即可跳至H5的迷你程序。此外，后端服务应选择微信云开发。至于模板，您可以随便选择它。只是为了实现跳跃小程序的功能，它只是由云功能上传。上传后它是没有用的（除非您要更新云功能）。
创建云开发小程序后，您可以看到有两个目录。目录是我们创建的目录，并上传了云功能。
2-2设置云开发环境：
右键单击目录，设置当前环境，选择前面创建的云环境
3。创建一个云功能
请注意，这里的创建云功能不是由云开发控制台直接创建的，需要通过小程序创建和部署它。尽管也可以直接创建控制台，但不能直接使用。不要问我怎么知道，只需踩这坑。
3-1下载官方云功能示例代码（单击以下载
），源代码目录如下：
3-2将目录中的文件夹复制到 项目目录：
3-3编辑 /.js文件，将功能中的路径更改为小程序的页面路径。
4。安装依赖性
将鼠标放在目录上，右键 - 单击鼠标，在快捷菜单中选择“在构建的-in终端中打开”，然后运行NPM安装依赖项
如果内部不打开，则可以将外部终端用于NPM命令下载依赖项。
5。上传部署云功能：
在目录上，单击右鼠标按钮，选择“上传和部署：云安装依赖关系（不上传），
部署后，打开云开发控制台，云功能，您可以看到前面创建的云功能：
等待几秒钟，可以成功部署云功能。
6。修改云功能权限：
云开发控制台-开发-开发权，自定义安全规则，单击右侧的“修改”
单击以允许所有用户访问，以便所有用户都可以通过H5豁免评估以调整小程序
7。写和上传H5静态页面到云开发环境
编辑前面下载的H5/Jump-mp.html文件，以修改标记为真实内容的所有位置。示例代码如下：
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: false, // 调试时可开启 appId: 'wxad8exxxx', // 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: 'wxad8exxxx', // // 资源方环境 ID resourceEnv: 'cloud-mall-2gs0uxxxx', // }) 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 }