Write it up front

Q: Why did you write this article?

A: The summary after the actual combat project is A good way to learn.

Q: Why Kbone instead of Taro?

A: Kbone is officially launched by wechat hahaha.

Q: Why not directly use wechat small program native development?

A: Because of the Kbone cross-platform tool, plus the React itself. If you use wechat small program native development needs to learn the cost (mainly stupid & lazy)!

Quick access to

  • Kbone development documentation
  • Kbone Github
  • Applets development documentation
  • Wechat public platform

Kbone + React Applet building process

  1. kbone init my-appchooseReact
  2. npm run mp
  3. Wechat developer toolsnewSmall program.directoryPoint to thekbone 的 my-app/build/mp

Kbone 的 ReactProject template

  • The official offer is directCloneUse them -React Project Template
  • Their developmentmy-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()Copy the code
  • Component development and traditionReactThe same

Lesssupport

Kbone’s React project does not support Sass by default, and I failed to set Sass several times. Always decide to use Less.

  • inwebpack.mp.config.jsThe originalcssreplace 
     {
   test: /.less$/,
   use: [
     MiniCssExtractPlugin.loader,
     'css-loader',
     {
       loader: 'less-loader',
     },
   ],
 },
Copy the code

kboneConfigure the applet parameters

Scripts/miniprogram. Config. Js every change need to NPM run mp

module.exports = { redirect: { notFound: 'index', accessDenied: 'index', }, generate: { autoBuildNpm: 'npm', }, app: {navigationBarTitleText: 'small program title, backgroundColor:' # d23836 ', / / navigationBarBackgroundColor page background color: NavigationStyle :'custom',// Unrealistic top bar full screen page}, appExtraConfig: {sitemapLocation: 'sitemap.json',}, global: {pageBackgroundColor: '#d23836',// share: false,// default to disable sharing}, pages: {}, optimization: { domSubTreeLevel: 10, elementMultiplexing: true, textMultiplexing: true, commentMultiplexing: true, domExtendMultiplexing: true, styleValueReduce: 5000, attrValueReduce: 5000, }, projectConfig: { projectname: 'Applets project name ', appID:' Applets development AppID ',},}Copy the code

Kbone + ReactSummary of potholes encountered in use

  1. Does not supportidSelectors define styles
  2. Does not supportbutton[disabled]Selectors define styles
  3. imgThe image cannot be set to full screen height, for example:height:100vh
  4. Does not supportlucky-canvas 的 ReactOriginal version
  5. deletesrc/log.jsAfter, remember inscripts/webpack.mp.config.jsIn the deletelog: path.resolve(__dirname, '.. /src/log.js')

The little program thing

  1. The first submission of the mini-program will be filled in*** Applets privacy protection boot, carefully and truthfully fill in actively (experienced
  2. A public account can be associated (authentication to300) or register (certified public account registration free?)
  3. Their current submission of small procedures audit feel quite fast, may not be complex content of the relationship

Continuously updated