百度智能小程序的基本原理_百度智能工作原理-CSDN博客

本文链接：https://blog.csdn.net/qq_39748940/article/details/113108896

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
在这里插入图片描述
首先我们来看全局配置这块：

在app.css中配置全局的样式属性
在app.js中配置全局的逻辑
在app.josn中配置全局的窗口表现，所有的界面都在这个文件中注册并自动生成
接下来是每个界面的配置：

每个页面都包括4个文件：

css文件，描述界面的样式
2.js文件，处理这个界面和用户的交互，是智能小程序的逻辑层，将数据进行处理后发送给视图层，同时接受视图层的反馈
在 JavaScript 的基础上，百度智能小程序提供了一些框架方法，用以辅助开发者更容易的开发小程序。
3.json文件，这个文件配置了 SWAN 智能小程序所有页面的路径和界面展现样式等
4.这个文件是用来描述当前这个页面的文件结构，类似于网页中的 HTML 文件；

2.小程序的全局配置

1.app.json文件的配置

可以通过配置 app.json 文件，设置 SWAN 的界面、路径、多 TAB 等。
在这里插入图片描述
1.pages
在pages里面写入我们的小程序都有哪些界面，格式为：“pages/pages下的路径名/文件名”,第一项代表 SWAN 初始页面。写好之后会自动生成这些界面的文件，示例如下

2.windows
用于设置 SWAN 的状态栏、导航条、标题、窗口背景色等。
在这里插入图片描述
示例代码：

3.tabBar
用于设置客户端底部的 tab 栏：可通过 tabBar 设置 tab 的颜色、个数、位置、背景色等内容。

4.requiredBackgroundModes
代码示例：audio 后台音乐播放

{
    "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 组件

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