欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序template模板與component組件的區(qū)別和使用詳解

 更新時(shí)間：2019年05月22日 10:30:58   作者：404的魔咒  
這篇文章主要介紹了微信小程序template模板與component組件的區(qū)別和使用詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

前言：

除了component，微信小程序中還有另一種組件化你的方式template模板，這兩者之間的區(qū)別是，template主要是展示，方法則需要在調(diào)用的頁(yè)面中定義。而component組件則有自己的業(yè)務(wù)邏輯，可以看做一個(gè)獨(dú)立的page頁(yè)面。簡(jiǎn)單來(lái)說(shuō)，如果只是展示，使用template就足夠了，如果涉及到的業(yè)務(wù)邏輯交互比較多，那就最好使用component組件了。

一. template模板:

1. 模板創(chuàng)建：

建議單獨(dú)創(chuàng)建template目錄，在template目錄中創(chuàng)建管理模板文件。

由于模板只有wxml、wxss文件，而且小程序開發(fā)工具并不支持快速創(chuàng)建模板，因此就需要直接創(chuàng)建wxml、wxss文件了，一個(gè)template的模板文件和樣式文件只需要命名相同即可。如果模板較多，建議在template目錄下再創(chuàng)建子目錄，存放單獨(dú)的模板。

2. 模板文件：

template.wxml文件中能寫多個(gè)模板，用name區(qū)分：

<template name="demo">
<view class='tempDemo'>
 <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text>
 <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text>
</view>
</template>

3. 樣式文件：

模板擁有自己的樣式文件（用戶自定義）。

/* templates/demo/index.wxss */
 .tempDemo{
 width:100%;
 }
 view.tempDemo .name{color:darkorange}

4. 頁(yè)面引用：

page.wxml

<!--導(dǎo)入模板-->
<import src="../../templates/demo/index.wxml" />
<!--嵌入模板-->
<view>
 <text>嵌入模板</text>
 <template is="demo" data="{{...staffA}}"></template><!--傳入?yún)?shù)，必須是對(duì)象-->
 <template is="demo" data="{{...staffB}}"></template><!--傳入?yún)?shù)，必須是對(duì)象-->
 <template is="demo" data="{{...staffC}}"></template><!--傳入?yún)?shù)，必須是對(duì)象-->
</view>

page.wxss

@import "../../templates/demo/index.wxss" /*引入template樣式*/

page.js

Page({
 /**
  * 頁(yè)面的初始數(shù)據(jù)
  */
 data: {
  staffA: { firstName: 'Hulk', lastName: 'Hu' },
  staffB: { firstName: 'Shang', lastName: 'You' },
  staffC: { firstName: 'Gideon', lastName: 'Lin' }
 },
 clickMe(e) {
  wx.showToast({ title: e.currentTarget.dataset.name, icon: "none", duration: 100000 })
 }
 ......
})

備注：

一個(gè)模板文件中可以有多個(gè)template,每個(gè)template均需定義name進(jìn)行區(qū)分，頁(yè)面調(diào)用的時(shí)候也是以name指向?qū)?yīng)的template;

template模板沒(méi)有配置文件(.json)和業(yè)務(wù)邏輯文件（.js）,所以template模板中的變量引用和業(yè)務(wù)邏輯事件都需要在引用頁(yè)面的js文件中進(jìn)行定義；

template模板支持獨(dú)立樣式，需要在引用頁(yè)面的樣式文件中進(jìn)行導(dǎo)入；

頁(yè)面應(yīng)用template模板需要先導(dǎo)入模板 <import src="../../templates/demo/index.wxml" /> ，然后再嵌入模板<template is="demo" data="{{...staffA}}"></template>

二. Component組件：

1. 組件創(chuàng)建：

新建component目錄——?jiǎng)?chuàng)建子目錄——新建Component;

2. 組件編寫：

新建的component組件也由4個(gè)文件構(gòu)成，與page類似，但是js文件和json文件與頁(yè)面不同。

js代碼：

// components/demo/index.js
Component({
 /**
  * 組件的屬性列表
  */
 properties: {
  name: {
   type: String,
   value: ''
  }
 },

 /**
  * 組件的初始數(shù)據(jù)
  */
 data: {
  type: "組件"
 },

 /**
  * 組件的方法列表
  */
 methods: {
  click: function () {
   console.log("component!");
  }
 }
})

json配置文件：

{
  "component": true,
  "usingComponents": {}
}

3. 組件引用：

頁(yè)面中引用組件需要在json配置文件中進(jìn)行配置，代碼如下：

 {
  "navigationBarTitleText": "模板demo",
  "usingComponents": {
   "demo": "../../components/demo/index" 
  }
 }

然后在模板文件中進(jìn)行使用就可以了，其中name的值為json配置文件中usingComponents的鍵值：

<demo name="comp" />
<!--使用demo組件，并傳入值為“comp”的name屬性（參數(shù)）-->

這樣就可以了。

PS：組件中不會(huì)自動(dòng)引用公共樣式，如果需要?jiǎng)t需在樣式文件中引入：

@import "../../app.wxss";

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論