框架简介
Mpx 是滴滴开源的一款致力于提高小程序开发体验的增强型小程序框架，通过 Mpx ，我们能够最先进的 web 开发体验 (Vue + Webpack) 来开发生产性能深度优化的小程序，Mpx 具有以下一些优秀特性：
- 数据响应特性 (watch/computed)
- 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)
- 深度性能优化(原生自定义组件/基于依赖收集和数据变化的 setData)
- Webpack 编译 ( npm/循环依赖/Babel/ESLint/css 预编译/代码优化等)
- 单文件组件开发
- 状态管理 (Vuex 规范/多实例/可合并)
- 跨团队合作 (packages)
- 逻辑复用能力 (mixins)
- 脚手架支持
- 小程序自身规范的完全支持
- 支付宝小程序的支持
<template>
<!--动态样式-->
<view class="container" wx:style="{
{dynamicStyle}}">
<!--数据绑定-->
<view class="title">{
{title}}</view>
<!--计算属性数据绑定-->
<view class="title">{
{reversedTitle}}</view>
<view class="list">
<!--循环渲染，动态类名，事件处理内联传参-->
<view wx:for="{
{list}}" wx:key="id" class="list-item" wx:class="{
{ {active:item.active} }}"
bindtap="handleTap(index)">
<view>{
{item.content}}</view>
<!--循环内部双向数据绑定-->
<input type="text" wx:model="{
{list[index].content}}"/>
</view>
</view>
<!--自定义组件获取实例，双向绑定，自定义双向绑定属性及事件-->
<custom-input wx:ref="ci" wx:model="{
{customInfo}}" wx:model-prop="info" wx:model-event="change"/>
<!--动态组件，is传入组件名字符串，可使用的组件需要在json中注册，全局注册也生效-->
<component is="{
{current}}"></component>
<!--显示/隐藏dom-->
<view class="bottom" wx:show="{
{showBottom}}">
<!--模板条件编译，__mpx_mode__为框架注入的环境变量，条件判断为false的模板不会生成到dist-->
<view wx:if="{
{__mpx_mode__ === 'wx'}}">wx env</view>
<view wx:if="{
{__mpx_mode__ === 'ali'}}">ali env</view>
</view>
</view>
</template>
<script>
import { createPage } from '@mpxjs/core'
createPage({
data: {
// 动态样式和类名也可以使用computed返回
dynamicStyle: {
fontSize: '16px',
color: 'red'
},
title: 'hello world',
list: [
{
content: '全军出击',
id: 0,
active: false
},
{
content: '猥琐发育，别浪',
id: 1,
active: false
}
],
customInfo: {
title: 'test',
content: 'test content'
},
current: 'com-a',
showBottom: false
},
computed: {
reversedTitle () {
return this.title.split('').reverse().join('')
}
},
watch: {
title: {
handler (val, oldVal) {
console.log(val, oldVal)
},
immediate: true
}
},
handleTap (index) {
// 处理函数直接通过参数获取当前点击的index，清晰简洁
this.list[index].active = !this.list[index].active
},
onReady () {
setTimeout(() => {
// 更新数据，同时关联的计算属性reversedTitle也会更新
this.title = '你好，世界'
// 此时动态组件会从com-a切换为com-b
this.current = 'com-b'
}, 1000)
}
})
</script>
<script type="application/json">
{
"usingComponents": {
"custom-input": "../components/custom-input",
"com-a": "../components/com-a",
"com-b": "../components/com-b"
}
}
</script>
<style lang="stylus">
.container
position absolute
width 100%
</style>
复制代码安装使用
# 安装mpx命令行工具
npm i -g @mpxjs/cli
# 初始化项目
mpx init <project-name>
# 进入项目目录
cd <project-name>
# 安装依赖
npm i
# development
npm run watch
# production
npm run build -p
Copy
复制代码
简单示例
下面是使用mpx框架开发的外卖小程序页面，项目地址：github
项目已经兼容微信小程序，支付宝小程序，web页面。项目包含两个页面，一个是首页点餐页面，一个是商品详情页面。主要内容是动态组件component-is 特性，watch，computed，创建 store 容器管理状态，等 mpx 增强的 API。
使用感受
在使用mpx能感受到像拥有vue语法一样的特性，包括文件的结构，一些增强的API语法和响应式数据。框架是基于微信语法可以直接转换成其他类型的小程序。所以只要会微信原生小程序开发就能直接上手了。
mpx是如何跨端的呢？它可以把微信的指令转换为其他小程序的指令，如果遇到跨端之间无法兼容的属性怎么办？这个时候我们需要添加环境判断，来针对指定的端进行语法输出。如果是不做跨端小程序只做微信小程序可以用吗？其实也是可以使用，因为增强的API可以带来更好的开发体验，比如经常使用的watch，computed特性。
作者：前端精髓
著作权归作者所有，极乐技术社区获得转载授权。商业转载请联系作者获得授权，非商业转载请注明出处。