参考:微信小程序官方文档
技术发展史:
逻辑线程阻塞渲染线程,导致长时间的页面空白。
小程序与普通网页的区别:
- 小程序的渲染线程和脚本线程分别运行在不同的线程中。无法进行DOM操作;
- 运行环境不同;
- 开发环境不同;
开始开发:
- 申请账号,获得小程序AppID;
- 安装开发工具,输入AppID;
- 编辑,微信扫码预览;
小程序代码构成:
- .json 配置
- app.json : 当前小程序的全局配置;
- project.config.json : 类似webpack的作用,工程配置;
- page.json : 页面配置 ;
- 语法特点:字符串使用双引号,无法使用注释。支持数字、boolean、null、数组、对象;
-
.wxml 模板
1. 充当类似于html的页面结构,写法不一致,小程序对div、span 、p标签等做了的封装。用的标签是View、Text、button等标签,类似于React-Native使用的页面标签;
2. 新增如 wx:if 的类似Vue的属性,和 {{}} 的表达式。属性以 wx: 开头; -
.wxss 样式
1. 具有 CSS 大部分的特性;
2. 不用考虑设备像素比,使用尺寸单位 :rpx(responsive pixel);
3. @import “common.wxss”; 的方式导入外联样式文件; -
.js 逻辑
- js脚本文件,使用bindtap=“事件名”的方式绑定事件到相应的标签;
小程序框架:
-
小程序框架系统分为:逻辑层(App Service)和 视图层(View);
-
框架提供了一套基础组件,视图层可以使用基础组件像堆积木一样堆积出强大的微信小程序;
-
逻辑层可以调用丰富的微信提供的API,如支付,获取用户信息等;
-
由于小程序的逻辑层不是运行在浏览器中,所以不能使用window和document对象;
-
behaviors 用来让多个页面使用相同的数据和方法;
-
页面的路由由框架进行管理;
-
使用module.exports导出文件,使用require导入文件;
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbyevar common = require(‘common.js’)
-
全局数据在App()中设置;