1, usage,

To be clear, use HTML tags if you don’t have special requirements, and use them as needed when using built-in components. This is because most built-in components are wrapped with a layer of custom components. If the number of instances of custom components reaches a certain level, the performance will be affected to a certain extent theoretically. Therefore, for frequently used built-in components such as View, text, image, etc., If you do not have special requirements, use HTML tags such as div, SPAN, and img instead.

Some of the built-in components can be replaced directly with HTML tags, such as the Input component. List of currently supported alternative components:

<input type="radio" /> --> radio <input type="checkbox" /> --> <label> --> </textarea> <img /> --> image <video></video> --> Video <canvas></canvas> --> Canvas componentCopy the code

There are also parts of the built-in component that do not have an alternative tag in HTML, so use the WX-Component tag or use the WX-prefix. The basic usage is as follows:

<! < wX-component behavior="picker" mode="region" @change="onChange"> select city </wx-component> <wx-component behavior="button" open-type="share" @click="onClickShare"> </wx-component> <! <wx-picker mode="region" @change="onChange"> </wx-picker> <wx-button open-type="share" @ click = "onClickShare" > share < / wx - button >Copy the code

If you use the wX-Component tag to indicate the widget built-in component to render, then the Behavior field indicates the component name to render. Other component properties are passed in the same way as the official documentation, and events are vUE bound.

Wx-component or WX-prefix already supports a list of built-in components:

  • Cover – image components
  • Cover – the view components
  • Movable components – area
  • Movable – the view components
  • Scroll – the view components
  • Swiper components
  • Swiper – item component
  • The view components
  • Icon component
  • Progress component
  • Text component
  • The button component
  • The editor component
  • The form component
  • Picker component
  • Picker – the view components
  • Picker – view – column components
  • The slider component
  • The switch component
  • The navigator component
  • Camera component
  • Image components
  • Live – player component
  • Live – pusher components
  • The map component
  • AD component
  • Official – account component
  • The open – data components
  • Web – the view components

The children of the built-in component are wrapped in a layer of custom components, so there is a container between the built-in component and the child, This container appends H5-virtual to the class (except for view, cover-view, Text, Scrollview, and Picker-view components, which are rendered in 0.x because they need to retain the structure of child components).

Version 0.x: In version 0.x, most built-in components are rendered with an extra layer of custom components, which can be approximated as an additional div container between the built-in component and its parent node, thus affecting some styles. The div container appends a class named h5-xxx. For example, if we use the video component, we append a class named h5-video to the div container for special handling. In addition, if the built-in components are rendered with wX-Component or wX-prefix, the container will append the class h5-wX-Component. In this case, wX-XXX class will be appended to the container for easier identification.

The resulting structure is roughly as follows:

<! - source -- -- > < div > < canvas > < div > < / div > < div > < / div > < canvas > < wx - map > < div > < / div > < div > < / div > < / wx - map > < wx - scroll - view > <div></div> <div></div> </wx-scroll-view> </div> <! Canvas class="h5-canvas wx-canvas wx-comp-canvas"> <element class="h5-virtual"> <cover-view></cover-view> <cover-view></cover-view> </element> </canvas> <map class="h5-wx-component wx-map wx-comp-map"> <element class="h5-virtual"> <cover-view></cover-view> <cover-view></cover-view> </element> </map> <element class="h5-wx-component wx-scroll-view"> <scroll-view class="wx-comp-scroll-view"> <view></view> <view></view> </scroll-view> </element> </view> <! <element class="h5-canvas"> <canvas class="wx-comp-canvas"> </cover-view> </cover-view> <cover-view></cover-view> </canvas> </element> <element class="h5-wx-component wx-map"> <map class="wx-comp-map"> <cover-view></cover-view> <cover-view></cover-view> </map> </element> <element class="h5-wx-component wx-scroll-view"> <scroll-view class="wx-comp-scroll-view"> <view></view> <view></view> </scroll-view> </element> </view>Copy the code

PS: The button tag will not be rendered as a button built-in component, and the form tag will not be rendered as a form built-in component. If necessary, please follow the instructions for using native components above.

PS: Because of the limitation of custom components, movable-area/movable-view, swiper/swiper-item, picker-view/picker-view-column must exist as a parent to be used. For example, swiper and swiper-item must be used as parent and child components. For example:

<wx-swiper>
  <wx-swiper-item>A</wx-swiper-item>
  <wx-swiper-item>B</wx-swiper-item>
  <wx-swiper-item>C</wx-swiper-item>
</wx-swiper>
Copy the code

PS: The default canvas built-in component’s touch event is a generic event touch object, not a CanvasTouch object, Listen for canvastouchStart, CanvastouchMove, Canvastouchend, and CanvastouchCancel events if you need a CanvasTouch object.

PS: The representation of native components in applets is somewhat different from that of web side tags. For details, refer to the documentation of native components.

PS: The child nodes under the native component, div, SPAN and other tags will be rendered as a cover-view, img will be rendered as a cover-image, if you need to use button built-in components please use wX-Component or wX-prefix.

PS: You can use built-in components without a prefix if you set the value of runtime.wxComponent to noprefix.

PS: Some Web frameworks (such as React) force node attribute values to be strings. For arrays of common types (such as the value property of the WX-Picker component), stringification becomes join, which KBone automatically parses without the developer having to deal with; For an array of objects (such as the range property of the WX-Picker component) that is automatically converted to a string, the developer needs to pass it in as a JSON string.

Case 2,

Create the 03-native Components directory in the kbone-advanced directory. This example is implemented in this directory.

2.1 create package. Json

cd 03-native-components
npm init -y
Copy the code

The editor package. Json:

{ "scripts": { "mp": "cross-env NODE_ENV=production webpack --config build/webpack.mp.config.js --progress --hide-modules" }, "Dependencies": {"vue": "^2.5.11"}, "browserslist": ["> 1%", "last 2 versions", "not IE <= 8"], "devDependencies": {" Babel - core ", "^ 6.26.0", "Babel - loader" : "^ 7.1.2", "Babel - preset - env" : "^ 1.6.0", "Babel - preset - stage - 3" : "^ 6.24.1", "cross - env" : "^ 5.0.5", "CSS - loader" : "^ 0.28.7", "extract - text - webpack - plugin" : "^ 3.0.2", "file - loader" : "^ 1.1.4 HTML - webpack -", "plugins" : "^ 4.0.0 - beta. 5", "mini - CSS - extract - the plugin" : "^ 0.5.0", "optimize - CSS - assets - webpack - plugin" : "^ 5.0.1", "stylehacks" : "^ 4.0.3", "vue - loader" : "^ 15.7.0 vue - the template -", "compiler" : "^ 2.6.10", "webpack" : "^ 4.29.6", "webpack - cli" : "^ 3.2.3", "mp - webpack - plugin" : "latest" } }Copy the code

Install dependency packages:

npm install
Copy the code

2.2 configuration webpack

Create the webpack.mp.config.js file in the build folder of the 03-native Components directory as follows:

const path = require('path') const webpack = require('webpack') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const { VueLoaderPlugin } = require('vue-loader') const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); Const TerserPlugin = require('terser-webpack-plugin') const MpPlugin = require('mp-webpack-plugin' Module.exports = {mode: exports = {mode: exports = {mode: exports = {mode: exports = {mode: exports = {mode: exports = {mode: exports = {mode: exports = {mode: exports = > > 'production', entry: { index: path.resolve(__dirname, '.. /src/index/main.mp.js'), }, output: { path: path.resolve(__dirname, '.. /dist/mp/common'), // put filename: '[name].js' in common directory of applet code, // required field, can not modify library: 'createApp', // required, cannot modify libraryExport: 'default', // Required, cannot modify libraryTarget: 'window', // Required, cannot modify}, target: Optimization: {runtimeChunk: false, // Mandatory fields, cannot change splitChunks: {// code separation configuration, do not change chunks: 'all', minSize: 1000, maxSize: 0, minChunks: 1, maxAsyncRequests: 100, maxInitialRequests: 100, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } }, minimizer: isOptimize ? [/ CSS/compression new OptimizeCSSAssetsPlugin ({assetNameRegExp: / \ | (CSS WXSS) $/ g, cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: Some >:first-child}],}, canPrint: // The WXSS compiler does not support.some>:first-child. False}), / / compression js new TerserPlugin ({test: / \. Js (\? *)? $/ I, the parallel: true,})] : [],}, the module: {rules: [{test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader' ], }, { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, use: [ 'babel-loader' ], exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { extensions: ['*', '.js', '.vue', '.json'] }, plugins: [ new webpack.DefinePlugin({ 'process.env.isMiniprogram': Process. The env. IsMiniprogram, / / into the environment variables, for the business code}), new MiniCssExtractPlugin ({filename: '[name].wxss', }), new VueLoaderPlugin(), new MpPlugin(require('./miniprogram.config.js')), ], }Copy the code

Create miniprogram.config.js in the 03-Native Components folder as follows:

module.exports = { origin: 'https://test.miniprogram.com', entry: '/', router: { index: [ '/', ], }, redirect: {notFound: 'index', accessDenied: 'index',}, generate: {appWxss: 'None ', // Whether applet dependencies are automatically installed after the build is complete. AutoBuildNpm: 'NPM'}, Runtime: {// wxComponent: 'noprefix', wxComponent: 'default'}, app: { navigationBarTitleText: 'miniprogram-project', }, projectConfig: { appid: '', projectname: 'native-components', }, packageConfig: { author: 'Felixlu', }, }Copy the code

2.3 create index. HTML

Create an index. HTML file in the 03-native Components directory with the following contents:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1, maximum - scale = 1.0, the minimum - scale = 1.0, user - scalable = no, minimal - UI, viewport-fit=cover" /> <meta content="yes"name="apple-mobile-web-app-capable"/> <meta content="black"name="apple-mobile-web-app-status-bar-style"/> <meta name="format-detection"content="telephone=no, email=no" /> <title>vue</title> <style type="text/css"> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> </head> <body> <div id="app"></div> </body> </html>Copy the code

2.4 Creating a small program entry file

Create main.mp.js in the directory 03-native components/ SRC /index.

import Vue from 'vue'
import App from './App.vue'

export default function createApp() {
  const container = document.createElement('div')
  container.id = 'app'
  document.body.appendChild(container)

  return new Vue({
    el: '#app',
    render: h => h(App)
  })
}
Copy the code