Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wechat-miniprogram/kbone-template-preact
a simple preact template for kbone
https://github.com/wechat-miniprogram/kbone-template-preact
Last synced: about 2 months ago
JSON representation
a simple preact template for kbone
- Host: GitHub
- URL: https://github.com/wechat-miniprogram/kbone-template-preact
- Owner: wechat-miniprogram
- License: mit
- Created: 2019-09-03T02:37:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-04-06T02:13:22.000Z (over 2 years ago)
- Last Synced: 2024-11-08T12:13:46.423Z (about 2 months ago)
- Language: JavaScript
- Size: 411 KB
- Stars: 12
- Watchers: 11
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# preact-kbone
使用 [preact](https://github.com/preactjs/preact) 多端开发(小程序和Web)，基于 [kbone](https://github.com/Tencent/kbone) 的 element 和 render。
## 特性
* 使用最好的 react web 框架 preact，轻量迅速（react 不是最好的 react web 框架）
* 由于 3kb preact 加持，生成出的包大小超级小！！
## 一套语法多端运行
```jsx
import { h } from 'preact'
import { useState } from 'preact/hooks'
import './index.css'
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
```
## 注意事项
preact 并没有提供根组件实例的销毁方法（如 vue.$destroy），所以在多页应用中页面关闭时不会触发该页面组件的 componentWillUnmount 钩子。开发者可自行监听 wxunload 或 beforeunload 事件来进行页面的销毁工作，比如调用 render 方法渲染一个空节点，强行触发页面组件的 componentWillUnmount 钩子。
## 谁在使用 kbone？
## License
MIT
