框架概述 -凯发app官方网站

框架概述

目录结构

native 渲染

性能与优化

小程序全局配置

acss 语法参考

小程序页面

axml

sjs 语法参考

事件系统

自定义组件

基础能力

基础库

基础库更新日志

更新时间：2024-05-17 15:19:44

订阅更新

我的文档

设置

文件结构

小程序分为

app

和

page

两层。

app

用来描述整个应用，

page

用来描述各个页面，此外还有关于整个

project

的配置描述（可选）。

app

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

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序全局设置
app.acss	否	小程序全局样式表

page

由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑
axml	是	页面结构
json	是	页面配置
acss	否	页面样式表

注意：

为了方便开发者，支付宝小程序规定这四个文件必须具有相同的路径与文件名。

project

特指

mini.project.json

文件，必须放在项目的根目录，其中的具体配置可查看

小程序项目配置介绍

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

逻辑结构

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

<view> hello {{name}}! view>

<button ontap="changename">click me!button>

// 逻辑层

var initialdata = {

name: 'taobao',

};

// 注册一个页面

page({

data: initialdata,

changename(e) {

// 改变数据

this.setdata({

name: 'alipay',

});

上面代码中，框架自动将逻辑层数据中的

name

与视图层的

name

进行了绑定，所以在页面一打开的时候会显示

hello taobao!

。用户点击按钮的时候，视图层会发送

changename

的事件给逻辑层，逻辑层找到对应的事件处理函数。逻辑层执行了

setdata

的操作，将

name

从

taobao

变为

alipay

，因为该数据和视图层已经绑定了，从而视图层会自动改变为

hello alipay!

。

注意：

由于框架并非运行在浏览器中，所以 javascript 在 web 中的一些能力都无法使用，如

document

、

window

等对象。逻辑层 js 可以用 es2015 模块化语法组织代码：

保留的导入符号

小程序中将浏览器部分内置对象名（如 window、document）作保留字使用，以应对未来的不时之需。保留字有：

globalthis

、

global

、

alipayjsbridge

、

fetch

、

self

、

window

、

document

、

location

、

xmlhttprequest

。请勿使用保留字做导入符号，否则框架会出现无法正常访问导入内容的现象。如：

上述代码中，因为使用了保留字做导入符号，使得引入的变量变成了 undefined 。正确的方法是不使用保留字，或者在导入时使用 as 关键字进行重新命名，例如：

第三方 npm 模块

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

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

有关 npm 的详细介绍，可查看

npm 包管理

。

注意：

为了提高小程序编译性能，默认不会自动为

node_modules

中的代码转换语法，如果需要使用包含非 es5 语法的 npm 包，需要开启

transpile

配置项。

相关问题