写在前面
原生小程序插上 JSX 和 Less 的翅膀
mps 是什么?为什么需要 mps?先列举几个现状:
- 目前小程序开发使用最多的技术依然是原生小程序
- 原生小程序的 API 在不断完善和进化中
- JSX 是表达能力和编程体验最好的 UI 表达式
- JSX 可以表达一切想表达的 UI 结构也就能够描述任意 WXML
所以,就有了 mps。 让开发者直接在原生小程序使用 JSX 写 WXML,实时编译,实时预览。
- JSX 代替 WXML 书写结构,精简高效
- 对原生小程序零入侵
- 支持 JS 和 TS
- 实时编译,实时预览
- 输出 WXML 自动美化
- 支持 Less 输出 WXSS
效果预览
立即开始
$ npm i omi-cli -g
$ omi init-mps my-app
$ cd my-app
$ npm start
接着把小程序目录设置为 my-app 目录便可以愉快地开始开发调试了!
npx omi-cli init-mps my-app
也支持(npm v5.2.0+)
生成的目录和官方的模板一致,只不过多了 JSX 文件,只需要修改 JSX 文件就会实时修改 WXML。
也支持 typescript:
$ omi init-mps-ts my-app
其他命令一样。
npx omi-cli init-mps-ts my-app
也支持(npm v5.2.0+)
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>
编译后 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}}"
><block
wx:for="{{tk.content}}"
wx:for-item="stk"
wx:for-index="_anonIdx2"
><block wx:if="{{stk.deep}}"
><text
class="{{'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>
老项目使用 mps
拷贝以下文件到小程序根目录:
- _scripts 目录所有文件
- package.json
- gulpfile.js
- .jsx 和 .less 文件
设置 project.config.json 里的 packOptions.ignore 忽略以上的文件,具体的配置可以从这里复制过去,然后:
$ npm install
$ npm start
mps 约定
公共的 less 文件必须放在 common-less 目录,@import 使用的时候不需要写路径。
推荐搭配
既然用了原生小程序的方案,所有可以轻松使用 mps + omix 搭配一起使用。
欢迎使用腾讯 Omi 团队集合京东 O2Team 智慧联合打造的 mp-jsx 大幅提高开发效率,Have fun!
大牛你好,我用了omi,生成了my-app项目,但是微信开发者工具并不支持打开jsx文件,而且svg文件要如何自动转成svg.js呢?
能否更进一步?把 Page 和 Component 做成单文件组件,把 template 也做成能够同时书写 jsx 和 less 的单文件组件,得到一份对小程序入侵性为零,迁移成本极低的组件化解决方案。