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