微信小程序学习笔记（一）

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,写各种标签)
　　　　* 使用组件
　　　　*
　　　　* 绑定数据 {{数据}} ，这些数据均来自于对应页面的.js文件中Page构造方法的data对象

　　　　* 结合事件系统
　　　　* 绑定事件的属性 bindtap

3.WXML具有数据绑定、列表渲染、条件渲染、模板及事件绑定的能力

　　* 数据绑定

　　
　　{{message}}

　　//demo.js
　　Page({
　　　　date:{message:"Hello MINA!"}
　　})

　　* 列表渲染

　　
　　{{item}}

　　//demo.js
　　Page({
　　　　data:{
　　　　　　array:[1,2,3,4,5]
　　　　}
　　})　　

　　* 条件渲染

　　
　　 WEBVIEW
　　 APP
　　MINA

　　//demo.js
　　Page({
　　　　data:{
　　　　　　view:"MINA"
　　　　}
　　})

　　* 模板

　　
　　

　　
　　

　　//demo.js
　　Page({
　　　　data:{
　　　　　　staffA:{firstName:"Weiwei",lastName:"Hu"},
　　　　　　staffB:{firstName:"tianhao",lastName:"Wang"}
　　　　}
　　})

　　注:“...” 为扩展运算符，用它来展开一个对象，如staffA对象

　　* 事件绑定

　　
　　{{count}}

　　//demo.js
　　Page({
　　　　data:{
　　　　　　count:1
　　　　},
　　　　add:function(){
　　　　　　this.setData({
　　　　　　　　count:this.data.count + 1
　　　　　　})
　　　　}
　　})

4.引用

　　WXML提供两种文件引用方式：import和include
　　（1）import(引入的是模板)
　　
　　

　　在index.wxml中引用了item.wxml,就可以使用item模板了