寫在前面

原生小程序插上 JSX 、Less 和 Cloud 的翅膀

mps 是什么？為什么需要 mps？先列舉幾個現(xiàn)狀:

• 目前小程序開發(fā)使用最多的技術(shù)依然是原生小程序
• 原生小程序的 API 在不斷完善和進化中
• JSX 是表達能力和編程體驗最好的 UI 表達式
• JSX 可以表達一切想表達的 UI 結(jié)構(gòu)也就能夠描述任意 WXML

所以，就有了 mps。 讓開發(fā)者直接在原生小程序使用 JSX 寫 WXML，實時編譯，實時預(yù)覽。

→ mps github 地址

• JSX 代替 WXML 書寫結(jié)構(gòu)，精簡高效
• 對原生小程序零入侵
• 支持 JS 和 TS
• 實時編譯，實時預(yù)覽
• 輸出 WXML 自動美化
• 支持 Less 輸出 WXSS

效果預(yù)覽

立即開始

$ npm i omi-cli -g $ omi init-mps my-app $ cd my-app $ npm start 復(fù)制代碼

接著把小程序目錄設(shè)置為 my-app 目錄便可以愉快地開始開發(fā)調(diào)試了！

npx omi-cli init-mps my-app 也支持(npm v5.2.0+)

生成的目錄和官方的模板一致，只不過多了 JSX 文件，只需要修改 JSX 文件就會實時修改 WXML。

也支持 typescript:

$ omi init-mps-ts my-app 復(fù)制代碼

其他命令一樣。

npx omi-cli init-mps-ts my-app 也支持(npm v5.2.0+)

mps-cloud

mps 也支持云開發(fā)：

$ npm i omi-cli -g $ omi init-mps-cloud my-app $ cd my-app/miniprogram $ npm install $ npm start 復(fù)制代碼

使用云開發(fā)沒有 dist 目錄，直接把當前的 my-app 設(shè)置為微信開發(fā)者工具的目錄。

JSX vs WXML

這里是一個真實的案例說明 JSX 的精巧高效的表達能力:

編譯前的 JSX:

<view class='pre language-jsx'><view class='code'>{tks.map(tk => {return tk.type === 'tag' ? <text class={'token ' + tk.type}>{tk.content.map(stk => {return stk.deep ? stk.content.map(sstk => {return <text class={'token ' + sstk.type}>{sstk.content || sstk}</text>}) : <text class={'token ' + stk.type}>{stk.content || stk}</text>})}</text> : <text class={'token ' + tk.type}>{tk.content || tk}</text>})}</view> </view> 復(fù)制代碼

編譯后 WXML:

<view class="pre language-jsx"><view class="code"><block wx:for="{{tks}}" wx:for-item="tk" wx:for-index="_anonIdx4"><block wx:if="{{tk.type === 'tag'}}"><text class="{{'token ' + tk.type}}"><blockwx:for="{{tk.content}}"wx:for-item="stk"wx:for-index="_anonIdx2"><block wx:if="{{stk.deep}}"><textclass="{{'token ' + sstk.type}}"wx:for="{{stk.content}}"wx:for-item="sstk"wx:for-index="_anonIdx3">{{sstk.content || sstk}}</text></block><block wx:else><text class="{{'token ' + stk.type}}">{{stk.content || stk}}</text></block></block></text></block><block wx:else><text class="{{'token ' + tk.type}}">{{tk.content || tk}}</text></block></block></view> </view> 復(fù)制代碼

老項目使用 mps

拷貝以下文件到小程序根目錄:

• _scripts 目錄所有文件
• package.json
• gulpfile.js

設(shè)置 project.config.json 里的 packOptions.ignore 忽略以上的文件，然后:

$ npm install $ npm start 復(fù)制代碼

mps 約定

公共的 less 文件必須放在 common-less 目錄，@import 使用的時候不需要寫路徑。

推薦搭配

既然用了原生小程序的方案，所有可以輕松使用 mps + omix 搭配一起使用。

歡迎使用騰訊 Omi 團隊集合京東 O2Team 智慧聯(lián)合打造的 mp-jsx 大幅提高開發(fā)效率，Have fun!

Github

→ mps

總結(jié)

以上是生活随笔為你收集整理的腾讯 Omi 团队发布 mps - 原生小程序插上 JSX 、Less 和 Cloud 的翅膀的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。