微信小程序开发--笔记

参考：微信小程序官方文档
技术发展史：
逻辑线程阻塞渲染线程，导致长时间的页面空白。

小程序与普通网页的区别：

1. 小程序的渲染线程和脚本线程分别运行在不同的线程中。无法进行DOM操作；
2. 运行环境不同；
3. 开发环境不同；

开始开发：

1. 申请账号，获得小程序AppID；
2. 安装开发工具，输入AppID；
3. 编辑,微信扫码预览；

小程序代码构成：

• .json 配置

1. app.json ： 当前小程序的全局配置；
2. project.config.json ： 类似webpack的作用，工程配置；
3. page.json ： 页面配置 ；
4. 语法特点：字符串使用双引号，无法使用注释。支持数字、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 逻辑

  1. js脚本文件，使用bindtap=“事件名”的方式绑定事件到相应的标签；

小程序框架：

1. 小程序框架系统分为：逻辑层（App Service）和 视图层（View）；

2. 框架提供了一套基础组件，视图层可以使用基础组件像堆积木一样堆积出强大的微信小程序；

3. 逻辑层可以调用丰富的微信提供的API,如支付，获取用户信息等；

4. 由于小程序的逻辑层不是运行在浏览器中，所以不能使用window和document对象；

5. behaviors 用来让多个页面使用相同的数据和方法；

6. 页面的路由由框架进行管理；

7. 使用module.exports导出文件，使用require导入文件；

   module.exports.sayHello = sayHello
   exports.sayGoodbye = sayGoodbye

   var common = require(‘common.js’)

8. 全局数据在App()中设置；