omi/packages/omip

Omi 跨端云开发

ProjectName	Description
omip	直接使用 Omi 开发小程序或 H5 SPA
mps	【原生小程序】增强的小程序开发框架(JSX+Less 输出 WXML+WXSS)
cax	小程序 Canvas 和 SVG 渲染引擎
mps-cloud	【原生小程序云开发】小程序插上 JSX、Less 和 Cloud 的翅膀
omi-cloud	Omip + 小程序•云开发
omix	【原生小程序】极小却精巧的小程序框架
omi-mp	【原生小程序】通过微信小程序开发和生成 Web 单页应用(H5 SPA)
comi	小程序代码高亮和 markdown 渲染组件

Omip

使用 Omi 开发小程序或 H5 SPA

现在，Omi 不仅仅可以开发桌面 Web、移动 H5，还可以直接开发小程序！

• Write Once, Run Anywhere
• Learn Once, Write Anywhere

Omip 特性

• 一次学习，多处开发，一次开发，多处运行
• 使用 JSX，表达能力和编程体验大于模板
• 支持使用 npm/yarn 安装管理第三方依赖
• 支持使用 ES6+
• 支持使用 CSS 预编译器
• 小程序 API 优化，异步 API Promise 化
• 超轻量的依赖包，顺从小程序标签和组件的设计
• 支持→ 小程序•云开发

快速开始

npm i omi-cli -g
omi init-p my-app
cd my-app
npm start        //开发小程序
npm run dev:h5   //开发 h5
npm run build:h5 //发布 h5

node 版本要求 >= 8

也支持一条命令 npx omi-cli init-p my-app (npm v5.2.0+)

把小程序目录设置到 dist 目录就可以愉快地调试了！

也可以初始化 TypeScript 模板项目:

omi init-p-ts my-app

也支持一条命令 npx omi-cli init-p-ts my-app (npm v5.2.0+)

代码示例

import { WeElement, define } from 'omi'
import './index.css'

define('page-counter', class extends WeElement {
  config = {
    navigationBarTitleText: 'Counter'
  }

  data = {
    count: 1
  }

  sub = () => {
    this.data.count--
    this.update()
  }

  add = () => {
    this.data.count++
    this.update()
  }

  render() {
    return (
      <view>
        <button onClick={this.sub}>-</button>
        <text>{this.data.count}</text>
        <button onClick={this.add}>+</button>
      </view>
    )
  }
})

扩展

this.update 方法可以传递最短路径，进行更新，比如下面两种写法是等价的。

this.update({
  count: 1
})

等价于:

this.data.count = 1
this.update()

也可以和 setData 一样传递 path:

this.update({
  'list[1].obj.name': 'Omip'
})

由于小程序视图更新是异步的，如果需要获取视图更新后的回调，可以使用第二个参数:

this.update({
  'list[1].obj.name': 'Omip'
}, () => {
  console.log('更新完成')
})

或者只有一个参数，且该参数为函数:

this.update(() => {
  console.log('更新完成')
})

注意事项

在 JSX 或者一些要使用图片资源的 API，需要使用 import 或者 require 先导入图片再使用，不能直接使用相对地址！

如：

 onShareAppMessage(){
		return {
      title: '分享标题',
      path: '/pages/index/index?id=123',
      imageUrl: require('./share.jpg'),
      success: (res) => {
        console.log("转发成功", res);
      },
      fail: (res) => {
        console.log("转发失败", res);
      }
    }
  }

再比如:

import src from './my-image.png'
...
...


  render() {
    return (
      <view>
        <image src={src}></image>
      </view>
    )
  }
...
...

访问原生小程序里的 this

this.$scope

使用原生的自定义组件

import { WeElement, define } from 'omi'
import './index.css'

define('page-index', class extends WeElement {
  config = {
    // 定义需要引入的第三方组件
    usingComponents: {
      'pure-ele-test': '../../components/pure-ele-test/index' // 书写第三方组件的相对路径
    }
  }


  render() {
    return (
      <view class="container">
        <pure-ele-test></pure-ele-test>
      </view>
    )
  }
})

获取最新的 omip 版本

你只需要重新拉去模板便可以更新到最新的 omip:

omi init-p my-app

实战案例

License

MIT © dntzhang

Open Source Software Licensed Under the MIT License:

tarojs 1.2.13 Copyright (c) 2019 O2Team