Kbone + React 开发小程序

写在最前面

Q：为什么会写这篇文章？

A：实战项目完成后的总结，是一种很好的学习。

Q：为什么会用 Kbone 而不是 Taro？

A：Kbone 是微信官方推出的哈哈哈。

Q：为什么不直接用微信小程序原生开发？

A：因为有 Kbone 跨平台工具，再加上本身会 React 了。如果用微信小程序原生开发需要学习成本（主要是笨&懒）！

快速访问

• Kbone 开发文档
• Kbone Github
• 小程序 开发文档
• 微信公众平台

Kbone + React 小程序搭建流程

1. kbone init my-app 选择 React
2. npm run mp
3. 微信开发者工具新建小程序，目录指向 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 使用中遇到的小坑汇总

1. 不支持 id 选择器定义样式
2. 不支持 button[disabled] 选择器定义样式
3. img 图片无法设置满屏高度，例：height:100vh
4. 不支持 lucky-canvas 的 React 原生版
5. 删除 src/log.js 后，记得在 scripts/webpack.mp.config.js 里删除log: path.resolve(__dirname, '../src/log.js')

小程序那点事儿

1. 首次提交小程序会让填写***小程序隐私保护引导，认真如实仔细积极填写（过来人
2. 通过认证过的公众号快速注册小程序账号（不要钱）
3. 自己目前提交小程序审核感觉还挺快的，可能内容不复杂的关系吧

持续更新