微信小程序开发记录文档01

1、开发工具

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

小程序开发者工具界面

相比

      H5加载时，需要按顺序加载HTML、CSS、JS。然后从服务器端返回数据，最后动态渲染页面显示到浏览器。用户需要等待时间，影响体验。

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

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

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

2、开发语言

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

WXML

1）标签

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

   或  

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

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{}这种级联的写法，以免后期工具过滤导致页面错乱。

3、开发组件封装

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

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

先来简单说明下：

1）view

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

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

2）text

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

3）icon

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

icon图标对应属性

4）表单组件

好多啦。。去查文档咯。。