微信小程序学习笔记（一）
1.目录及文件构成
1.1 根目录下
** app.js 是小程序的脚本代码，用来监听并处理小程序的生命周期函数、声明全局变量。
** app.json 是对整个小程序的全局配置，配置小程序是由哪些页面组成，配置小程序的窗口背景颜色等。
** app.wxss 是整个小程序的公共样式表。
其中 app.js 和 app.json 是必需的。
1.2 小程序页面是由同路径下同名但不同后缀的2 ~ 4个文件组成：
** .js后缀的文件是页面脚本文件，该文件实现页面逻辑与事件处理
** .json后缀的文件是页面配置文件。
** .wxss后缀的是页面样式表文件。
** .wxml后缀的文件是页面结构文件，该文件与.wxss文件一起构建出页面。
其中 .js 和 .wxml文件是必需的。
2. 每个小程序包含一个描述整体程序的app实例和多个描述页面的page
* 其中app由三个文件构成：
** 公共配置 app.json
** 公共样式 app.wxss
** 主体逻辑 app.js
* 每个page最多由四个文件构成
** 页面配置 page.json
** 页面样式 page.wxss
** 页面结构 page.wxml
** 页面主体逻辑 page.js
我们可以按需在app.js和page.js中添加程序在生命周期的每个阶段相应的事件。
比如在页面onLoad的时候进行数据加载，onShow的时候进行数据的更新
*** 怎么写js文件（注意：里面的涉及的实例都是js实例）
* app.js首先写app构造方法,即App()
这个构造方法里面的参数是一个js实例,即App({})
参数实例里面有生命周期函数还有全局变量
* page.js首先写page构造方法,即Page()
这个构造方法里面的参数是一个js实例,即Page({})
参数实例里面有data属性、生命周期函数、自定义的事件处理函数
data属性的属性值也是一个js实例，即data：{}
属性值实例里面也有属性和属性值，如data:{name:"wang",age:26}
典型的app.js代码如下
App({
onLaunch:function(){
//启动时执行的初始化工作
},
onShow:function(){
//小程序启动或从后台进入前台时，触发执行的操作
},
onHide:function(){
//小程序从前台进入后台时，触发执行的操作
}
})
典型的一个页面page.js代码如下
Page({
date:{
text:'This is page data'
},
onLoad:function(){
//页面加载时执行的初始化工作
},
onReady:function(){
//页面就绪后触发执行的操作
},
onShow:function(){
//页面打开时，触发执行的操作
}
onHide:function(){
//页面隐藏时，触发执行的操作
}
})
*** 怎么写app.json文件（注意：里面的涉及的实例都是json实例）
* 说起json，首先想到的是json实例，即{}
* 既然是全局配置文件，那么首先想到的是pages属性，即{"pages":{}}
属性值也是一个实例{}，里面是逗号分隔的多个页面的路径字符串
* 接着是window属性，即{"window":{}}
属性值也是一个json实例,即{"页面窗口属性名称":"属性值"}
* 再接着是tabBar属性，即{"tabBar":{}}
属性值也是一个json实例，即{"标签页的表现":"属性值"}
*** 怎么写page.wxml文件(类似html,写各种标签)
* 使用组件
* <view></view> <text></text>
* 绑定数据 {{数据}} ，这些数据均来自于对应页面的.js文件中Page构造方法的data对象
* 结合事件系统
* 绑定事件的属性 bindtap
3.WXML具有数据绑定、列表渲染、条件渲染、模板及事件绑定的能力
* 数据绑定
<!-- demo.wxml -->
<view>{{message}}</view>
//demo.js
Page({
date:{message:"Hello MINA!"}
})
* 列表渲染
<!-- demo.wxml -->
<view wx:for="{{array}}">{{item}}</view>
//demo.js
Page({
data:{
array:[1,2,3,4,5]
}
})
* 条件渲染
<!-- demo.wxml -->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:if="{{view == "APP"}}"> APP </view>
<view wx:if="{{view == "MINA"}}">MINA</view>
//demo.js
Page({
data:{
view:"MINA"
}
})
* 模板
<!-- demo.wxml -->
<template name="staffName">
<view>
FirstName:{{firstName}},lastName:{{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
//demo.js
Page({
data:{
staffA:{firstName:"Weiwei",lastName:"Hu"},
staffB:{firstName:"tianhao",lastName:"Wang"}
}
})
注:“...” 为扩展运算符，用它来展开一个对象，如staffA对象
* 事件绑定
<!-- demo.wxml -->
<view bindtap="add">{{count}}</view>
//demo.js
Page({
data:{
count:1
},
add:function(){
this.setData({
count:this.data.count + 1
})
}
})
4.引用
WXML提供两种文件引用方式：import和include
（1）import(引入的是模板)
<!-- item.wxml -->
<template name="item">
<text>{{name}}</text>
</template>
在index.wxml中引用了item.wxml,就可以使用item模板了
<import src="item.wxml"/>
<template is="item" date="{{name:'图书馆'}}"/>
5.生命周期，每个页面第一次出现，都是经历onLoad-onShow-onReady,
如果页面跳转了，则会onHide,再返回出现就是onShow。如果页面被
重定向了，则会onUnload,以后不会再返回了。
6.页面导航组件：跳转
wx.navigateTo(object):保留当前页面，跳转到应用内的某个页面。可以返回到原页面
例如wx.navigateTo({url:"../index/index?name='wang'&age=26"})
wx.redirectTo(object):关闭当前页面，跳转到应用内的某个页面。
wx.navigateBack(objext)：关闭当前页面，回退至前一页面。
wx.switchTab(object):跳转tabBar页面并关闭其他所有非tabBar页面。
7.相对定位和绝对定位
相对定位的元素是相对自身进行定位，参照物是自己 position=relative; top=50px;
绝对定位的元素是相对离他最近的一个已定位的父级元素进行定位 position=absolute; top=50px;
8.<scroll-view>滚动区域组件
属性：
style="height:200px" :滚动区域的高度200px
scroll-y="true" :纵向滚动条
bindscroll="事件" ：只要一滚动，就触发事件
bindscrolltoupper="toupper" :向上滚动到顶部触发事件
bindscrolltolower="tolower" :向下滚动到低部触发事件
upper-threshold:"50" :默认向上滚动至离顶部50px时，触发bindscrolltoupper绑定的事件
lower-threshold:"50" :默认向下滚动至离低部50px时，触发bindscrolltolower绑定的事件
scroll-top="0" :设置滚动条一开始出现，到顶部的距离
scroll-into-view="<scroll-view>的子元素的id" ：滚动条一开始就会出现在id对应的子元素那里，子元素会出现在滚动区域的最顶部
