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组件库及资源处理

相关推荐
流星52112237 分钟前
GC 如何判断对象该回收?从可达性分析到回收时机的关键逻辑
java·jvm·笔记·学习·算法
新子y1 小时前
【小白笔记】「while」在程序语言中的角色
笔记·python
狡猾大先生2 小时前
ESP32S3-Cam实践(OLED表情动画-手搓)
笔记·1024程序员节
2301_800256112 小时前
地理空间数据库作业笔记——查询最偏僻的城市
数据库·笔记·sql·postgresql·1024程序员节
Cathy Bryant4 小时前
线性代数直觉(四):找到特征向量
笔记·神经网络·考研·机器学习·数学建模
012925204 小时前
1.1 笔记 html 基础 初认识
前端·笔记·html
DKPT5 小时前
JVM直接内存和堆内存比例如何设置?
java·jvm·笔记·学习·spring
sulikey5 小时前
Qt 入门简洁笔记:信号与槽
前端·c++·笔记·qt·前端框架·1024程序员节·qt框架
报错小能手6 小时前
项目——基于C/S架构的预约系统平台(2)
linux·c语言·笔记·学习·架构
9ilk7 小时前
【同步/异步 日志系统】 --- 前置技术
笔记·后端·其他·中间件