【Program】【WeChat】小程序框架

框架

整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)

小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

响应的数据绑定

框架的核心是一个响应的数据绑定系统,可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

<!--pages/welcom/welcom.wxml-->

<view> {{name}} </view>
<button bindtap="fnChangeName"> Click me! </button>
// pages/welcom/welcom.js

Page({
  data: {
    "name":"WeChat"
  },

  fnChangeName: function (e) {
    this.setData({
      name: 'MINA'
    })
  }
})

页面管理

基础组件

丰富的 API

场景值

场景值用来描述用户进入小程序的路径。

逻辑层 App Service

逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序示例,绑定生命周期回调函数、错误监听和页面不存在监听函数等。

// app.js

App({
  onLaunch(options) {
    // Do something initial when launch.
  },
  onShow(options) {
    // Do something when show.
  },
  onHide() {
    // Do something when hide.
  },
  onError(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
// pages/welcom/welcom.js

const appInstance = getApp()
console.log(appInstance.globalData)

注册页面

对于小程序中的每个页面,都需要在页面对应的 js 文件中调用 Page 方法注册页面示例,指定页面的初始数据、生命周期回调、事件处理函数等。

页面生命周期

页面路由

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

模块化

API

视图层 view

  • 框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
  • 将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
  • 组件(Component)是视图的基本组成单元。
  • WXML(WeiXin Markup language) 用于描述页面的结构。
  • WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
  • WXSS(WeiXin Style Sheet) 用于描述页面的样式。
发布了50 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_35689096/article/details/96472871