写在最前面
Q:为什么会写这篇文章?
A:实战项目完成后的总结,是一种很好的学习。
Q:为什么会用 Kbone 而不是 Taro?
A:Kbone 是微信官方推出的哈哈哈。
Q:为什么不直接用微信小程序原生开发?
A:因为有 Kbone 跨平台工具,再加上本身会 React 了。如果用微信小程序原生开发需要学习成本(主要是笨&懒)!
快速访问
Kbone + React 小程序搭建流程
kbone init my-app
选择React
npm run mp
- 微信开发者工具新建小程序,目录指向
kbone
的my-app/build/mp
Kbone
的 React
项目模板
- 官方提供的直接
Clone
拿来用 - React 项目模板 - 自己开发
my-app/src/index.js
import React from 'react' import ReactDOM from 'react-dom' import App from './App' export default function createApp() { const container = document.createElement('div') container.id = 'app' document.body.appendChild(container) ReactDOM.render(<App />, container) } "undefined" != typeof wx && wx.getSystemInfoSync || createApp() 复制代码
- 组件开发和传统
React
一样
Less
支持
kbone
新建的 React
项目默认不支持 Sass
,而且我设置 Sass
好几次都没成功。 最总还是决定使用 Less
吧。
- 在
webpack.mp.config.js
下把原先的css
替换成{ test: /.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'less-loader', }, ], }, 复制代码
kbone
配置小程序参数
scripts/miniprogram.config.js
每次更改需要再次 npm run mp
module.exports = {
redirect: {
notFound: 'index',
accessDenied: 'index',
},
generate: {
autoBuildNpm: 'npm',
},
app: {
navigationBarTitleText: '小程序标题',
backgroundColor: '#d23836',// 页面背景色
navigationBarBackgroundColor: '#d23836',// 顶部栏背景色
navigationStyle:'custom',// 不现实顶部栏全屏页面
},
appExtraConfig: {
sitemapLocation: 'sitemap.json',
},
global: {
pageBackgroundColor: '#d23836',// 页面上下拉拽背景色
share: false,// 默认关闭分享
},
pages: {},
optimization: {
domSubTreeLevel: 10,
elementMultiplexing: true,
textMultiplexing: true,
commentMultiplexing: true,
domExtendMultiplexing: true,
styleValueReduce: 5000,
attrValueReduce: 5000,
},
projectConfig: {
projectname: '小程序项目名称',
appid: '小程序开发appid',
},
}
复制代码
Kbone
+ React
使用中遇到的小坑汇总
- 不支持
id
选择器定义样式 - 不支持
button[disabled]
选择器定义样式 img
图片无法设置满屏高度,例:height:100vh
- 不支持
lucky-canvas
的React
原生版 - 删除
src/log.js
后,记得在scripts/webpack.mp.config.js
里删除log: path.resolve(__dirname, '../src/log.js')
小程序那点事儿
- 首次提交小程序会让填写
***小程序隐私保护引导
,认真如实仔细积极填写(过来人 - 一个公众号可以关联(认证要
300
)或者注册(已认证公众号注册不要钱?) - 自己目前提交小程序审核感觉还挺快的,可能内容不复杂的关系吧
持续更新