全部产品
云市场
云游戏

概述

更新时间:2020-03-13 10:51:31

文件结构

小程序分为 apppage 两层。app 用来描述整个应用,page 用来描述各个页面。

structure

  • app 由三个文件组成,必须放在项目的根目录。

    文件
    必填
    作用
    app.acss
    小程序全局样式表
    app.js
    小程序逻辑
    app.json
    小程序全局设置
  • page 由四种类型的文件组成,分别是:

    文件类型
    必填
    作用
    acss
    页面样式表
    axml
    页面结构
    js
    页面逻辑
    json
    页面配置
说明:为了方便开发者,我们规定这四个文件必须具有相同的路径与文件名。

开发者写的所有代码最终将会打包成一份 JavaScript 脚本,在小程序启动的时候运行,在小程序结束运行时销毁。

逻辑结构

小程序的核心是一个响应式的数据绑定系统,分为视图层和逻辑层。这两层始终保持同步,只要在逻辑层修改数据,视图层就会相应的更新。

请看下面这个简单的例子。

  1. <!-- 视图层 -->
  2. <view> Hello {{name}}! </view>
  3. <button onTap="changeName"> Click me! </button>
  1. // 逻辑层
  2. var initialData = {
  3. name: 'taobao',
  4. };
  5. // 注册一个页面
  6. Page({
  7. data: initialData,
  8. changeName(e) {
  9. // 改变数据
  10. this.setData({
  11. name: 'mPaaS',
  12. });
  13. },
  14. });

上面代码中,框架自动将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面一打开的时候会显示 Hello taobao!

用户点击按钮时,视图层会发送 changeName 的事件给逻辑层,逻辑层找到对应的事件处理函数。逻辑层执行了 setData 的操作,将 nametaobao 变为 mPaaS,因为该数据和视图层已经绑定了,从而视图层会自动改变为 Hello mPaaS!

说明:由于框架并非运行在浏览器中,所以 JavaScript 在 web 中的一些能力都无法使用,如 documentwindow 等对象。

逻辑层 js 可以用 es2015 模块化语法组织代码:

  1. import util from './util'; // 载入相对路径
  2. import absolute from '/absolute'; // 载入项目根路径文件

第三方 NPM 模块

小程序支持引入第三方模块,需先在小程序根目录下执行如下命令安装该模块:

  1. $ npm install lodash --save

引入后即可在逻辑层中直接使用:

  1. import lodash from 'lodash'; // 载入第三方 npm 模块
说明:由于 node_modules 里第三方模块代码不会经过转换器,为了确保各个终端兼容,node_modules 下的代码需要转成 es5 格式再引用。模块格式推荐使用 es2015 的 import/export。同时,浏览器相关 web 能力同样无法使用。