初步接触小程序

首先学习使用小程序的开发者工具，并比较与chrome-dev-tools的异同。

1. 查看元素：需要首先选择Wxml;
2. 小程序的编辑功能，可以直接修改本地文件，但需要首先ctrl+s保存。
3. 修改并保存后，页面会自动刷新。

然后是小程序自身的一些限制or规定。

1. 打包文件大小小于1M。
2. 页面头部底部的表现样式受限。均在page.json中设置而不是样式文件。
3. 小程序目前不支持直接引入 node_modules, 开发者需要使用到node_modules 时候建议拷贝出相关的代码到小程序的目录中。
4. 不能使用window与document对象：因为小程序的运行环境不是浏览器！
5. 无法使用嵌套方式书写样式。
6. 支持的选择器是有限的！详情参考Wxss选择器部分。
7. 各个页面的JS脚本文件的变量与函数独立，因此要设置全局的数据需要使用：

//App()方法，App是全局实例，可以通过getApp()获得。

//全局数据一般在app.js中定义。

//app.js
App({
    globalData: 1
});

//login.js
var app = getApp();

app.globalData ++;

小程序对模块化Js的支持，使用CommonJS规范。

1. 通过module.exports或者exports来暴露模块的接口。
2. 其他模块使用该模块的接口的方法：在js文件中，page方法之前通过require(path)方法引入。

var common = require('common.js');
Page({
    helloMINASAN: function() {
        common.sayHello('MINASAN');
    },
    goodByeMINASAN: function() {
        common.sayGoobye('MINASAN');
    }
});

详情参考模块化。

小程序对模板的支持，使用mustache语法。

关键词：mustache、name、is、data、include、import
一一说明：

1. 使用模板内部使用Mustache语法。
2. name作为模板名，在template标签中作为属性定义，为模板的标识/名称。
3. is属性是在使用模板时，它的值表示选择使用的模板。
4. data（object）模板暴露的接口，用以接收数据。
5. include与import都是用以引用外部Wxml文件的标签。
   它们的区别是：
   • include引用Wxml文件除template标签以外的所有标签。（待验证）
   • import仅引用template标签。（待验证）

详情参考模板。

小程序对css的支持，使用Wxss（即对css扩充、修改了一些规则）。

扩充：尺寸单位、样式导入。
修改：

1. 不能使用嵌套写法书写Wxss样式。
2. 部分选择器不支持。详情见Wxss样式部分。
3. 全局样式在app.wxss中定义，局部样式由page.wxss定义，且局部样式权重高于全局。

现在主要来说一下小程序扩充的尺寸单位、样式导入部分。

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，
则：750rpx = 375px = 750物理像素，
即：1rpx = 0.5px = 1物理像素。

使用rpx单位有个好处是：开发在按照iphone6尺寸制作的设计图上量出来的尺寸就是属性需要的rpx值，不需要经过换算。其他屏宽下的换算比例是：rpxToPx = 屏幕宽度/750 px;

然而rem单位如何在Wxss中使用呢，测试结果如下：

1. 屏宽375px下（如iphone6）：1rem = 18.75px;
2. 屏宽320px下（如iphone5）：1rem = 16px;

得到的换算公式是：remToPx = 屏幕宽度 / 320 * 16 px;。

在安卓下适用。
例：

1. 测试用屏宽：411px;
2. 设置标签元素高度:`height = 1rem;`
3. 得到标签元素高度:`height = 20.5469px;`
4. 通过公式计算得到的结果：`height = 411/320 * 16 = 20.55px`;

结论：当rem、px、rpx相遇我们可以用这两个公式，

1. rpxToPx = 屏幕宽度/750 px;
2. remToPx = 屏幕宽度 / 320 * 16 px;

且重要的一点是：与在浏览器环境下不同，它的值是固定的，不会依据根节点（page标签）的fontSize大小变化。（也就是说更改Wxml的page标签的fontSize对rem不起作用）

样式导入

用法与less的import功能类似。

小程序的便利之处：

1. 可以方便地调用微信的一些原生功能。详情见API文档。
2. 数据绑定、列表渲染、条件渲染、模板、事件、引用等等。直观感受与Vue等框架类似，好上手。
3. 页面相关的动作事件已经做好的包装，直接调用相关函数就能够使用。例如：页面下拉、上拉触底等事件。通过page()方法定义。这与小程序页面的生命周期相关。

需要思考的点：

1. JS有接口，Wxml有模板，而样式如何在不同的页面之间复用？

   答：样式使用@import方式导入其他样式文件。

2. 组件的使用？

   答：组件存放在compenents文件夹下，每个组件有自己的.wxml与.wxss。在需要引用组件的页面文件夹下，page.xml通过<import src="..."/>或者<include src = "..." />等方法引入组件的模板.xml文件，page.wxss通过import "...";方法引入组件的样式.wxss文件。

3. ...持续补充

time：2017/01/11

editor：zgatry

---

小程序随笔：

1. 使用扩展运算符...来将一个对象展开。
2. <block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
3. text标签设置hidden属性时，开发者工具( v0.12.130400)中不会显示display:none的样式，而view标签可以;

time: 2017/01/17

editor: zgatry

---