Home

Awesome

react-kbone

使用 react 多端开发(小程序和Web),基于 kbone 的 element 和 render。

特性

一套语法多端运行

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
      <div onClick={clickHandle}>跳转</div>
    </div>
  )
}

function clickHandle() {
  if ('undefined' != typeof wx && wx.getSystemInfoSync) {
    wx.navigateTo({
      url: '../log/index?id=1',
    })
  } else {
    location.href = 'log.html'
  }
}

export default Counter

快速开始

npx kbone-cli init my-app
cd my-app
npm run mp        // 开发小程序
npm run build:mp  // 构建小程序
npm run web       // 开发 web
npm run build     // 构建 web

目录说明

├─ dist
│  ├─ mp     // 微信开发者工具指向的目录,用于生产环境
│  ├─ web    // web 编译出的文件,用于生产环境
├─ build     // 构建相关
├─ src
│  ├─ assets
│  ├─ components     // 存放所有组件
│  ├─ log.jsx        // 入口文件,会 build 成 log.html
│  └─ index.jsx      // 入口文件,会 build 成 index.html

注意事项

react 并没有提供根组件实例的销毁方法(如 vue.$destroy),所以在多页应用中页面关闭时不会触发该页面组件的 componentWillUnmount 钩子。开发者可自行监听 wxunload 或 beforeunload 事件来进行页面的销毁工作,比如调用 render 方法渲染一个空节点,强行触发页面组件的 componentWillUnmount 钩子。

谁在使用 kbone?

<table> <tbody> <tr> <td> <a target="_blank" href="https://developers.weixin.qq.com/community/develop/mixflow"> <img width="200px" src="https://raw.githubusercontent.com/wechat-miniprogram/kbone/develop/docs/images/code1.jpg"> </a> </td> <td> <a target="_blank" href="http://omijs.org"> <img width="200px" src="https://github.com/Tencent/omi/raw/master/assets/omi-cloud.jpg"> </a> </td> <td width="92px"> <a target="_blank" href="https://github.com/Tencent/omi/issues/new">告诉我们</a> </td> </tr> </tbody> </table>

License

MIT