<sub id="z53d3"><listing id="z53d3"></listing></sub>

    <em id="z53d3"></em>
    <address id="z53d3"></address>

            <noframes id="z53d3">

            福州網站建設僅需1000元起包含域名空間,詳情18558752805

            • 微信小程序template模板

            福州網站建設 >網站新聞 >微信小程序 >
            一. template模板:
            1. 模板創建:
            建議單獨創建template目錄,在template目錄中創建管理模板文件。
            由于模板只有wxml、wxss文件,而且小程序開發工具并不支持快速創建模板,因此就需要直接創建wxml、wxss文件了,一個template的模板文件和樣式文件只需要命名相同即可。如果模板較多,建議在template目錄下再創建子目錄,存放單獨的模板。


             
            2. 模板文件:
            template.wxml文件中能寫多個模板,用name區分:
            復制代碼
            1 <template name="demo"> 2 <view class='tempDemo'> 3 <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text> 4 <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text> 5 </view> 6 </template>
            復制代碼
            3. 樣式文件:


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


            1 /* templates/demo/index.wxss */ 2 .tempDemo{ 3  width:100%; 4 } 5 view.tempDemo .name{color:darkorange}
            4. 頁面引用:


            page.wxml


            復制代碼
            1 <!--導入模板--> 2 <import src="../../templates/demo/index.wxml" /> 3 <!--嵌入模板--> 4 <view> 5 <text>嵌入模板</text> 6 <template is="demo" data="{{...staffA}}"></template><!--傳入參數,必須是對象--> 7 <template is="demo" data="{{...staffB}}"></template><!--傳入參數,必須是對象--> 8 <template is="demo" data="{{...staffC}}"></template><!--傳入參數,必須是對象--> 9 </view>
            復制代碼
            page.wxss


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


            復制代碼
             1 Page({  2 /**  3  * 頁面的初始數據  4 */  5  data: {  6 staffA: { firstName: 'Hulk', lastName: 'Hu' },  7 staffB: { firstName: 'Shang', lastName: 'You' },  8 staffC: { firstName: 'Gideon', lastName: 'Lin' }  9  }, 10  clickMe(e) { 11 wx.showToast({ title: e.currentTarget.dataset.name, icon: "none", duration: 100000 }) 12  } 13  ...... 14 })
            復制代碼
            備注:


            一個模板文件中可以有多個template,每個template均需定義name進行區分,頁面調用的時候也是以name指向對應的template;


            template模板沒有配置文件(.json)和業務邏輯文件(.js),所以template模板中的變量引用和業務邏輯事件都需要在引用頁面的js文件中進行定義;


            template模板支持獨立樣式,需要在引用頁面的樣式文件中進行導入;


            頁面應用template模板需要先導入模板 <import src="../../templates/demo/index.wxml" /> ,然后再嵌入模板 <template is="demo" data="{{...staffA}}"></template> 
            掃描二維碼分享到微信
            確 認

            Copyright ? 2014-2019 ?www.siamposts.com福州網站制作 福州網站建設盡在福州E點互動 版權所有 閩ICP備16037694號-2

            你能塞多少樱桃我就陪你多久

            <sub id="z53d3"><listing id="z53d3"></listing></sub>

              <em id="z53d3"></em>
              <address id="z53d3"></address>

                      <noframes id="z53d3">