微信小程序新手开发记录文档《一》，微信小程序开发心得体会

从微信公众平台官方网站下载安装小程序：开发工具下载。这是是基于微信自己的开发者工具可以实现同步本地的文件进行开发调试内容思维复杂性进行开发调试项目管理编译动态预览和上传发布等功能。由于是基于原生的系统层开发框架不需要通过在浏览器中运行这与H5开发是不同的所以document和window等方法不可以使用。

小程序开发者工具界面

相比

小程序是基于两个进程同步执行并加载。两个线程：Appservice Thread和View Thread是基于service层和view层的。甚至Appservice Thread会更早执行当视图线程加载完通知AppserviceAppservice 会把准备好的数据用setData的方法返回给视图线程。

小程序的这种优化策略可以减少用户的等待时间、加快小程序的响应速度。

小程序生命周期执行流程图

小程序自己开发了一套WXML标签语言和WXSS样式语言并非直接使用标准的HTML5+CSS3。

WXML

1）标签

WXML在语法上更接近XML语言遵循SGML规范区别于HTML语言随意的标签闭合方式WXML语言必须包括开始标签和结束标签以image标签为例以下2种写法都支持：

<image src=''  2333 '' />    或 <image src='' 2333 ''>   </image>

注意：所有组件与属性都是小写以连字符-连接。

2）文件引入

WXML提供两种文件引入方式import和include。区别在于：import可以引入定义好的template模板模板是有作用域的；而include就是拷贝一个公用的代码片段到目标文件中适合做公共页面片的拆分文件引入在小程序做模块化拆分的过程中非常重要。

文件引入两种方式

WXSS

1）尺寸单位

WXSS支持的单位有px、rem和rpx其中rem和rpx可以针对屏幕容器进行适配px则为固定尺寸。

其中1rpx=0.5px在WXSS和WXML中定义的rpx单位最终会转换为在手机端可以识别的rem单位。

建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

所以工程师拿到750的设计稿在PS中量取的容器大小可以直接定义为rpx不需要进行2倍尺寸的换算。

view元素的样式配置

注意：rpx的单位不光在样式中会自适应写在WXML的style里也会根据屏幕自适应。

2）样式引入

支持样式引入格式如下： import "../../wxss/common.wxss";

使用@import语句可以导入外联样式表@import后跟需要导入的外联样式表的相对路径用;表示语句结束。

示例代码：

/** common.wxss **/.small-p{padding:5px;} **/

/** app.wxss **/@import"common.wxss";.middle-p{padding:15px;} **/

3）选择器

小程序支持的选择器在官方公布的文档中包括.class、#id、 element、element,element、::after(注意是双冒号)、::before这6种选择器。

小程序对于:first-child、:last-child、.class-a .class-b{}甚至更多层级的嵌套都是支持的。

几种选择器

不过官方并不推荐级联的这种写法因为考虑到后面切Native的扩展可能会没办法支持级联选择。

所以保险起见不建议.class-a .class-b{}这种级联的写法以免后期工具过滤导致页面错乱。

小程序有许多自己独立的开发的原生APP组件可以直接调用。

H5和小程序组件标签的区别对比

先来简单说明下：

1）view

div和view都是盒模型默认display:block

盒模型在布局过程中一般推荐display:flex的写法配合justify-content:center;align-items:center;的定义实现盒模型在横向和纵向的居中。

2）text

文本。<text/>组件内只支持<text/>嵌套。除了文本节点以外的其他节点都无法长按选中.

3）icon

图标。icon可以直接用微信组件默认的图标默认是iconfont格式

icon图标对应属性

4）表单组件