Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wechat-miniprogram/kbone-template-react
a simple react template for kbone
https://github.com/wechat-miniprogram/kbone-template-react
Last synced: about 2 months ago
JSON representation
a simple react template for kbone
- Host: GitHub
- URL: https://github.com/wechat-miniprogram/kbone-template-react
- Owner: wechat-miniprogram
- License: mit
- Created: 2019-09-03T02:36:33.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-04-06T02:13:10.000Z (over 2 years ago)
- Last Synced: 2024-11-08T12:13:44.079Z (about 2 months ago)
- Language: JavaScript
- Size: 403 KB
- Stars: 137
- Watchers: 13
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-kbone
使用 react 多端开发(小程序和Web)，基于 [kbone](https://github.com/Tencent/kbone) 的 element 和 render。
## 特性
* 一键接入，立即使用
* 支持完整 JSX 语法，任意位置任意方式书写 JSX
## 一套语法多端运行
```jsx
function Counter() {
const [count, setCount] = useState(0)
return (
setCount(count - 1)}>-
{count}
setCount(count + 1)}>+
跳转
)
}
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？
## License
MIT
