小程序rpx；swiper组件；数据绑定，srtData方法绑定，数据库导出数据；wx:if；wx:for；事件；template模板

目录：rpx；swiper组件；数据绑定，srtData方法绑定，数据库导出数据；wx:if；wx:for；事件；template模板

------------rpx------------

rpx会根据不同屏幕自动响应，改变大小，比如设计图中是ip6，元素尺寸是750x500px，我们可以直接使用750x500rpx单位

pt逻辑像素可以暂时理解为屏幕宽高，也就是屏幕有多少像素；；px理解为每个像素中有多少个物理像素点，每个像素中的像素点越多，分辨率越高越清晰，但是人类最多能分辨2倍。

小程序内部已经做好了适配，它有自己的适配逻辑，在i6下，设计稿上的1px就对应1rpx，其他换算则比较麻烦，所以建议都是以i6设计

----------swiper组件-----------

容器使用swiper标签，里面的子元素用swiper-item标签，swiper具体属性查阅文档

------------数据绑定-------

小程序不存在DOM节点，需要传输数据给WXML可以使用数据绑定，在js中的data中存放好数据，然后在WXML中引入——｛｛数据名｝｝

---------setData方法绑定数据-----------

1.小程序从服务器获取数据，都是在页面开始加载时就获取，所以是在onLoad事件中获取

2.因为数据绑定都是需要放在data中，所以需要把onLoad中获取到的数据绑定到data中——this.setData( 存放数据的变量名称)

从数据库导入数据到js的data中的方法

一般不可能直接在当前js中使用数据渲染，都是在数据库中引入到当前js中。

引入方法： -------先在数据库中创建导出口：module.exports----------

module.exports = { 导出的名称（属性）postList ：存放数据的名称（属性值）local_database } —— 可以导出多个数据，这里是利用对象，把数据当做属性值付给一个属性

----------在需要导入数据的地方创建导入口：require----------

var postData = require ( ' 数据库的路径，需要一级级去找' ) —— 导入后，在页面加载时，也就是onLoad事件中，把数据set到data中

this.setData({ posts_key : postsData.postList }) ( 因为是利用对象存储数据的，所以需要写变量名里面的属性名，获取到里面的属性值，也就是数据 )

-----------wx：if 条件渲染----------

wx:if="{{数据值}}"--->条件渲染指令（元素显示、隐藏）

数据名： false 隐藏

数据名： true 显示

引号内如果为空则会被判定为false，会隐藏；如果随便写一个非空的字符串，则会被判定为true，会显示。（实际上不会这么用）

------------------wx:for循环渲染-------------------

参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

先把数据传到data中，如果数据是数组形式，需要将数组转化成对象的属性值

如var date = [ age : "18", sex : "男" ]，——this.setData（｛data_key : data｝）这样data才能接收到数据

for循环：一般把要循环的结构都包裹在一个容器中，然后在这个父容器的属性里写上wx：for=“｛｛data_key｝｝”，绑定数据；然后里面的每项数据添加一个名字：wx：for-item=“item”，默认子元素名字就是item，不设置也可以直接item.来引入对应的数据；；然后在相应的地方引入对应的数据：｛｛item.age｝｝、｛｛item.sex｝｝；

------------小程序事件-----------

小程序事件名称参考文档，点击事件是tap，绑定点击事件前面需要加bind

产生事件--》捕捉事件--》回调函数--》处理事件

1.tap事件：前面要加bind或catch； catch是阻止事件冒泡，哪里加就停在哪里，基本都是使用bind，冒泡；

2.在js的page中写入函数进行操作

3.wx.navigateTo({url:" "})---跳转页面方法，可返回；wx.redirectTo方法不能返回上个页面

----------------template模板-------------------

1、如果页面结构需要多个页面引用，可以使用template模板，先创建一个目录专门放模板，然后新建wxml和wxss

2、在wxml中使用template标签，并设置属性 name，也就是这个模板的名字，然后把页面结构剪切到template标签中

3、在需要引用模板的页面的wxml中，使用import标签引入，<import src="模板中的wxml" /> 单标签后面要闭合

4、在页面引入模板后，在需要添加模板的位置里使用template标签引入，并设置 is 属性，也就是模板的名字，并且需要把item传进去，里面的结构才能引用到数据，item.title、item.imgsrc等；这时就会有个问题，如果数据里面引用数据的前缀不是item，那就对不上引用不了，所以干脆把item前缀给去掉，然后外面template标签中，直接传data="{{ ...item }}"，里面的数据引用就不需要加前缀了，...是es6的扩展运算符

5、把结构的样式放到模板的wxss中，方便其他页面引入

6、在需要引入样式的页面的wxss中引入模板样式：@import “ 模板样式路径 ”