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

相关推荐
咸甜适中10 分钟前
rust语言 (1.88) egui (0.32.2) 学习笔记(逐行注释)(二十八)使用图片控件显示图片
笔记·学习·rust·egui
一又四分之一.18 分钟前
高数基础知识(下)②
笔记
ZHANG8023ZHEN1 小时前
fMoE论文阅读笔记
论文阅读·笔记
Ro Jace2 小时前
文献阅读笔记:R&S电子战测试与测量技术文档
笔记
ZZHow10243 小时前
Maven入门_简介、安装与配置
java·笔记·maven
芜狄6 小时前
UCOSIII移植——学习笔记1
笔记·嵌入式硬件·学习·stm32f103rct6·ucosiii实时操作系统
所愿ღ6 小时前
JavaWeb-Servlet总结及JSP
java·笔记·servlet
笨鸟笃行7 小时前
人工智能训练师三级备考笔记
笔记
Ro Jace7 小时前
文献阅读笔记:JAPCC2018年秋冬刊第27期期刊
笔记
新子y8 小时前
【小白笔记】符号链接
笔记