微信小程序学习

一、目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

app.js文件的入口,小程序逻辑
app.json 页面的路由配置，小程序公共配置

{
  "pages": [
    "pages/index/index",  // 路由
  ]
}

app.wxss 公共样式

一个小程序页面由四个文件组成，分别是
1、js 页面逻辑
2、wxml 页面结构
3、json 页面配置
4、wxss 页面样式
页面中的xxx.js如果设置了和app.js相同的会将app.js中覆盖

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

二、视图渲染

wx:if wx:else 判断
wx:if、 wx:elif、 wx:else
wx:for wx:key 循环遍历

引入单个组件：

<include src="../template/header"/>

引入多个组件：

//1
<import src="../template/footer"/>
<view style='background:yellow;' wx:if="{{isShow}}">
// 2 用is对应上组件名字
   <template is="footer1"  style='background:red;'></template>
</view>
<view style='background:blue' wx:else>
// 2 用is对应上组件名字,  data可以设置组件里的参数
  <template  is="footer2" data="{{}}"></template>
</view>

多个组件写法：

// 多个组件用name区分名字
<template name="footer1">底部1</template>
<template name="footer2" style="background:blue;"> 底部2</template>

三、微信小程序事件

1、什么是事件
一种用户行为
一种通讯方式

2、事件类别
点击事件：tap
长按事件：longtap
触摸事件：touchstart、touchend、touchmove、touchcancel
其他事件：submit、input…

3、事件分类
事件分为冒泡事件和非冒泡事件
（1）、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递；
（2）、非冒泡事件：当一个组价上的事件被触发后，该事件不会向父节点穿点；

WXML的冒泡事件列表：

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如的submit事件，的input事件，的scroll事件，(详见各个组件)

4、事件绑定
事件绑定的写法同组件的属性，以 key、value 的形式。
key 以bind或catch开头，然后跟上事件的类型
如bindtap 或者 bind:tap、catchtap 或者 catch:tap

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind绑定：bindtap 或者 bind:tap 不会阻止冒泡
catch绑定：catchtap 或者 catch:tap 会阻止事件冒泡

5、事件对象

四、小程序配置

全局配置和页面配置
1、全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，点击查看

pages项中
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
则需要在 app.json 中写

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

window中
用于设置小程序的状态栏、导航条、标题、窗口背景色。

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

2、页面配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，点击查看

配置示例

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

页面配置里只能覆盖掉app.json中window中的内容

五、小程序生命周期

生命周期是指一个小程序从创建到销毁的一系列过程
在小程序中 ，通过App()来注册一个小程序 ，通过Page()来注册一个页面;
下面是微信小程序的默认目录结构：

从上图可以看出微信小程序的根目录有app.js、app.json、app.wxcss三个文件，这三个文件是小程序的全局公共配置文件，app.js是小程序逻辑，app.json是小程序公共配置，app.wxss是小程序公共样式。

其中在app.js中定义了一些小程序的生命周期方法：onLaunch,onShow,onHide,onError,以及开发者定义函数和数据（可以通过this）访问。

一、生命周期方法和描述

• onLaunch:监听小程序初始化，初始化完成时，触发onLaunch方法(),此方法全局只出发一次；
• onShow:监听小程序显示，当小程序启动或者从后台进入前台时触发此方法；
• onHide:监听小程序隐藏，当小程序从前台进入后台时触发此方法；
• onError:监听小程序错误，当小程序发生脚本错误，或者api调用失败时触发此方法；
• 其他开发者添加的函数方法或者数据，通过this可以访问。

下图是app.js中各个生命周期的表现：

二、小程序页面的生命周期
微信小程序在page页中也配置了生命周期的方法：
1、onLoad:监听页面加载，页面初始化触发
2、onReady:监听页面初次渲染完成
3、onShow:监听页面显示
4、onHide:监听页面隐藏
5、onUnload:监听页面卸载
6、onPullDownRefresh:监听用户下拉动作
7、onReachBottom:监听页面下拉触底事件处理函数
8、onShareAppMessage:用户点击右上角分享

Page({

  /**
   * 页面的初始数据
   */
  data: {
    item:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("logs.js => onLoad"+JSON.stringify(options))
    this.setData({
      item:options.item
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("logs.js => onReady")
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("logs.js => onShow")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("logs.js => onHide")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("logs.js => onUnload")
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("logs.js => onPullDownRefresh")
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("logs.js => onReachBottom")
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("logs.js => onShareAppMessage")
  }
})