diff --git a/assets/mps.gif b/assets/mps.gif new file mode 100644 index 000000000..44ac76d0d Binary files /dev/null and b/assets/mps.gif differ diff --git a/packages/mp-jsx/README.md b/packages/mp-jsx/README.md index 657c4fc3c..b9ebf8fb2 100644 --- a/packages/mp-jsx/README.md +++ b/packages/mp-jsx/README.md @@ -1,137 +1,3 @@ -## mps +## 更名为 mps -> 原生小程序插上 JSX 的翅膀 - -mps 是什么?为什么需要 mps?先列举几个现状: - -* 目前小程序开发使用最多的技术依然是原生小程序 -* 原生小程序的 API 在不断完善和进化中 -* JSX 是表达能力和编程体验最好的 UI 表达式 -* JSX 可以表达一切想表达的 UI 结构也就能够描述任意 WXML - -所以,就有了 mp-jsx。 让开发者直接在原生小程序使用 JSX 写 WXML,实时编译,实时预览。 - -![](https://github.com/Tencent/omi/raw/master/assets/mp-jsx.jpg) - -- JSX 代替 WXML 书写结构,精简高效 -- 对原生小程序零入侵 -- 支持 JS 和 TS -- 实时编译,实时预览 -- 输出 WXML 自动美化 - -## 效果预览 - -![](https://github.com/Tencent/omi/raw/master/assets/mp-jsx.gif) - -## 立即开始 - -```bash -$ npm i omi-cli -g -$ omi init-jsx my-app -$ cd my-app -$ npm start -``` - -接着把小程序目录设置为 my-app 目录便可以愉快地开始开发调试了! - -> `npx omi-cli init-jsx my-app` 也支持(npm v5.2.0+) - -生成的目录和官方的模板一致,只不过多了 JSX 文件,只需要修改 JSX 文件就会实时修改 WXML。 - -也支持 typescript: - -```bash -$ omi init-jsx-ts my-app -``` - -其他命令一样。 - -> `npx omi-cli init-jsx-ts my-app` 也支持(npm v5.2.0+) - -## JSX vs WXML - -这里是一个真实的案例说明 JSX 的精巧高效的表达能力: - -编译前的 JSX: - -```jsx - - - {tks.map(tk => { - return tk.type === 'tag' ? { - tk.content.map(stk => { - return stk.deep ? stk.content.map(sstk => { - return {sstk.content || sstk} - }) : {stk.content || stk} - })} : {tk.content || tk} - })} - - -``` - -编译后 WXML: - -```jsx - - - - {{sstk.content || sstk}} - - {{stk.content || stk}} - - - - - {{tk.content || tk}} - - - - -``` - -## 老项目使用 mps - -拷贝以下文件到小程序根目录: - -* _scripts 目录所有文件 -* package.json -* gulpfile.js - -设置 project.config.json 里的 packOptions.ignore 忽略以上的文件,然后: - -``` bash -$ npm install -$ npm start -``` - -## 推荐搭配 - -既然用了原生小程序的方案,所有可以轻松使用 mps + [omix](https://github.com/Tencent/omi/tree/master/packages/omix) 搭配一起使用。 - -欢迎使用腾讯 Omi 团队集合京东 O2Team 智慧联合打造的 mps 大幅提高开发效率,Have fun! - -## License - -MIT © Tencent - -Open Source Software Licensed Under the MIT License: - -@tarojs/transformer-wx 1.2.22 -Copyright (c) 2019 O2Team +地址已经迁移至这里:[https://github.com/Tencent/omi/tree/master/packages/mps](https://github.com/Tencent/omi/tree/master/packages/mps) \ No newline at end of file diff --git a/packages/mps/README.md b/packages/mps/README.md index 7248cd038..43d798281 100644 --- a/packages/mps/README.md +++ b/packages/mps/README.md @@ -21,7 +21,7 @@ mps 是什么?为什么需要 mps?先列举几个现状: ## 效果预览 -![](https://github.com/Tencent/omi/raw/master/assets/mp-jsx.gif) +![](https://github.com/Tencent/omi/raw/master/assets/mps.gif) ## 立即开始