小程序开发——页面结构（笔记）

代码组成：

JSON数据中心 -------- WXML 结构中心 --------- WXSS 显示中心 ---------JS 逻辑中心、交互中心

JSON配置

• app.json：是当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时时间、底部tab等静态配置，在小程序运行之情决定小程序的一些表现，无法在运行过程中去动态更新json配置文件。
• project.config.json： 开发工具个性化配置文件。
• page.json：独立页面的配置文件，允许对不同的页面进行不同的配置。

JSON 的数据类型:

• 数字，包含浮点数和整数
• 字符串，需要包裹在双引号中
• bool值。ture 或者false
• 数组，需要包裹在方括号中[]
• 对象，需要包裹在大括号中{}
• Null
  json文件中无法使用注释

WXML 模板

• 作用： 充当类似 HTML 的角色，编写整个页面的框架。
• 需要注意的地方：
  1. 大小写敏感。
  2. 标签严格闭合。
  3. 通过{{变量名}}绑定WXML文件和对应的JavaScript文件中的data属性（貌似和django的jinja2模板
     差不多~~）
• 条件逻辑 wx:if="{{condition}}" 、wx:elif="{{condition}}"、wx:else
• 循环逻辑 wx:for="{{array}}"、wx:for-item=“itemName” 、wx:for-index=“idx”
• 定义模板：
• 使用模板： is属性
• 引用模板： 或
• 共有属性：
  

WXSS 样式

• 作用：充当类似 CSS 的角色，编写整个页面的显示样式。
• 引用样式文件：@import ‘./test_0.wxss’
• 选择器：
  选择器优先级：

JS 逻辑

• 作用： 编写页面的逻辑结构，是整个项目的核心文件。

app.js:

• 程序构造器App()

App({
	onLaunch: function(options) {}, // 当小程序初始化完成是，会触发onLaunch(全局只触发一次)
	onShow: function(options) {}, // 当小程序启动，或从后台进入前台显示，会触发onShow
	onHide: function() {}, // 当小程序从前台进入后台，会触发onHide
	onError: function() {}, // 当小程序发生脚本错误，或者API调用失败时，会触发onError并带上错误信息
	globalData: 'I am global data'  // 可以添加任意的函数或数据到Object参数中，在App实例回调用this可以访问
})

• 页面构造器 Page()

Page({
   data : {text: "This is page data."}, // 页面的初始数据
   // Page实例的生命周期函数 
   onLoad: function(options) {}, // 监听页面加载，触发时机早于onShow和onReady
   onReady: function() {}, // 监听页面初次渲染完成
   onShow: function() {}, // 监听页面显示，触发事件早于onReady
   onHide: function() {}, // 监听页面隐藏
   onUnload: function() {}, // 监听页面卸载
   // Page实例的用户行为函数  
   onPullDownRefresh: function() {}, // 监听用户下拉动作
   onReachBottom: function() {}, // 监听上拉触底事件的处理函数
   onShareAppMessage: function(）{}, // 用户点击右上角转发
   onPageScroll: function() {}  // 页面滚动触发事件的处理函数
   // 可以添加任意的函数或数据，在Page实例的其他函数中用this可以访问
})

• 页面跳转和路由
  跳转新的页面(打开)： wx.navigateTo({ utl: ‘pageD’})
  退出最顶层页面(返回)： wx.navigateBack()
  替换页面(重定向)：wx.redirectTo({url: ‘pageE’})
  重启页面：wx.reLaunch({url: ‘pageE’})
  

API