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

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对应的子元素那里，子元素会出现在滚动区域的最顶部