基于CloudIDE的We码小程序开发

您在体验过程中有任何疑问，都可以在此留言反馈>>

介绍

华为云CloudIDE是面向软件开发者的云端集成开发环境服务，通过浏览器访问即可实现环境获取、代码编写、调试运行、配置管理代码入库、环境访问等能力，同时支持插件扩展。

• 随时：CloudIDE能即时获取开发环境，计算和存储资源按需配置，对开发语言的支持能做到一键配备;
• 随地：CloudIDE提供移动化开发能力，不论身在何处都可以通过连接互联网络的终端设备访问；
• 随心：CloudIDE对本地资源无依赖，仅需一个可上网的浏览器，就可以实现编码、调试、运行你的代码。

本指南将指导开发者通过华为云CloudIDE服务，快速构建一个可以在 WeLink 上访问的We码小程序。通过本指南您将学习到：

• 创建一个We码小程序的云开发环境

• 在云环境开发和调试We码小程序

• 预览和发布We码小程序

• 释放资源以节约资金

1. 准备工作

1.1 注册和安装WeLink

首先，注册和安装WeLink。为了方便开发者，我们创建了一个虚拟组织“华为开发者大会2020（Cloud）”，通过手机扫描下面的二维码直接注册加入，

并根据提示安装和登录WeLink：

1.2 创建WeLink应用

登录WeLink开发者后台，创建一个自己的应用，如下图：

2. 创建We码小程序开发环境

从浏览器 登录CloudIDE，如果提示未开通则单击“OK”跳转至开通页面完成服务开通，成功登录后的页面如下：

单击“新建实例”，填写相关信息并选择 “NodeJS” 技术栈，如下图：

在选择项目模板时，选择“wecode-react-sample” 工程，如下图：

点击“确定”，CloudIDE实例启动，浏览器会自动跳转到IDE实例。

3. 开发和预览We码小程序

3.1 登录WeLink

CloudIDE实例启动后，会自动加载 “WECODE TOOLKIT” 插件，第一次启动时会要求用户登录，如下图：

注：在手机上安装WeLink后，可以使用WeLink扫描图弹出的二维码实现WeLink账号登录。

登录成功后，WeCode Toolkit插件显示登录名，如下图：

3.2 编码

使用CloudIDE实例可以编写程序逻辑代码，实现代码编写、语法高亮、自动补齐、语法校验、命令行访问等各种操作，如下图：

3.3 调试

点击 “WeCode Toolkit” 插件上的 “Debug” 按钮，等待WeCode应用完成自动编译：

自动编译完成后，debug端口启动，这时候可以看到用于访问运行We码实例的二维码：

通过IDE提供的“Port External Access”插件，点击“Access”按钮后，会自动启动基于浏览器的仿真窗口，按F12可以启动浏览器调试界面，如下图：

3.4 预览

程序开发完毕，通过点击 “Preview/Upload” 按钮，CloudIDE中开发的We码小程序会被上传到临时仓库，并可以预览。点击“Preview/Upload”按钮，从“My Apps:” 列表中，选择刚刚新建的WeLink应用，并点击“Attach”按钮，如下：

使用手机端的WeLink应用扫描出现的二维码，即可实现使用WeLink打开预览这个WeCode小程序。

怎么样，看到效果了吧。

4. 发布We码小程序

可以把编写调试完毕的We码小程序上传发布到WeLink应用市场（这样手机上的WeLink应用可以搜索并安装这个已经发布的We码小程序）。点击 “Upload“按钮，把We码小程序发布到云端的发布仓库，准备正式发布：

点击应用名称（图中是：ZHAOYANPEKAPP1），进入正式发布页面：

点击“提交审核”，并在弹出的窗口内上传审核材料（随便选个文件啦），如下图：

正式提交后，你的第一个We码小程序就在正式发布的路上啦。

5. WeLink安装验证

如果该发布申请被正式批准，那么你的We码小程序就可以正式发布到WeLink应用市场了。打开手机上的WeLink应用，在 ”我的应用“ 中搜索刚刚开发上传发布的We码小程序，选择并安装。这样，我们就可以在在手机上操作和验证开发的We码小程序。（在本实验中您加入的是虚拟组织，所以该审核可能不会批准，暂时无法体验从应用市场安装，如果您注册自己的企业组织，则可以体验正式发布过程）

6. 释放资源

进入CloudIDE服务页，删除刚刚创建的CloudIDE服务实例，可以停止计费。

7. 恭喜你

至此，你已经成功完成此Codelab教程。恭喜你知识更进一步，获得以下技能：

• 如何注册WeLink开发者身份并创建自己的第一个应用；
• 如何用华为云CloudIDE服务创建云端的We码小程序开发环境；
• 如何在CloudIDE实例内编码、调试、预览We码小程序；
• 如何在手机侧的WeLink上安装和验证开发的We码小程序；
• 如何清除资源消耗以节约资金。

8. 参与互动赢好礼

请保存完成截图，参与华为云DevCloud闯关活动瓜分160万码豆。