pk10赛车计划软件百度云

Fuzhou website construction only needs 1,000 yuan including domain name space, details 18558752805

  • WeChat Mini Program template

Fuzhou Website Construction > Site News > WeChat Mini Program >
I. template:
1. Template creation:
It is recommended to create the template directory separately, and create an administrative template file in the template directory.
Because templates only have wxml and wxss files, and applet development tools do not support rapid template creation, you need to create wxml and wxss files directly. A template template file and style file only need to be named the same. If there are many templates, it is recommended to create a subdirectory under the template directory to store separate templates.



2. Template file:
template.wxml file can write multiple templates, distinguished by name:
Copy code
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>
Copy code
3. Style file:


The template has its own style file (user-defined).


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


page.wxml


Copy code
1 <!-Import template-> 2 <import src = "../../ templates / demo / index.wxml" /> 3 <!-Embed template-> 4 <view> 5 <text> Embedding template </ text> 6 <template is = "demo" data = "{{... staffA}}"> </ template> <!-Incoming parameters must be objects-> 7 <template is = "demo" data = "{{... staffB}}"> </ template> <!-Incoming parameters must be objects-> 8 <template is = "demo" data = "{{...... staffC}} "> </ template> <!-Incoming parameters, must be objects-> 9 </ view>
Copy code
page.wxss


1 @import "../../templates/demo/index.wxss" / * Introducing template style * /
page.js


Copy code
1 Page ({2 / ** 3 * initial data of the page 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})
Copy code note:


There can be multiple templates in a template file, and each template needs to be defined by name to distinguish it. When the page is called, the name refers to the corresponding template;


The template template has no configuration file (.json) and business logic file (.js), so the variable references and business logic events in the template template need to be defined in the js file of the reference page;


The template template supports independent styles and needs to be imported in the style file of the reference page;


Page template template needs to import the template <import src = "../../ templates / demo / index.wxml" /> before embedding the template }} "> </ template>
Scan QR code to share on WeChat
confirm

Copyright © 2014-2019 buxie520.com Fuzhou Website Production