您好,登錄后才能下訂單哦!
小程序引用外部js
//封裝的函數(shù) function GetUserInfo2018() { console.log("獲取用戶信息8888") } function count(str) { console.log(str) } //轉(zhuǎn)化成小程序模板語言 這一步非常重要 不然無法正確調(diào)用 module.exports = { GetUserInfo2018: GetUserInfo2018, count: count }; /*其它頁(yè)面調(diào)用 var common = require("../common/common.js"); common.GetUserInfo2018(); common.count("hehe"); */
小程序引用外部css
/* app.wxss是全局樣式,作用于每一個(gè)頁(yè)面, 而page下的每一個(gè)的wxss文件只作用于當(dāng)前頁(yè)面,并對(duì)全局樣式中的相同屬性會(huì)覆蓋 */ @import "../../app.wxss"; /**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 20%; } .userinfo-nickname { color: #aaa; } .usermotto { margin-top: 200px; }
小程序引用公共頁(yè)面
1、不帶參數(shù)
首先在pages文件夾中新建一個(gè)template文件夾,文件夾中新建一個(gè)template.wxml文件,代碼如下
<!--template.wxml--> <template name="msgItem"> <view> <text>This is template.wxml文件,我是一個(gè)模板</text> </view> </template>
然后我們書寫我們所要調(diào)用template的頁(yè)面index.wxml
<!--index.wxml--> <!-- 聲明需要使用的模板文件 --> <import src ="../template/template.wxml"/> <template is="msgItem"/>
2、帶參數(shù)
首先,修改template.wxml文件,我們給模板添加三個(gè)字段,修改后代碼如下
<template name="msgItem"> <view> <text>This is template.wxml文件,我是一個(gè)模板</text> <view> <text> {{index}}: {{msg1}} </text> <text> {{msg2}} </text> </view> </view> </template>
接下來我們?cè)趇ndex.wxml中傳遞模板中所需要的三個(gè)參數(shù),修改后的代碼如下:
<!--index.wxml--> <!-- 聲明需要使用的模板文件 --> <import src ="../template/template.wxml"/> <view>This is index.wxml</view> <template is="msgItem" data="{{index:1,msg1:'msg1數(shù)據(jù)',msg2:'msg2數(shù)據(jù)'}}"/>
3、列表item模板
接下來我們就通過一種常見的情況列表數(shù)據(jù)來使用模板,增加對(duì)模板的認(rèn)知,直接上修改過的代碼:
//index.js Page({ data: { list:[ { name: '張三', age: 15 }, { name: '李四', age: 25 }, { name: '王五', age: 18 }, { name: '趙六', age: 19 }, ] } })
<!--index.wxml--> <!-- 聲明需要使用的模板文件 --> <import src ="../template/template.wxml"/> <view>This is index.wxml</view> <view wx:for="{{list}}"> <template is="msgItem" data="{{name:item.name,age:item.age}}"/> </view>
<!--template.wxml--> <template name="msgItem"> <view> <text> name: {{name}} </text> <text> age: {{age}}</text> </view> </template>
4、調(diào)用不同的模板
有時(shí)候,我們有這樣的需求,那就是同一個(gè)列表中,item數(shù)據(jù)不同,可能他的樣式也是有很大的區(qū)別,所以我們使用的模板也會(huì)對(duì)應(yīng)不相同,接下來我們就來實(shí)現(xiàn)這樣需求的小Demo:
首先修改了一下template.wxml,原本該文件中只有一個(gè)template,現(xiàn)在我們創(chuàng)建了兩個(gè),新增的template僅僅多了一行代碼,當(dāng)然了實(shí)際開發(fā)中,需求會(huì)比這個(gè)難很多,在這里只是為了實(shí)現(xiàn)Demo。
<!--template.wxml--> <template name="msgItem"> <view class="template_style"> <text> name: {{name}} </text> <text class="template_age_style"> age: {{age}}</text> </view> </template> <template name="msgItem2"> <view class="template_style"> <text> name: {{name}} </text> <text class="template_age_style"> age: {{age}}</text> <text>我是一個(gè)未成年</text>> </view> </template>
接下來我們?cè)趇ndex.wxml中通過age字段調(diào)用不同的模板:
<!--index.wxml--> <!-- 聲明需要使用的模板文件 --> <import src ="../template/template.wxml"/> <view>This is index.wxml</view> <view wx:for="{{list}}"> <template is="{{item.age >= 18 ? 'msgItem' : 'msgItem2'}}" data="{{name:item.name,age:item.age}}"/> </view>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。