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

看下官方模板的转换例子：

因为 Web 里拉取不到用户登录态，更换了用户头像和名称。

再看下豆瓣 DEMO 转换的例子:

你可以在这里找到这个豆瓣小程序。

快速体验

特别注意，由于 concurrently 不明原因起不来导致 npm start 报错，可以试着分两个命令行执行，和 npm start 同样的效果:

  1. node scripts/start.js

目录说明:

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

  1. npm start  //开发
  2. npm build  //发布

原理

举个99乘法表的例子:

编译之后：

  1. function render() {
  3.     h('div', {}, [1, 2, 3, 4, 5, 6, 7, 8, 9].map((i, index) => {
  4.       h('div', {}, [1, 2, 3, 4, 5, 6, 7, 8, 9].map((j, index) => {
  5.         i <= j && h('div', {}, [`${i} * ${j} = ${i * j}`])
  6.       }))
  8. }

WXML 会被编译成 hyperscript，并且对应的标签会被。

WXSS 编译

编译后:

  1. div img .image{
  2.   color: red;

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

组件生命周期函数

支持的 API

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

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

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

License

MIT @dntzhang