百度小程序——基础原理篇

背景

出于兴趣和业务需要的双重要求,开始学习一下百度智能小程序的开发。本文侧重原生百度小程序的学习,后续会涉及到小程序框架okam的学习。

简介

智能小程序,是百度提供的一种技术解决方案。开发者基于此开发出来的服务,在各类宿主环境(手机 App、车载系统、IOT 设备等)中,可做到用户无感知安装过程即点即用。

小程序使用了双线程模型,包括逻辑层和渲染层。逻辑层作为一个单独的线程执行js代码,控制小程序数据的生成和处理;渲染层使用WebView线程,处理页面的渲染和用户的事件交互行为。

基本原理

概览

小程序开发包括全局配置文件、页面配置文件。开发者可通过app.json和app.js文件对小程序进行全局配置;通过.css、.js、.json和.swan文件进行页面配置。具体结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── app.js
├── app.json
├── app.css
├── project.swan.json
└── pages
└── index
├── index.swan
├── index.css
├── index.js
└── index.json
└── detail
├── detail.swan
├── detail.css
├── detail.js
└── detail.json

我们可以看到以下几类的文件:

  1. .json为后缀的JSON配置文件,配置了智能小程序所有页面的路径和界面展现样式等;
  2. .swan结尾的SWAN模板文件,用来描述当前这个页面的文件结构,类似于网页中的HTMK文件;
  3. .css结尾的CSS文件,描述页面样式;
  4. .js结尾的JS文件,处理这个页面和用户的交互。

全局app.json

app.json是小程序全局配置文件,设置SWAN的界面、路