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

相关推荐
LK_0718 分钟前
【Open3D】Ch.3:顶点法向量估计 | Python
开发语言·笔记·python
li星野29 分钟前
打工人日报#20251011
笔记·程序人生·fpga开发·学习方法
摇滚侠31 分钟前
Spring Boot 3零基础教程,yml配置文件,笔记13
spring boot·redis·笔记
QT 小鲜肉33 分钟前
【个人成长笔记】在Ubuntu中的Linux系统安装 anaconda 及其相关终端命令行
linux·笔记·深度学习·学习·ubuntu·学习方法
QT 小鲜肉35 分钟前
【个人成长笔记】在Ubuntu中的Linux系统安装实验室WIFI驱动安装(Driver for Linux RTL8188GU)
linux·笔记·学习·ubuntu·学习方法
急急黄豆1 小时前
MADDPG学习笔记
笔记·学习
Chloeis Syntax1 小时前
栈和队列笔记2025-10-12
java·数据结构·笔记·
QZ_orz_freedom2 小时前
学习笔记--文件上传
java·笔记·学习
摇滚侠2 小时前
Spring Boot 3零基础教程,整合Redis,笔记12
spring boot·redis·笔记
爱吃甜品的糯米团子3 小时前
Linux 学习笔记之 VI 编辑器与文件查找技巧
linux·笔记·学习