微信小程序开发系列（一）：开发环境构建和微信小app视图设计与开发

由于工作需要，笔者曾参与过一个将微信小程序与SAP系统集成的项目，因此从零开始学习了微信小app的开发知识。在这里，我们通过一系列文章分享我们所学到的东西，希望对相关学习者有所帮助。

第一步：应用微信小程序并建立开发环境

这一步主要是微信小程序的注册和开发环境的建立。

首先，我们需要申请自己的微信小程序：

单击按钮注册。请注意，我们需要使用未注册微信小程序或微信公众号的电子邮件。我使用网易电子邮件。注册后，邮箱将收到一封激活电子邮件。

激活后，您可以进入小程序主信息注册页面。您需要使用身份证号码和手机验证码进行注册。

注册后，您可以进入微信开发者工具。我选择了一个小程序项目：

在开发管理->在开发和设计菜单中，找到我们刚刚注册的微信小程序的ID：复制它，稍后您将使用它。

接下来，下载以下微信开发者工具：

您可以将其视为集成开发环境（IDE）

安装完成后，启动微信开发者工具，要求我们指定一个本地项目目录，并填写微信小程序的AppID。我们在上一步中复制了这个ID。

直接填写，勾选“创建通用快速启动模板”，微信开发者工具将自动为我们创建Hello World版本的微信小程序资源文件。

自动创建的小程序如下图所示。界面显示的是一个简单的Hello World文本。

我们点击上传按钮：

随机维护一个版本号，例如1.0.0，然后单击“上载”。

然后回到小程序管理后台，我们可以看到通过微信开发者工具上传的1.0.0版本的小程序。我们单击提交审核右侧的下拉菜单，然后选择体验版本：

将生成体验版的二维码，然后发送给您的朋友，您可以使用这个小程序。

当你的朋友扫描你手机上的二维码时，你会看到以下界面：小程序标有体验版提示：

点击进入体验版，查看微信开发者工具自动生成的Hello World小程序。

本文的下一步将介绍微信小程序的视图设计原理。

第二步：微信小程序的视图设计

本文重点介绍小程序的视图设计，它是Wxml文件下面所示的pages/index目录中的索引。

我的日常工作是使用名为SAPUI5的前端框架进行前端开发。碰巧，SAP UI5框架还支持以xml格式创建视图（UI），这与微信小程序的wxml非常相似。

做过JSP开发的朋友可以将wxml与JSP文件进行比较。

Wxml源代码：

获取您的化身昵称</button>

<块wx:else>

<；/图像>

｛｛userinfo.nickname｝｝

{{座右铭}}

下面逐一解释每行代码。

第二行：＜view class＝“container”＞声明了一个view元素，css类型为container这个容器类随微信小程序一起提供。如果将其删除，小程序视图的位置将混乱。请参考我下面的测试：

因此，它需要保留。

第三行：＜view class＝“userinfo”＞view元素可以嵌套，这相当于原生HTML中的div元素。这里定义了另一个视图元素。css类是userinfo这个css类不是由微信提供的，而是由我们开发的。它位于wxss中的文件索引中：

第4行：

获取您的化身昵称</button>

定义了一个按钮，标签是Get avatar昵称。

此按钮仅用于表达式！hasUserInfo&；只有当canIUse为真时。

按钮是微信小程序框架提供的组件。该组件是视图层的基本组件，具有一些功能和微信风格。请注意，这里的按钮标记不是本机HTML标记。

您可以在微信开发者上查询组件API

以下两个属性表示：

打开type=“getUserInfo”：单击此按钮后，我们的详细数据