小程序开发包括全局配置文件、页面配置文件。开发者可通过app.json和app.js文件对小程序进行全局配置;通过.css、.js、.json和.swan文件进行页面配置。具体结构如下:
├── app.js
├── app.json
├── app.css
├── project.config.json
└── pages
└── index
├── index.swan
├── index.css
├── index.js
└── index.json
└── detail
├── detail.swan
├── detail.css
├── detail.js
└── detail.json
可以通过配置 app.json 文件,设置 SWAN 的界面、路径、多 TAB 等。
{
"pages": ["pages/index/index"],
"requiredBackgroundModes": ["audio"]
}
注:在此处申明了后台运行的接口,开发版和体验版上可以直接生效,正式版还需通过审核。
5.networkTimeout
各类网络请求的超时时间。
代码示例
6.permission
小程序接口权限相关设置。
代码示例
7.routes
routes 为一个数组,数组中每一项代表一组路由规则,具体包含字段为:
app.js 中存放全局的 JavaScript 逻辑,整个小程序只有一个 App 实例,是全部页面共享的。
开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取 App 上的数据或调用开发者注册在 App 上的函数。
// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData)
参数说明:
onLogin(Object object)
.css文件
CSS 结尾的样式文件,类似于常规 CSS,用以渲染界面时进行样式描述。
具体可以参考这里:https://smartprogram.baidu.com/docs/develop/framework/view_css/
.js 文件
SWAN 智能小程序中,JS 文件是控制交互逻辑的动态语言。
.json 文件
小程序页面可以使用 .json 文件来对本页面的窗口表现进行配置。
页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
类似于app.json
.swan 文件
这部分是每个智能小程序页面的展现模板,类似于 Web 开发中的 HTML,SWAN 模板中使用的标签均为 SWAN 组件规定的标签。
标签可以拥有属性,需要注意的是,swan 中的属性是大小写敏感的,也就是说 class 和 Class 在 swan 中是不同的属性。
基础数据绑定:通过{{}}绑定数据,如下:
·
循环
开发者可以通过在元素上添加s-for指令,来渲染一个列表。
条件
开发者可以通过在元素上添加s-if指令,来在视图层进行逻辑判断:
事件
事件处理
开发者可以使用bind: + 事件名来进行事件绑定
目前支持的事件类型有:
事件对象:
当开发者绑定方法到事件,事件触发时,SWAN 会给触发的方法传递事件对象,事件对象因事件不同而不同,目前基础的事件对象结构为:
dataset:
开发者可以在组件中自定义数据,并在事件发生时,由 SWAN 所在事件对象中,传递给绑定函数。属性值也可以动态的去改变,有所不同的是,属性值必须被包裹在双引号中, 且引号可加可不加
touches
开发者在接收到触摸类事件后,在事件对象上,可以接收到当前停留在屏幕上的触摸点。
说明: