微信小程序前端界面开发初体验：结构和风格

在结构和风格方面，小程序提供了一些常用的标签和控件，例如：

显示，小程序的主要布局元素程序中，类似于html标签div，可以像控制div一样控制显示。

scroll-view，如果要滚动内容，不需要使用view进行溢出。滚动视图提供了更强大的功能。通过设置参数，可以控制滚动方向、触发事件等。

swiper，滑块展示容器，新手用，不用担心滚动插件选择

图标，小程序给你多种图标供你直接使用

文字，文字，只需按所选内容的组件长度即可。

进度、进度条

按钮，尝试使用小程序提供的一些样式参数

形状和常用表单组件：表单、输入、复选框、标签、选择器、单选、滑块、开关

各种操作反馈、消息框：action-sheet、modal、toast、loading

以及一些媒体组件、视频、音频、图像、canvas等

这个在一些前辈手里有更详细的介绍微信开发文章和文档中都有，这里就不一一介绍了。

那么我们快速运行一个小程序demo吧。

在开发之前，你必须有微信开发者工具，下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

这里我假设每个人都有已经有资格参加内测或公开测试，因为如果没有资格，以下步骤将不起作用。

打开后，你会看到这样的界面。我们选择小程序，输入

现在就可以创建项目了。

输入你得到的appid，你的项目名称和目录，然后就可以打开它了。自己的项目。界面如下：

左侧菜单栏就不说了。中间是编译预览界面。新的开发者工具可以实时更新，无需每次都点击编译。

右侧是你的项目目录，其中pages是你的页面结构目录。每个页面应该有三个文件：js、wxml 和 wxss。如果缺少某些内容，则无法上传预览。

现在就有了app.json文件。 app.json是整个小程序的全局配置。在这个文件中，我们可以自定义包含小程序的页面，自定义小程序窗口的背景颜色，自定义导航栏的样式，自定义默认标题。请注意，不能向该文件添加任何注释。 ，我们来配置一下：

这里比较好的一点是导航栏的背景颜色支持任意颜色自定义。不再有黑白和透明的限制，这仍然很棒。

然后在页面上写Hello World p

保存后，预览界面立即在PC less上更新，包括字体等，毕竟系统不同。），只需选择项目选项

然后点击界面中的预览

下面三个选项比较实用，可以点击。然后会出现一个二维码，可以使用注册的微信ID在真机上预览，如图：

这个简单的小程序demo就完成了。

有一个与app.json配置文件同级的app.js文件，它是小程序的脚本代码。我们可以在这个文件中监控和处理小程序的生命周期函数，声明全局变量，并在各个页面目录下的js中对当前页面进行业务操作。但小程序页面的脚本逻辑运行在JsCore上。 JsCore是没有window对象的环境，所以脚本中无法使用窗口，脚本中也无法操作组件，所以我们一般使用zepto/jquery等类库也是无法使用的。

另一个app.wxss文件。这是一个全局样式，将被所有页面引用。每个项目目录下的wxss都是本地样式文件，不会破坏其他目录。您可以放心地使用样式名称。

WXSS（微信样式表）提供的是一种语言样式，具有CSS的大部分功能，可以认为是CSS的简化版本。
同时为了更适合开发微信小程序，CSS也进行了扩展和修改，直接帮我们做了部分适配工作，比如rpx（响应式像素），可以适配。根据屏幕宽度。 ，指定屏幕宽度为 750rpx。例如，在iPhone6中，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750个物理像素，1rpx = 0.5px = 1个物理像素。

这个太好了，非常方便。你只能理解为通常遵循750设计的开发流程，只不过不需要再做刹车转换和适配工作，这样小程序的视觉设计大部分都是按照750来制作的。

但是！不同的屏幕会存在一些差异，这只能根据每个人的经验来避免和解决，无论是通过媒体提问还是其他方式。

另外，wxss 中不能引用本地资源。谈论这个陷阱让我热泪盈眶。昨晚写小程序demo的时候，没有仔细检查。我一边忙着写作，一边预览。突然，实际设备上的预览停止了。没有警告，而且我不认为问题是由背景图像引起的。折腾了一晚上，终于弄清楚问题出在哪里了，于是兴致勃勃地将所有图片都转成了base64，心想应该不会有问题吧？结果预览上传又失败了。经过一晚上的折腾，我发现小程序对所有包的大小有严格的要求，不能超过1M。最后我把所有静态资源放到腾讯云CDN上才解决问题。问题。所以如果你想写背景图，就需要在网上引用一张图片。这里不建议使用base64！不建议使用base64！不建议使用base64！

其他应用程序一次只能打开5个页面。打开5个页面后，wx.navigateTo无法正常打开新页面。请避免多级交互。

开发过程中一定会遇到一些坑。例如，对于一个简单的开关控件，您可以通过查看元素

轻松了解自己的风格，然后我要做的是与文本进行简单的垂直对齐。从以往的CSS经验来看，只要vertical-align: center就可以轻松解决。本地预览的时候也是这样的

但是在真正的引擎测试的时候，各个Device开始出现偏差了

然后检查了简单的元素后，发现问题是

这个控件有一个空白区域。根据设备的不同，屏幕尺寸不同，空白区域的大小也不一致。

由于时间限制，可检索的文档有限。看来，由于标准线高度的限制，我不得不求助于经验丰富的司机的狡猾本性。我可以控制行高或溢出来去掉多余的部分，最终拥有一个真机界面。显示相当统一

如果要按照像素级设计来开发小程序，还是需要控制控制上的细小差异（可能是我用错了方法。或者误解了，因为文档太多了，以后开发者多了大家就会有更清晰的认识。）

还有一个遇到的问题，就是小程序默认图片的渲染。这是通过工具

查看默认图片样式

经过多方查询，发现小程序图片是根据背景图片实现的，所以所有图片都会得到初始宽高320 240，并不能通过自动复位，并且只能以一定的值再次写入。

幸运的是，微信提供了3种缩放模式和9种裁剪模式，可以满足大多数场景下的图像控制：

例如原图：

scaleToFill模式不保持长宽比❀图像，使图像适合

aspectFit
保持图像的宽高比和图像尺寸，以便图像的长边能够完全显示

aspectInsi
保持图像的宽高比和比例，以便仅显示图像的长边图像的短边可以完全显示。只显示图像底部区域

center
不调整图像大小，仅显示中心区域

left
不显示图像大小，仅显示图像左侧区域

右

无图像尺寸，仅显示图像右侧区域

左上
无图像尺寸，仅显示图像左上区域

右上
不放大图片，只显示图片右上区域

左下
不放大图片，只显示图片左下区域

右下
不调整图像大小，只显示图像的右下区域

如果你对图像设计的显示方式有更严格的要求，可以尝试使用一些特殊的方法来控制图像的宽度和高度。

还有小程序控制按钮：

原来的样式是没有边框的，所以我尽力改写成无边框无背景的设计也没能成功。最后，为了满足设计理念，对于一些语义上转化为按钮的元素，我使用了其他控件的其他元素来实现，比如这个界面中提交图片的按钮：

但是我没有。稍后才知道该按钮的样式是根据开发人员工具设计的。调试中(┬＿┬)后就看不到这个了...

除了这次UI开发经验之外，大家也知道小程序不是为显示而生的，不适合纯粹的显示。 。主要是创建一些功能性的应用程序。

微信提供的小程序现有的SDK和DEMO不支持服务器，依赖开发者逐模块构建服务；必须通过HTTPS完成与服务器的通信，依赖开发者自行完成证书申请和部署；认证过程的安全性要求较高，开发者很难高效、安全地完成会话管理。提供了WebSocket长连接通信的客户端API，但缺乏服务器端的支持，所以开发者自己实现还是有一定难度的。它还具有快速部署、流量突然增加的特点，这就要求架构具有弹性扩展的能力。