您的当前位置:首页正文

百度智能小程序的基本原理

2024-11-29 来源:个人技术集锦

1.小程序的目录结构

小程序开发包括全局配置文件、页面配置文件。开发者可通过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

2.小程序的全局配置

1.app.json文件的配置

可以通过配置 app.json 文件,设置 SWAN 的界面、路径、多 TAB 等。

{
    "pages": ["pages/index/index"],
    "requiredBackgroundModes": ["audio"]
}

注:在此处申明了后台运行的接口,开发版和体验版上可以直接生效,正式版还需通过审核。
5.networkTimeout
各类网络请求的超时时间。

代码示例

6.permission
小程序接口权限相关设置。

代码示例

7.routes
routes 为一个数组,数组中每一项代表一组路由规则,具体包含字段为:

2.app.js的配置

app.js 中存放全局的 JavaScript 逻辑,整个小程序只有一个 App 实例,是全部页面共享的。

开发者可以通过 getApp 方法获取到全局唯一的 App 示例,获取 App 上的数据或调用开发者注册在 App 上的函数。

// xxx.js
const appInstance = getApp()
console.log(appInstance.globalData)

参数说明:

onLogin(Object object)

  • 使用 onLogin 生命周期的意义:Web 态小程序初次登录成功后开发者能获取登录成功的 code。
  • 添加 onLogin 生命周期的原因:与百度 App 端内小程序登录不同(在小程序内部登录),Web
    态的登录需要跳转百度登录页面进行登录,登录成功后自动跳转原页面。该跳转过程会导致 Web 态小程序的原执行上下文状态丢失,从而无法通过
    swan.login 的成功回调获取登录成功的 code。因此必须通过 onLogin 生命周期获取该 code。

    onLaunch(Object object)
    小程序初始化完成时触发,全局只触发一次。

    onShow(Object object)
    小程序启动,或从后台进入前台显示时触发。也可以使用 swan.onAppShow 绑定监听。
    onHide()
    小程序从前台进入后台时触发。也可以使用 swan.onAppHide 绑定监听。
    onError(Object object)
    小程序发生脚本错误或 API 调用报错时触发。也可以使用 swan.onError 绑定监听。
    onPageNotFound(Object object)
    小程序要打开的页面不存在时触发。也可以使用 swan.onPageNotFound 绑定监听。注意事项请参考 swan.onPageNotFound。

3.小程序页面

.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
开发者在接收到触摸类事件后,在事件对象上,可以接收到当前停留在屏幕上的触摸点。


说明:

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

    组件
    智能小程序中提供了丰富多样的组件,开发者可以在 .swan 文件中,使用预设好的组件,拼装完成自己的智能小程序的页面。
    如:使用 slider 组件

    好了,以上就是百度智能小程序的各个文件、每个文件的作用以及每个界面的属性和用法啦。
显示全文