微信小程序学习随笔(一)

主体部分:

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.  

  2.  

  3.  

  4.  

  5.  

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>

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

模板

  语法:

// 调用