主体部分:
1. app.js: 小程序逻辑
2. app.json: 小程序的公共配置
3. app.wxss: 小程序的公共样式表
页面部分:
1. js: 页面逻辑
2. wxml: 页面结构
3. wxss: 页面样式表
4. json: 页面配置
逻辑层
程序注册和页面注册的两大方法
1. App()
2. Page()
注册程序App()
1. App函数用了注册小程序,参数 Object 和指定小程序的生命周期,全局方法和属性等
2. 获取小程序实例 getApp()
3. 小程序生命周期
小程序生命周期
1. onLaunch --- 监听小程序初始化
2. onShow --- 监听小程序显示
3. onHide --- 监听小程序隐藏
4. 以下两个不属于生命函数
1). onError --- 错误监听函数
2). onPageNotFound --- 页面不存在监听函数
注册页面 Page()
Page 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
参数介绍
1. data 页面初始化的数据
2. 生命周期函数
1). onLoad 监听页面加载
2). onready 页面初次渲染完成
3). onShow 页面显示时
4). onHide 页面隐藏时
5). onUnload 页面卸载时
3. 页面相关事件函数
1). onPullDownRefresh 用户下拉时
2). onReachBottom 页面上拉触底时
3). onShareAppMessage 点击转发时
4). onPageScroll 页面滚动时
5). onTabItemTap 当前是 tab 页时，点击 tab 时触发
4. 其他处理函数
页面路由
小程序中路由是以栈的形式维护
getCurrentPages() 函数用于获取当前页面栈的实例, 首页为第一个,当前页面为最后一个
路由跳转方式
1. 编程式
2. 标签式
编程式路由
1. 新页面 wx.navigateTo()
2. 重定向 wx.redirectTo()
3. 返回 wx.navigateBack()
4. tab切换 wx.switchTab()
5. 重启动 wx.reLaunch()
标签式路由
1. <navigator open-type="navigateTo"/>
2. <navigator open-type="redirectTo"/>
3. <navigator open-type="navigateBack"/>
4. <navigator open-type="switchTab"/>
5. <navigator open-type="reLaunch"/>
Tips
1. navigateTo, redirectTo 只能打开非 tabBar 页面。
2. switchTab 只能打开 tabBar 页面。
3. reLaunch 可以打开任意页面。
4. 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
5. 调用页面路由带的参数可以在目标页面的onLoad中获取
模块化
1. 导出公共模块只能通过 module.exports 或者 exports 导出
2. 目前小程序不支持 node_modules
3. 引入用 require() ,该方法不支持绝对路径
视图层
数据绑定
1. 来源 Page 里面的 data
2. 语法 {{}}
3. 属性绑定 放在双花括号内
<view id="item-{{id}}">< /view>
Page({
data: {
id: 0
}
})
4. 控制属性放括号内
5. 关键字放括号内
6. 简单计算
列表渲染
1. 语法 wx:for="{{array}}", 默认索引 index 默认当前项 item
2. key值
1). 字符串, 代表是 item 内的某个属性
2). 保留关键字 *this, 代表 item 本身
3. 改变当前元素的变量名和下标
1). 使用 wx:for-item 可以指定数组当前元素的变量名
2). 使用 wx:for-index 可以指定数组当前下标的变量名
条件渲染
1. 语法 wx:if="{{条件}}", wx:elif, wx:else
模板
语法:
// 调用
<template is="name" data="{{...data}}">
// 声明
<template name="name">
// ...somewxml
< /template>
事件
1. 语法: bindEvent=""
2. 取消冒泡: catchEvent=""
3. 事件捕获: captureEvent=""
4. 事件对象: event
引用
1. 语法: import include
2. 区别:
1). import 引入模板有作用域限制
2). include 引入除了 外, 整个代码引入到当前位置
WXS
WXS: 是小程序的一套脚本语言
Tips
1. 运行时不依赖于基础库版本, 可以在所有小程序运行
2. 和JavaScript并不一致
3. 运行环境和js代码隔离, 不能调用js文件, 有不能调用小程序的API
4. 不能作为组件的事件回调
5. 在 IOS 上 wxs 比JavaScript快 2~20 倍, Android 大致相同
模块
语法:
< wxs module="m1" >
var msg = "hello world"
module.exports.message = msg;
</wxs>
<view>{{m1.message}}</view>
// hello world
1. 文件 .wxs
2. 导出 module.exports = {}
3. 每个 wxs 模块均有一个内置的 module 对象
4. wxml引入 .wxs 文件 ``
5. wxs文件引入 wxs文件 require
变量
1. wxs中的变量均为值得引用
2. 没有生命的变量直接赋值使用, 会被定义为全局变量
3. 只声明而不赋值 默认值为 undefined
4. 会有变量声明提升
