作者：陆文哲|腾讯云UI工程师
前段时间，我刚刚接手了一个小程序项目。以为之前学了一段小程序，终于有项目可以实践了。可惜万万没想到，加了两节周末课后，竟然是飞机选秀。好在我有所收获，所以趁着思路还清晰的时候记录下来。以下纯属个人观点。
项目大致是这样的，摄像头拍摄个人身份证，上传信息，完成记录。
帐号
首先，开发一个小程序，我们需要一个开发者账号，具体步骤这里不再赘述。
开发语言
小程序框架本身提供了一套描述语言WXML、WXSS、JavaScript逻辑层框架，并在视图层和逻辑层提供数据传输和事件系统。
视图层（View）：主要用于渲染页面，即WXML、WXSS；
逻辑层（App Service）：处理页面逻辑、调用接口、数据请求。
这里我想重点讲一下视图层。我们都知道HTML+CSS+JS是Web编程的组合。在小程序中，WXML对应于HTML，WXSS对应于CSS。
比如我们看一下这样一个页面在小程序中的表现：
也许有些人不喜欢这种HTML的编写方式，或者原来编写的页面不能直接在小程序中使用。这里，推荐使用工具翻译。可以像平时写web一样写小程序，并且支持项目的导入和导出。
其中，编译工具主要是翻译源代码目录下的所有HTML文件，并创建xxx.build文件夹，将所有编译好的WXML存放在page文件夹下。当然，app.json配置文件也会自动创建。根据创建的目录名，将同名CSS文件重命名为WXSS文件，存放到同名目录下。如果CSS与文件名不匹配，则合并不一致的CSS文件，存放在全局目录下的app.wxss中。同时，源代码目录下的JS文件会被忽略，页面级JS会被复制到同名目录下。该JS包含了注册页面的页面功能基本模板。我们来看图吧！
以下是源码demo的目录文件结构：
编译后的目录结构发生变化：
同时页面上的html也会发生变化：
!--html--div class='container' div class='grouptip-success' i class='tip-success'/i /div span class='tip-success-text'人脸认证完成/span span class='text-mod'您的人脸认证已完成/span span class='text-go'返回首页/span/div 复制编译后：
!--wxml--view class='container' view class='grouptip-success' icon type='success' size='60'//查看文字class='tip-success-text' 人脸认证完成/文字text class='text-mod'您的人脸认证已完成/text text class='text-go'返回首页/text/view复制屏幕适配
小程序本身的计量单位是rpx，1rpx=0.5px=1物理像素，rpx其实是微信应用对rem的规定，或者说是一种设计方案。官方规定屏幕宽度为20rem，指定屏幕宽度为750rpx。因此，在微信小程序中，1rem=750/20rpx，设计稿的尺寸建议使用750作为设计稿的标准宽度。
样式库
小程序本身提供了一套交互样式库WeUI。官方文档有更详细的调用和说明，但并不是所有的样式都是我们想要的。有时候设计师会根据当前页面来设计我们需要的东西。样式，比如我们常用的图片、按钮，都包含默认样式。最直接的方法就是重置默认样式。
图片的引用
起初我只是尝试通过网络加载图片，但其实小程序中加载图片有两种方式，即本地图片和网络图片，但由于微信小程序本身整体大小限制在2M以内，所以还是建议我们使用网络图片来加载，以减少包的大小。
我们来看看具体的实现方法：
目录结构如下。只要按照正确的方式将图片放置在小程序的开发工具的项目中，就可以使用内联样式或图像标签在wxml文件中引用本地图片。
然后，新建一个图片文件夹，然后将图片复制到该目录下。
注意：一定要使用微信开发工具打开的项目窗口完成新建文件夹和将图片复制到该目录下两个步骤：
要访问具有相对路径的图片，您可以使用样式或图像标签。
您不能使用wxml 样式来引用本地图像。虽然不会报错，但实际上并没有什么用。
注意：手机模拟预览时，样式的背景图只能使用服务器的图片，不能使用本地的图片。
媒体组件camera
这个项目的主要难点实际上是如何在相机界面上添加文本和遮罩层。起初我尝试了很多方法，但无法在人体轮廓上显示所需的内容。如图所示，预览界面显示的效果是我想要的，但是手机上却没有显示相应的内容：
后来看到错误报告，同时查看了官方文档。原来小程序直接给我们提供了相机组件cover-view和cover-image，可以叠加在相机界面层上。需要注意的一点是：原生控件cover-当view 作为父容器时，其他控件不能嵌套为子元素，只能是cover 类型的控件如：cover-view、cover-image，切记！
以下嵌套方法可以在手机上正常显示所需的提示内容：
以上是个人对这个项目的总结，一定还有更好的方法，希望大家多多指教！