微信小程序初学

一、路由（监听）
路由，即进行页面变化。
路由监听过程，可进行准确还原，以下（）内是监听函数

1、基本处理逻辑
（1）用户操作，路由事件由客户端下发到基础库执行（前： wx.onBeforeAppRoute；后： wx.onAppRoute）
（2）代码触发（API或组件），基础库向客户端发起路由请求，客户端确认路由可被执行后，再下发基础库执行。

      其他监听时刻

　　页面创建： 创建新页面、压入页面栈、挂载页面、onLoad、onShow （前：wx.onBeforePageLoad；后：wx.onAfterPageLoad）
　　页面销毁： 旧页面onUnload、销毁、弹出页面栈（前： wx.onBeforePageUnload；后：wx.onAfterPageUnload）

　　路由对应的动画完成时触发（wx.onAppRouteDone ）

2、路由事件及其基础库执行过程

 3、页面生命周期

onLoad:页面加载时触发，一个页面只会调用一次；

onShow:页面显示/切入前台时触发；

OnReady:页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互；

OnHide:页面隐藏/切入后台时触发;

onUnload:页面卸载时触发;

onRouteDone:路由动画完成时触发。

 二、小程序结构

小程序主要由逻辑层（App Service）和视图层（View）组成，js文件属于逻辑层，wxml/wxss/wxs属于视图层。另外还有配置文件json。

（一）JS文件

通过 App 和 Page 方法，进行程序注册和页面注册。
通过 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
(一)注册小程序（app.js）
小程序框架 / 逻辑层 / 注册小程序
// app.js
App({
onLaunch (options) {
// Do something initial when launch.
},
globalData: 'I am global data'
})
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
(二)注册页面（页面.js）
小程序框架 / 逻辑层 / 注册页面
1、“页面.js”优先级高于“APP.js”
2、Page({})函数
接收一个 Object（对象） 类型参数，指定页面的初始数据（data属性）、生命周期回调、事件处理函数（分为页面事件和组件事件）等。
对象格式：
data属性，通过wxml以{{name}}的语法格式关联。
函数格式： 函数名（参数）{逻辑}
onInput(event){
this.setData()
}
3、getcurrentpages:获取当前页面栈,数组中第一个元素为首页，最后一个元素为当前页面。
4、页面路由器：this.pageRouter 或 this.router，获得当前页面或自定义组件的路由器对象。

（二）wxml
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
小程序框架 / 视图层 / WXML
（1）标签，用于标记或注释文本的结构或语义
尖括号<>是ML（markup language）语言的标准特征。
（2）组件

包含系统组件和自定义组件。

view：视图容器
text：文本
button：按钮
image：图片
（3）段落和缩进格式
提升代码的可读性和可维护性，帮助开发者快速理解代码的结构和层次关系。
（4）组件属性
小程序框架 / 视图层 / 基础组件
公共属性：id、class、style、hidden、data-*、bind*/catch*、
特殊属性：
属性分为数据类型和事件类型。
（5）事件
事件属性一般为bind+或catch+或mut-bind或capture-bind的形式，并且绑定具体的函数，函数在JS文件或wxs文件中。
bind+会出现冒泡事件，catch+会阻止事件向上冒泡。冒泡，即会向父节点传递。
capture-bind+是时间捕获，处理顺序和冒泡相反，同样capture-catch会组织捕获向下冒泡。
mut-bind事件间是互斥的。
点击 inner view 会先后调用 handleTap3和 handleTap2，点击 middle view 会触发 handleTap2，点击 outer view 会触发 handleTap1。
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
事件是视图层到逻辑层的通讯方式。
（6）数据绑定
<view> {{ message }} </view>
（7）列表渲染
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
（8）条件渲染

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

（三）wxs
WXS(WeiXin Script) 是小程序的一套脚本语言，结合wxml，可以构建出页面的结构。属于渲染层，相对于通信js逻辑层，更高效实现逻辑（只能响应内置组件的事件，不支持自定义组件事件）。
（1）WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内或以 .wxs 为后缀名的文件内。
（2）wxml引用.wxs
.通过module.exports对外共享变量或函数
.wxml引用wxs文件<wxs src="./../tools.wxs" module="tools" />

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>
（4）wxs文件间通过require引用，格式：

var tools = require("./tools.wxs");

（四）wxss

1、尺寸单位：rpx，即按百分比来设定尺寸
2、样式配置方式
（1）内联样式(在xml里面的组件内配置)：
style(动态样式) <view style="color:{{color}};" />
class（静态样式） <view class="normal_view" />
（2）外联样式：
i、xml通过选择器关联wxss样式；
选择器，包括.class、#id、element等，以下.small-p是一个.class类的选择器
/** common.wxss **/
.small-p { /** 普通选择器 **/
padding:5px;
}
.small-p .high-p { /** 组合选择器，即high-p所属的组件包含.small-p所属的组件 **/
padding:5px;
}
选择器优先级： 内联样式 组合选择器 类选择器 元素选择器
我理解是根据组件的内外嵌套关系，由内往外，优先级是变小的。
ii、支持样式导入
通过@import将common.wxss的样式导入到app.wxss
/** app.wxss **/
@import "common.wxss";
.middle-p {padding:15px;}
3、样式文件包括全局样式（app.wxss）和局部样式(page.wxss)。

（四）JSON文件

1、全局配置app,json
小程序配置 / 全局配置
json是一种数据格式
（1）JSON格式
基本格式：键值对{“key”:“value”}”
1、value可以是数组，比如
{“page":[
"pages/index/index",
"pages/video/video"
]”}
2、也可以是对象
{“window":{
"navigationBartTextStyle":"black",
"navigationStyle":"default"
}”}
3、 同层级之间通过逗号“，”隔开

（2）可配置内容
可配置window（状态栏/导航栏/窗口）/pages（页面）/tabBar（底部导航栏）等内容。

扩展学习：全局配置文件 | 微信开放社区
2、页面配置：页面.json
用于单个页面的配置，会覆盖app.json中window的相同配置