框架簡介
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特性。
作者：前端精髓
著作權歸作者所有，極樂技術社區獲得轉載授權。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。