在结构和风格上，小程序提供了一些常用的标签和控件，例如：文章来自菜鸟学院-

View是小程序的主要布局元素，类似于HTML标签的div。 您还可以像控制 div 一样控制视图。 文章来自新秀学院——

-view，如果你想滚动内容，不需要使用view来做到这一点。 -view提供更强大的功能。 通过调整参数，可以控制滚动方向、触发事件等，文章来自菜鸟学院-

文章来自新秀学院——

文章来自新秀学院——

，滑块视图容器，对于新手来说，再也不用担心选择哪个滚动插件了。 文章来自新秀学院——

文章来自新秀学院——

图标，小程序提供了多种图标供您直接使用。 文章来自新秀学院——

文章来自新秀学院——

文章来自新秀学院——

文本文本，是唯一可以长按选择的组件。 文章来自新秀学院——

、进度条文章来自菜鸟学院——

文章来自新秀学院——

按钮，尝试使用小程序提供的几个样式参数。 文章来自新秀学院——

文章来自新秀学院——

文章来自新秀学院——

表单及常见表单组件：表单、、、、、、，文章来自菜鸟学院-

文章来自新秀学院——

各种操作反馈、消息提示框：-、、、文章来自菜鸟学院-

文章来自新秀学院——

文章来自新秀学院——

文章来自新秀学院——

文章来自新秀学院——

还有一些媒体组件、、、等等。文章来自菜鸟学院-

这些东西在几位前辈的文章和微信的开发文档中都有比较详细的介绍，这里就不一一介绍了。 文章来自新秀学院——

接下来我们快速跑一下一个小程序的demo。 文章来自新秀学院——

开发之前必须有微信开发者工具，下载地址：文章来自菜鸟学院-

这里我假设大家都已经获得了内测或者公测的资格，因为如果没有获得的话，下面的步骤是无法进行的。 文章来自新秀学院——

文章来自新秀学院——

打开后，你会看到这样的界面。 我们选择小程序进入菜鸟学院的文章——

文章来自新秀学院——

这时候就可以创建一个项目了。 文章来自新秀学院——

文章来自新秀学院——

填写你得到的内容，你的项目名称和目录，然后你就可以打开你的项目了。 界面如下：文章来自菜鸟学院-

文章来自新秀学院——

左侧菜单栏不说，中间就是编译好的预览界面。 新的开发者工具已经可以实时更新，不需要每次都点击编译。 文章来自新秀学院——

右侧是你的项目目录，也就是你的页面结构目录。 每个页面必须有三个文件：js、wxml和wxss。 如果缺少任何一项，预览将无法上传。 文章来自新秀学院——

然后是当前的app.json 文件。 app.json是整个小程序的全局配置。 在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏样式，配置默认标题。 请注意，不能向该文件添加任何注释。 ，我们简单配置一下：文章来自菜鸟学院-

文章来自新秀学院——

这里更好的是背景颜色支持自定义任何颜色。 不再有黑白透明的限制，还是很不错的。 文章来自新秀学院——

然后我们就干脆在新秀学院的p页写一篇文章——

文章来自新秀学院——

保存后，预览界面立即刷新。 文章来自新秀学院——

文章来自新秀学院——

如果要真机测试（我个人建议真机测试，尤其是上下游预览的时候，PC上的风格还原很差，包括字体等，毕竟系统不一样。） ，你只需要选择项目选项 From -

文章来自新秀学院——

然后点击界面预览菜鸟学院的文章——

文章来自新秀学院——

以下三个选项比较实用，可以根据需要进行选择。 然后会弹出一个二维码，可以使用注册的微信账号在真机上预览，如图： 文章来自菜鸟学院 -

文章来自新秀学院——

这样一个简单的小程序demo是完全可以运行的。 文章来自新秀学院——

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

另一个app.wxss文件，这个是全局样式，会被所有页面调用。 每个项目目录下的wxss是本地样式文件，不会污染其他目录。 您可以放心使用样式名称。 文章来自新秀学院——

他提供的WXSS()是一种样式语言，具有CSS的大部分特性，可以看作是CSS的简化版本。

同时，为了更加适合开发微信小程序，对CSS也进行了扩展和修改，直接帮助我们做部分适配工作。 例如，它的rpx()可以根据屏幕宽度进行适配。 屏幕宽度指定为 。 如上，屏幕宽度为，一共有750个物理像素，则==750个物理像素，1rpx = 0.5px = 1个物理像素。 文章来自新秀学院——

这很棒，也很方便。 你可以简单的理解为你平时遵循750设计稿的开发流程，只不过不需要再做rem转换和适配的工作，所以小程序的视觉稿最好按照750来制作.文章来自菜鸟学院-

但！ 不同屏幕上会存在一些差异，只能根据大家的经验来避免和解决，无论是通过媒体查询还是其他方法。 文章来自新秀学院——

而且，wxss中不能引用本地资源。 谈论这个陷阱让我热泪盈眶。 那天晚上写一个小程序demo的时候，没有仔细检查。 我一边忙着写作，一边预览。 突然，真机上的预览停止工作了。 没有任何警告，我从来没有想到问题是由背景图像引起的。 折腾了大半夜，终于弄清楚问题出在哪里了，于是兴高采烈的把所有的图片都转换了。 我心想，现在没有问题了吗？ 结果预览上传又失败了。 折腾了一晚上才发现小程序对整个包的大小有严格的要求，不能超过1M。 最后我把静态资源全部放到了腾讯云的CDN上，解决了问题。 问题。 所以如果你想写背景图，就需要引用网上的图片，这里极不推荐！ 强烈不推荐！ 强烈不推荐！ 文章来自新秀学院——

另一个应用程序只能同时打开5个页面。 打开 5 个页面后，wx. 无法正常打开新页面。 请避免多级交互。 文章来自新秀学院——

在开发过程中难免会遇到一些陷阱。 比如一个简单的控件，通过查看元素就可以轻松知道它自己的风格文章来自于菜鸟学院——

文章来自新秀学院——

然后我想与文本进行简单的垂直对齐。 从以往的CSS经验来看，只需-:即可轻松解决。 本地预览的时候也是这样。 一篇好文章来自新秀学院——

文章来自新秀学院——

然而，在真机测试过程中，各种设备开始出现偏差。 文章来自新秀学院——

文章来自新秀学院——

文章来自新秀学院——

然后简单回顾了一下要素，发现问题是这篇文章源自菜鸟学院——

文章来自新秀学院——

该控件中有一个空白区域。 根据设备的不同，屏幕尺寸不同，空白区域的大小也不一致。 文章来自新秀学院——

由于时间有限，可浏览的文档有限。 我觉得这是因为默认的线高，所以我不得不使用经验丰富的司机的狡猾本性。 我可以控制线条高度或去掉多余的部分。 最终，真机界面显示还算统一。 文章来自新秀学院——

文章来自新秀学院——

如果你想按照像素级的设计稿来开发小程序微信小程序开发平台字体，还是需要对控件上的细小差异做一些控制（也可能是我个人使用了错误的方法或者误解了。因为有太多的问题）文档很少，以后就做不了了，开发者多了，大家就会有更清晰的认识。）文章来自菜鸟学院-

还有一个遇到的问题，就是小程序的默认渲染。 这是通过工具查看默认图像的风格。 文章来自新秀学院——

文章来自新秀学院——

经过多方查询，发现小程序是按照-实现的，所以所有图片都会得到一个初始宽高为320 240，并且无法通过auto重置，只能用具体值重写。 文章来自新秀学院——

好在微信提供了3种缩放模式和9种裁剪模式，可以满足我们大多数场景下对图片的掌控：文章来自菜鸟学院——

比如原图：文章来自菜鸟学院——

文章来自新秀学院——

模型

在不保持纵横比的情况下缩放图像，使图像完美贴合。 文章来源于新秀学院——

文章来自新秀学院——

保持宽高比并缩放图像，使图像的长边能够完全显示。 文章来自新秀学院——

文章来自新秀学院——

保持图像的长宽比，仅保证图像短边能够完整显示。 文章来自新秀学院——

文章来自新秀学院——

顶部

图像没有缩放，仅显示图像的顶部区域。 文章来自新秀学院——

文章来自新秀学院——

图像未缩放，仅显示图像的底部区域。 文章来自新秀学院——

文章来自新秀学院——

图像没有缩放，仅显示图像的中间区域。 文章来自新秀学院——

文章来自新秀学院——

左边

图像未缩放，仅显示图像的左侧区域。 文章来自新秀学院——

文章来自新秀学院——

图像没有缩放，仅显示图像的右侧区域。 文章来自新秀学院——

文章来自新秀学院——

左上方

图像没有缩放，仅显示图像的左上区域。 文章来自新秀学院——

文章来自新秀学院——

顶部

图像没有缩放，仅显示图像的右上区域。 文章来自新秀学院——

文章来自新秀学院——

左边

图像没有缩放，仅显示图像的左下区域。 文章来自新秀学院——

文章来自新秀学院——

图像没有缩放，仅显示图像的右下区域。 文章来自新秀学院——

文章来自新秀学院——

如果你对显示图像设计有比较严格的方式，可以尝试使用一些特殊的方法来控制图像的宽度和高度。 文章来自新秀学院——

还有小程序的控件：文章来自菜鸟学院-

文章来自新秀学院——

文章来自新秀学院——

最初的样式中是不存在的，所以我尽力将其重写为无边框、无背景的设计形式，但未能成功。 最终，为了满足设计稿，将个体语义转化为按钮元素。 我使用了其他更可控的元素。 是用元素来实现的，比如这个界面的发送图片按钮：文章来自菜鸟学院-

文章来自新秀学院——

但后来发现样式是通过写的，在开发者工具的调试中完全看不到这一点(┬＿┬)…文章来自菜鸟学院 -

除了这些UI开发的经验之外，大家也都知道小程序不是为显示而生的。 它们不适合纯粹展示类的东西。 它们主要用于功能性应用。 文章来自新秀学院——

微信提供的小程序现有的SDK和DEMO缺乏对服务器的支持，依赖开发者逐模块构建服务； 必须完成与服务器的通信，依赖开发者自行完成证书申请和部署； 身份验证过程是安全的。 由于性能要求较高，开发者高效、安全地完成会话管理将变得更加困难； 它提供了长连接通信的客户端API，但缺乏服务器端的配套支持，所以开发者自己实现还是有一定难度的。 它还具有快速传播、流量突然增加的特点，这就要求架构具有弹性伸缩能力。 文章来自新秀学院——