01.小程序框架

一、小程序的配置

1. 全局配置——app.json

{
 {
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pagePath",
      "text": "text",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

pages页面列表配置，window属性配置，tabbar配置。

• pages列表的第一项就是小程序的默认首页。

2. 页面配置——<page>.json

• 只能配置全局配置项的window配置项内容
• 会覆盖全局配置中的window配置
• 开启下拉刷新

"enablePullDownRefresh": false

二、小程序的逻辑层

1. 小程序的注册逻辑——app.js

• 注册全局唯一的小程序
• 只能调用一次

//app.js
App({
  onLaunch: function () {
//小程序启动的时候调用
  },
  onShow:function(){
    //渲染页面的时候调用
  },
  onHide:function(){
    //页面隐藏时调用
  },
  globalData: {
//全局变量
  }
})

2. 小程序的页面逻辑——<page>.js

• 注册一个页面
• 接受一个对象作为函数参数

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  }
})

3. 页面数据
   (1). data属性

data:{
message:"hello world"
}

• 访问

this.data.message

• 修改

this.setData({
})

(2). 使用全局数据

• 获取全局唯一的app实例

//获取应用实例
const app = getApp()

• 通过唯一实例获取全局数据

var data = app.globalData

(3). 生命周期函数

生命周期回调函数	触发时机
onLoad	监听页面加载
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉刷新事件
onReachBottom	监听用户上拉触底事件
onPageScroll	监听用户滑动页面事件
onTabItemTap	当前是 tab 页时，点击 tab 时触发

三、小程序的视图层

1. 数据绑定
   语法：{{}}

<view>{{message}}</view>
Page({
  data: {
    message: 'Hello World',
  }
})

2. 列表渲染
   语法：wx:for

  <view wx:for="{{array}}">
  {{index}}:{{item.message}}
  </view>

Page({
  data: {
    array:[{
      message:"foo",
    },{
      message:"bar"
    }]
  }
})

3. 条件渲染
   语法：wx:if、wx:elif、wx:else

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

4. 绑定事件

页面事件	触发时机
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开(推荐)
longtap	手指触摸后，超过350ms再离开
touchstart	手指触摸动作开始
touchend	手指触摸动作结束

• 绑定事件的写法以key、value的形式
• key以bind或者catch开头，然后跟上事件的类型

<view id="taptest" bindtap="tapName">Click me!</view>

page({
 tapName:function(event){
    console.log("hello world");
  }
})

四、总结

小程序架构.png 小程序框架.png