久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

        手機站
        千鋒教育

        千鋒學習站 | 隨時隨地免費學

        千鋒教育

        掃一掃進入千鋒手機站

        領取全套視頻
        千鋒教育

        關注千鋒學習站小程序
        隨時隨地免費學習課程

        當前位置:首頁  >  技術干貨  > kbone高級-使用小程序內(nèi)置組件

        kbone高級-使用小程序內(nèi)置組件

        來源:千鋒教育
        發(fā)布人:qyf
        時間: 2022-09-15 15:15:48 1663226148

          1、用法

          需要明確的是,如果可以使用 Web 端組件技術實現(xiàn)的話請盡量使用 Web 端技術(如 vue、react 組件),使用自定義組件請按需使用。這是因為自定義組件外層會被包裹上 kbone 的自定義組件,而當自定義組件的實例數(shù)量達到一定量級的話,理論上是會對性能造成一定程度的影響。

          要在 kbone 中使用自定義組件,需要將所有自定義組件和其依賴放到一個固定的目錄,這個目錄可以自己擬定,假設這個目錄為 src/custom-components:

          1.1 修改 webpack 插件配置

          在 mp-webpack-plugin 這個插件的配置中的 generate 字段內(nèi)補充 wxCustomComponent,其中 root 是組件根目錄,即上面提到的目錄:src/custom-component,usingComponents 則用來配置要用到的自定義組件。

          module.exports = {

          generate: {

          wxCustomComponent: {

          root: path.join(__dirname, '../src/custom-components'),

          usingComponents: {

          'comp-a': 'comp-a/index',

          'comp-b': {

          path: 'comp-b/index',

          props: ['propa', 'propb'],

          events: ['someevent'],

          },

          },

          },

          },

          // ... other options

          }

          usingComponents 里的聲明和小程序頁面的 usingComponents 字段類似。鍵為組件名,值可以為組件相對 root 字段的路徑,也可以是一個配置對象。這個配置對象的 path 為組件相對路徑,props 表示要這個組件會被用到的 properties,events 表示這個組件會被監(jiān)聽到的事件。

          1.2 將自定義組件放入組件根目錄

          下面以 comp-b 組件為例:

          comp-b

          propa: {{propa}} -- propb: {{propb}}

          click me

          // comp-b.js

          Component({

          properties: {

          propa: {type: String, value: ''},

          propb: {type: String, value: ''},

          },

          methods: {

          onTap() {

          this.triggerEvent('someevent')

          },

          },

          })

          1.3 使用自定義組件

          假設使用 vue 技術,然后下面同樣以 comp-b 組件為例:

          comp-b slot

          PS:如果使用 react 等其他框架其實和 vue 同理,因為它們的底層都是調(diào)用 document.createElement 來創(chuàng)建節(jié)點。當在 webpack 插件配置聲明了這個自定義組件的情況下,在調(diào)用 document.createElement 創(chuàng)建該節(jié)點時會被轉(zhuǎn)換成創(chuàng)建 wx-custom-component 標簽,類似于內(nèi)置組件的 wx-component 標簽。

          2、案例

          在 kbone-advanced 目錄下創(chuàng)建 04-custom-components 目錄。本案例在這個目錄下實現(xiàn)。

          2.1 創(chuàng)建 package.json

          cd 04-custom-components

          npm init -y

          編輯 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-plugin": "^4.0.0-beta.5",

          "mini-css-extract-plugin": "^0.5.0",

          "mp-webpack-plugin": "latest",

          "optimize-css-assets-webpack-plugin": "^5.0.1",

          "stylehacks": "^4.0.3",

          "vue-loader": "^15.7.0",

          "vue-template-compiler": "^2.6.10",

          "webpack": "^4.29.6",

          "webpack-cli": "^3.2.3"

          }

          }

          安裝依賴包:

          npm install

          2.2 配置 webpack

          在 04-custom-components 目錄下創(chuàng)建 build 文件夾,在文件夾下創(chuàng)建 webpack.mp.config.js 文件,內(nèi)容如下:

          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') // 用于構(gòu)建小程序代碼的 webpack 插件

          const isOptimize = false // 是否壓縮業(yè)務代碼,開發(fā)者工具可能無法完美支持業(yè)務代碼使用到的 es 特性,建議自己做代碼壓縮

          module.exports = {

          mode: 'production',

          entry: {

          index: path.resolve(__dirname, '../src/index/main.mp.js'),

          },

          output: {

          path: path.resolve(__dirname, '../dist/mp/common'), // 放到小程序代碼目錄中的 common 目錄下

          filename: '[name].js', // 必需字段,不能修改

          library: 'createApp', // 必需字段,不能修改

          libraryExport: 'default', // 必需字段,不能修改

          libraryTarget: 'window', // 必需字段,不能修改

          },

          target: 'web', // 必需字段,不能修改

          optimization: {

          runtimeChunk: false, // 必需字段,不能修改

          splitChunks: { // 代碼分隔配置,不建議修改

          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

          new OptimizeCSSAssetsPlugin({

          assetNameRegExp: /\.(css|wxss)$/g,

          cssProcessor: require('cssnano'),

          cssProcessorPluginOptions: {

          preset: ['default', {

          discardComments: {

          removeAll: true,

          },

          minifySelectors: false, // 因為 wxss 編譯器不支持 .some>:first-child 這樣格式的代碼,所以暫時禁掉這個

          }],

          },

          canPrint: false

          }),

          // 壓縮 js

          new TerserPlugin({

          test: /\.js(\?.*)?$/i,

          parallel: true,

          })

          ] : [],

          },

          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.env.isMiniprogram, // 注入環(huán)境變量,用于業(yè)務代碼判斷

          }),

          new MiniCssExtractPlugin({

          filename: '[name].wxss',

          }),

          new VueLoaderPlugin(),

          new MpPlugin(require('./miniprogram.config.js')),

          ],

          }

          在 04-custom-components/build 文件夾下創(chuàng)建 miniprogram.config.js 文件,內(nèi)容如下:

          const path = require('path')

          module.exports = {

          origin: 'https://test.miniprogram.com',

          entry: '/',

          router: {

          index: ['/'],

          },

          redirect: {

          notFound: 'index',

          accessDenied: 'index',

          },

          generate: {

          wxCustomComponent: {

          root: path.join(__dirname, '../src/custom-components'),

          usingComponents: {

          'comp-a': {

          path: 'comp-a',

          props: ['prefix', 'suffix'],

          events: ['someevent'],

          },

          'comp-b': {

          path: 'comp-b/index',

          props: ['prefix'],

          },

          'comp-c': 'comp-c',

          },

          },

          // 構(gòu)建完成后是否自動安裝小程序依賴。'npm':使用 npm 自動安裝依賴

          autoBuildNpm: 'npm'

          },

          app: {

          navigationBarTitleText: 'miniprogram-project',

          },

          projectConfig: {

          appid: '',

          projectname: 'custom-components',

          },

          packageConfig: {

          author: 'Felixlu',

          },

          }

          2.3 編寫案例有關組件

          2.3.1 創(chuàng)建 main.mp.js

          在項目根目錄下創(chuàng)建 /src/index,在 index 下創(chuàng)建 main.mp.js 文件,內(nèi)容如下:

          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)

          })

          }

          2.3.2 創(chuàng)建 App.vue 組件

          在 /src/index 下創(chuàng)建 App.vue 組件,內(nèi)容為:

          kbone

          comp-a slot

          comp-b slot

          comp-c slot

          update

          2.3.3 創(chuàng)建 comp-a 組件

          在根目錄下創(chuàng)建 /src/custom-components 文件夾,在這個文件夾下創(chuàng)建小程序原生組件 comp-a,四個文件內(nèi)容如下:

          /src/custom-components/comp-a.wxml

          comp-a

          comp-a button

          {{prefix}}-{{str}}-{{suffix}}

          /src/custom-components/comp-a.js

          const _ = require('./common/utils')

          Component({

          properties: {

          prefix: {

          type: String,

          value: 'defaultPrefix',

          },

          suffix: {

          type: String,

          value: 'defaultSuffix',

          },

          },

          data: {

          str: _.getWords() + 'comp-a',

          },

          methods: {

          onTap() {

          this.triggerEvent('someevent', {

          detail: {

          from: 'comp-a',

          },

          })

          },

          printf() {

          console.log('I am comp-a')

          },

          },

          })

          /src/custom-components/common/utils.js

          module.exports = {

          getWords() {

          return 'Hello, '

          },

          }

          /src/custom-components/comp-a.json

          {

          "component": true

          }

          /src/custom-components/comp-a.wxss

          // 內(nèi)容為空

          2.3.4 創(chuàng)建 comp-b 組件

          在根目錄下創(chuàng)建 /src/custom-components/comp-b 文件夾,在這個文件夾下創(chuàng)建小程序原生組件 comp-b,四個文件內(nèi)容如下:

          /src/custom-components/comp-b/index.wxml

          comp-b

          {{prefix}}-{{str}}-{{suffix}}

          /src/custom-components/comp-b/index.js

          const _ = require('../common/utils')

          Component({

          properties: {

          prefix: {

          type: String,

          value: 'defaultPrefix',

          },

          suffix: {

          type: String,

          value: 'defaultSuffix',

          },

          },

          data: {

          str: _.getWords() + 'comp-b',

          },

          })

          /src/custom-components/comp-b/index.json

          {

          "component": true

          }

          /src/custom-components/comp-b/index.wxss

          .prefix, .suffix {

          color: green;

          }

          2.3.5 創(chuàng)建 comp-c 組件

          在 /src/custom-components 文件夾下創(chuàng)建小程序原生組件 comp-c,四個文件內(nèi)容如下:

          /src/custom-components/comp-c.wxml

          comp-c

          comp-d slot

          /src/custom-components/comp-c.js

          Component({})

          /src/custom-components/comp-c.json

          {

          "component": true,

          "usingComponents": {

          "comp-d": "./comp-d"

          }

          }

          /src/custom-components/comp-c.wxss

          // 內(nèi)容為空

          2.3.6 創(chuàng)建 comp-d 組件

          在 /src/custom-components 文件夾下創(chuàng)建小程序原生組件 comp-d,四個文件內(nèi)容如下:

          /src/custom-components/comp-d.wxml

          comp-d

          /src/custom-components/comp-d.js

          Component({})

          /src/custom-components/comp-d.json

          {

          "component": true

          }

          /src/custom-components/comp-d.wxss

          // 內(nèi)容為空

          2.4 小程序端效果預覽

          npm run mp

        圖片2

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
        請您保持通訊暢通,專屬學習老師24小時內(nèi)將與您1V1溝通
        免費領取
        今日已有369人領取成功
        劉同學 138****2860 剛剛成功領取
        王同學 131****2015 剛剛成功領取
        張同學 133****4652 剛剛成功領取
        李同學 135****8607 剛剛成功領取
        楊同學 132****5667 剛剛成功領取
        岳同學 134****6652 剛剛成功領取
        梁同學 157****2950 剛剛成功領取
        劉同學 189****1015 剛剛成功領取
        張同學 155****4678 剛剛成功領取
        鄒同學 139****2907 剛剛成功領取
        董同學 138****2867 剛剛成功領取
        周同學 136****3602 剛剛成功領取
        相關推薦HOT
        抖店入駐收費多少?開抖店費用是多少?

        如果要開通抖音小店,需要先把抖音賬號開通商品櫥窗功能。入駐之后,可以選擇頭條賬號、抖音賬號、火山賬號任一類型注冊或登錄。那開個抖店要多...詳情>>

        2023-09-19 07:50:26
        想做直播帶貨的貨源哪里來?怎么找貨源?

        現(xiàn)如今直播推廣的方式是非?;鸬模兄浅6嗟馁u家都是利用直播推廣店鋪產(chǎn)品,效果也是非常不錯。但很多賣家想要了解現(xiàn)在直播帶貨的話什么產(chǎn)品...詳情>>

        2023-09-19 07:47:16
        適合三農(nóng)領域的名字?有何技巧?

        現(xiàn)在在抖音上很多博主會選擇直播來賺取更多的流量以及利潤,直播間的東西也有很多讓消費者信任并且喜歡的,而且隨著越來越多人直播,很多農(nóng)產(chǎn)品...詳情>>

        2023-09-19 07:06:05
        抖店商品發(fā)布違規(guī)怎么申訴?有何規(guī)則?

        抖店服務市場服務商發(fā)布違禁信息如何處理?情節(jié)嚴重程度判定原則:違規(guī)嚴重等級主要通過服務商違規(guī)次數(shù)、造成后果的嚴重程度、獲利或?qū)е聯(lián)p失的...詳情>>

        2023-09-19 06:59:55
        “泛垂直起號”可能是2023年最高效的起號方式

        這可能是明年最好用的旗號方式了,今天教大家一個很野,但是可以讓你三天漲1000粉的偏方。去年前年啊,每個人都教你,誰知七號對著自己的產(chǎn)品拍...詳情>>

        2023-09-19 06:37:38
        開班信息
        北京校區(qū)
        • 北京校區(qū)
        • 大連校區(qū)
        • 廣州校區(qū)
        • 成都校區(qū)
        • 杭州校區(qū)
        • 長沙校區(qū)
        • 合肥校區(qū)
        • 南京校區(qū)
        • 上海校區(qū)
        • 深圳校區(qū)
        • 武漢校區(qū)
        • 鄭州校區(qū)
        • 西安校區(qū)
        • 青島校區(qū)
        • 重慶校區(qū)
        • 太原校區(qū)
        • 沈陽校區(qū)
        • 南昌校區(qū)
        • 哈爾濱校區(qū)
        赞皇县| 海丰县| 新巴尔虎左旗| 安新县| 黑龙江省| 克什克腾旗| 芷江| 嵊州市| 留坝县| 法库县| 辽宁省| 鲁山县| 邹城市| 施秉县| 双城市| 镇康县| 长兴县| 鄂州市| 亚东县| 吐鲁番市| 刚察县| 包头市| 玉田县| 古田县| 商河县| 盖州市| 嘉兴市| 白山市| 万全县| 金阳县| 宝清县| 浮山县| 扶余县| 翁牛特旗| 浪卡子县| 曲靖市| 苍梧县| 祁东县| 邵武市| 云霄县| 湖州市|