腾讯 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}}"><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>
复制代码
老项目使用 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
腾讯 Omi 团队发布 mps - 原生小程序插上 JSX 、Less 和 Cloud 的翅膀相关推荐
- 如何使用 mps 开发原生小程序
最近自己手动试了一下有腾讯和京东团团队开发的一套mps 框架. 说实话可以算得上上手最快的一个了,他对于原生小程序没有如何干扰和影响 JSX 代替 WXML 书写结构,精简高效 对原生小程序零入侵 支 ...
- 破界!Omi生态omi-mp发布,用小程序开发生成Web
破界!Omi生态omi-mp发布,用小程序开发生成Web omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架,基于 Web Components ...
- 腾讯 Omi 生态发布
写在前面 Omi 4.0 发布至今,收到了大量的意见和建议以及真刀真枪的 PR,虽然现在接受 Omi 都是外国友人,但是随着 IE 市场份额的慢慢消失,可以遇见的未来,国人也会慢慢拥抱 Omi.Omi ...
- 原生小程序 申请小程序 - 发布流程
目录 原生小程序 申请小程序 - 发布流程 申请流程 开发管理 查看提交的代码 原生小程序 申请小程序 - 发布流程 微信公众号平台 申请流程 根据要求,填写相关资料,还有邮箱认证即可! 开发管理 点 ...
- 原生小程序+分销拼团(自行下载。。。。)
这是一款能跑起来的开源商城系统! 微信小程序电商平台(前后端开源PHP),包含分销,拼团等功能,整个系统架构非常简单,适合小型团队或者个人开发者二次开发 最新版体验后台:http://www.laik ...
- 原生小程序学习小结,mpvue+mpvue-weui+fyl.js小程序项目搭建笔记
官方文档:https://developers.weixin.qq.... 学习小结: 1.小程序.订阅号及服务号都是在微信公众平台的体系下,但小程序本身与订阅号及服务号是完全独立的,需要重新注册: ...
- Thor UI - 轻量简洁的免费开源移动端 UI 组件库,支持原生小程序和 uni-app
用来快速开发原生小程序或者通过 uni-app 来开发任何小程序甚至是 APP 的组件库,但我很好奇中文名是不是译作雷神 UI. Thor UI 介绍 Thor UI 是一款开发移动端网页应用.小程序 ...
- uni app 调用网络打印机_前端工程师 | 原生小程序坑点:uni-app到底好用在哪里?...
要想知道uni-app开发好用在哪里,我们先看看uni-app的官网,下图 系统的介绍.框架.组件.api的使用都非常的详细,感兴趣的朋友可以去尝试尝试. 我们进图正题,首先和原生小程序来比较,其次和 ...
- angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录 打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍 给大家画了一张图,重要 ...
最新文章
- 机器学习入门(05)— 使用 NumPy 实现 3 层简单神经网络
- Linux学习 Unit 12
- Redhat7 systemctl命令
- Chapter 1 First Sight——12
- CountVectorizer,Tf-idfVectorizer和word2vec构建词向量的区别
- Java8中使用以下类计算日期时间差:Period、Duration、ChronoUnit
- wampserver无法打开http://127.0.0.1/
- hive表定义(3种方式)
- ZZULIOJ 1094: 统计元音(函数专题)
- 余姚中考能用计算机吗,2018年余姚中考政策有大变化,2020年取消奖励加分项目...
- 企业ERP选型的两难困惑
- 轴固定位置_全面总结:轴零件固定方式及特点
- 二十七、单张图片上传预览
- 铁路智能巡检机器人——铁路上的“医生”
- r语言如何计算t分布临界值_第十二讲 R-配对样本t检验
- 历年奥斯卡获奖影片(1927—2015)
- 【mcuclub】红外测温-MLX90614
- 微信支付申请相关问题
- 依赖注入与pimple
- 高通4G全网通骁龙410系列-MSM8916(M9+) ( Cortex-A53架构)
热门文章
- 反射在java中的应用_java反射机制在项目中的运用
- mysql数据库mysqldump还原_mysqldump数据库备份与恢复
- sqlserver改主键初始ID
- 【学习Koa】原生koa2 静态资源服务器例子
- Redis与Memocache的区别
- 观察者模式在个人网站邮件发布与订阅中的实践
- codevs 2185 最长公共上升子序列--nm的一维求法
- (转)swc与swf的区别
- ASP.NET报错集合一----.net4.0创建项目后,在iis上部署项目,无法浏览,提示404
- SANTENDO的大脑训练计划