腾讯 Omi 团队发布 mps - 原生小程序插上 JSX 、Less 和 Cloud 的翅膀

写在前面

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

mps 是什么？为何须要 mps？先列举几个现状:

• 目前小程序开发使用最多的技术依然是原生小程序
• 原生小程序的 API 在不断完善和进化中
• JSX 是表达能力和编程体验最好的 UI 表达式
• JSX 能够表达一切想表达的 UI 结构也就可以描述任意 WXML

因此，就有了 mps。 让开发者直接在原生小程序使用 JSX 写 WXML，实时编译，实时预览。

→ mps github 地址

• 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+)

mps-cloud

mps 也支持云开发：

$ npm i omi-cli -g              
$ omi init-mps-cloud my-app    
$ cd my-app/miniprogram  
$ npm install    
$ npm start               
复制代码

使用云开发没有 dist 目录，直接把当前的 my-app 设置为微信开发者工具的目录。

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

设置 project.config.json 里的 packOptions.ignore 忽略以上的文件，而后:

$ npm install
$ npm start
复制代码

mps 约定

公共的 less 文件必须放在 common-less 目录，@import 使用的时候不须要写路径。

推荐搭配

既然用了原生小程序的方案，全部能够轻松使用 mps + omix 搭配一块儿使用。

欢迎使用腾讯 Omi 团队集合京东 O2Team 智慧联合打造的 mp-jsx 大幅提升开发效率，Have fun!

Github

→ mps