MPX 小程序框架 - Tracy 小笔记

小小程序员——Tracy

已于 2023-09-23 15:54:38 修改

阅读量607

点赞数

分类专栏：小程序文章标签：笔记

于 2023-09-17 10:54:35 首次发布

本文链接：https://blog.csdn.net/weixin_48702807/article/details/132755061

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第1章Mpx课程导学

1-1 mpx介绍

MPX:全面拥抱原生的框架

官方文档：Introduction · mpx文档

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

1-2开始

下载开发者工具
根据 mpx 官方文档安装 mpx
根据文档初始化项目，可以开发微信小程序，支付宝小程序，QQ小程序等等
进入目录安装依赖
# development
npm run watch

# production
npm run build
打开开发者工具，导入dist/wx,填写 appID
同时 appID 也要填写到项目 project.config.json 中的 appid 中
开发者工具左上角：模拟器和调试器我们总用，编译器是可以看的但是不能再这里改，因为这是我们框架生成的原生的代码
打开 vs-code
下载相关插件在mpx 文档的单位件-编辑器、IDE 配置中
vscode 添加插件 mpx、minapp、Vetur、Color Highlight、language-stylus等

1-3 效果演示

开 mpx 官方github: github.com/didi/mpx
donwload 下来
项目在examples 文件夹中
试跑 examples/todoMVC 项目
npm install
npm run build, 这个命令能生成 dist 文件夹中的文件
微信开发者工具导入该项目
src/app.mpx 小程序入口文件
<script name="application/json" mode="ali" > 支付宝
<script name="application/json" mode="wx" > 微信
根据微信小程序平台的不同，进行的差异化的编译（多肽协议）

mpx 不仅支持块级别的条件协议，而且支持文件级别，代码行级别的条件协议
mpx 一个页面一个文件，而不是像原生一样一个页面还要创建文件夹对应4个文件

第2章Mpx能力增强

2-1 数据响应

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

2-2 状态管理

类似于 vuex 的状态管理，来实现组件间通讯

src/store/index.js

查看文档：数据管理 · mpx文档

事件绑定需要阅读原生的小程序开发文档：事件 | 微信开放文档

state: 状态

getters: 获取特定状态的 state,比如说对某state 进行过滤或者计数等

mutations: 同步更改 state

actions: 异步方法，再通过 commit mutation 来更改 state

子模块和多实例

当应用变得非常复杂时，store 对象就有可能变得相当臃肿
mpx内置store 允许我们将 store 分割成模块（类似于 vue ）
允许创建多实例，各store实例彼此互相独立，状态互不干扰（更推荐这个）

2-3 模板增强

双向绑定

<input type="text" wx:model="{{value}}" />

<view>{{value}}</view>

data:{value:""}

内联传参

<view wx:for="listData">

<button bindtap="clickButton(item)">第{{index}}项</button>

</view>

method:{

        clickButton(item){console.log(item);}

}

动态组件

<component is="{{componentName}}"></component>

data:{
componentName："test1"
}

<script type="application/json">
{"usingComponents":{"test1":"../components/test1"}
}
</script>


这里还要创建一个 text1.mpx 组件

样式类名绑定

template增强特性 · mpx文档