omi-mp - 微信小程序开发和生成 Web

快速体验

把小程序项目拷贝到 src-mp 目录，如果是新的小程序，可以在 src-mp 目录创建小程序，目录要求：

目录说明:

  2. │  ├─ index    
  3. │  └─ logs   
  4. ├─ utils
  5. ├─ app.js
  7. ├─ app.wxss
  8. ├─ project.config.json

请严格按照上面目录约定，然后就可以使用小程序开发或生产 Web 了:

原理

  1. compile(`
  2. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  3.   <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
  5.     </view>
  6.   </view>
  7. </view>`)

编译之后：

Wxml 会被编译成 hyperscript，并且对应的标签会被转换成 HTML 标签。

WXSS 编译

编译前：

  1. view image .image{
  3. }

不仅仅标签会进行替换，rpx 也会在运行时替换成 px。

组件生命周期函数

名称 描述 Omi 是否支持
created 在组件实例进入页面节点树时执行，注意此时不能调用 setData 支持
attached 在组件实例进入页面节点树时执行 支持
ready 在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ） 支持
moved 在组件实例被移动到节点树另一个位置时执行 支持
detached 在组件实例被从页面节点树移除时执行 支持

支持的 API

  • wx.request
  • wx.navigateTo
  • wx.getSystemInfo
  • wx.getSystemInfoSync
  • wx.setNavigationBarTitle
  • this.triggerEvent

支持事件绑定，自定义事件绑定，支持 props、data 属性等等。

目前不支持导入 template 标签和一些原生组件标签，需要一些时间翻译成对应的 HTML 自定义元素，欢迎试用反馈或 PR。

License