MPX 小程序框架 - Tracy 小笔记

第1章Mpx课程导学

1-1 mpx介绍

MPX:全面拥抱原生的框架

官方文档：Introduction · mpx文档

基于 Mobo 实现高效的数据相应，基于 webpack 实现基于依赖手机的优化编译

1-2开始

1. 下载开发者工具

2. 根据 mpx 官方文档安装 mpx

3. 根据文档初始化项目，可以开发微信小程序，支付宝小程序，QQ小程序等等

4. 进入目录安装 依赖

5. development

   npm run watch

   production

   npm run build

6. 打开开发者工具，导入dist/wx,填写 appID

7. 开发者工具左上角 ：模拟器和调试器我们总用，编译器是可以看的但是不能再这里改，因为这是我们框架生成的原生的代码

8. 打开 vs-code

9. 下载相关插件 在mpx 文档的单位件-编辑器、IDE 配置中
   vscode 添加插件 mpx、minapp、Vetur、Color Highlight、language-stylus等

1-3 效果演示

1. 开 mpx 官方github: github.com/didi/mpx

2. donwload 下来

3. 项目在examples 文件夹中

4. 试跑 examples/todoMVC 项目

5. npm install

6. npm run build, 这个命令能生成 dist 文件夹中的文件

7. 微信开发者 工具导入该项目

8. src/app.mpx 小程序入口文件

9. <script name="application/json" mode="ali" > 支付宝
   <script name="application/json" mode="wx" > 微信
   根据微信小程序平台的不同，进行的差异化的编译（多肽协议）

   mpx 不仅支持块级别的条件协议，而且支持文件级别，代码行级别的条件协议

10. mpx 一个页面一个文件，而不是像原生一样一个页面还要创建文件夹对应4个文件

第2章Mpx能力增强

2-1 数据响应

可以像 vue 一样设置 data, computed, load(),watch等

2-2 状态管理

2-3 模板增强

2-4样式及json增强

第3章TODO-MVC练习

3-1 todo-mvc

3-2 todomvc逻辑完善

3-3 样式美化

第4章Mpx进阶使用

4-1优化结构及跨平台

4-2组件库及资源处理