2022-11-20 分類: 微信小程序
一、引入模板
小程序提供了兩個引入外部模板的方法:import和include
使用外部模板可以實現(xiàn)大部分共同頁面的代碼利用,在一個app中,頭部和腳部基本不會
變動太大,這時就可以通過模板的方式引入,實現(xiàn)多個頁面的復用。
1.1 import
示例:
<!--view.wxml-->
<template name="view">
<text>{{text}}</text>
</template>
引入:
<import src="view.wxml"/>
<template is="view" data="{{text: 'forbar'}}"/>
注意:import有作用域,即import引入的模板只在當前頁面有效,即import不會向下查找另外的模板
1.2 include
include標簽可以看作是對 “html”的一個拷貝,即將外部的wxml片段拷貝進文檔中
示例:
外部wxml片段
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
總結(jié):import是引入模板片段,且有作用域限制,不能進行模板嵌套。include是引入wxml片段,相當于代碼拷貝。
二、WXSS 微信樣式表
小程序中,頁面樣式的渲染通過wxss文件實現(xiàn),.wxss可以看成是css,因為它們都在實現(xiàn)相同的功能。實質(zhì)上wxss也是在css的基礎(chǔ)之上進行了擴充和修改得到的。
wxss在css上的擴展特性:
1)、尺寸單位:rpx
rpx:是一個相對像素單位,可以根據(jù)屏幕寬度進行自適應(yīng)。
針對移動端的開發(fā),設(shè)計稿一般都是以iphone6為標準的。而iphone用的是視網(wǎng)膜屏,即我們css中設(shè)定的1px,在iphone上實際是由2px*2px的像素點組成的。
以iphone6為準,屏幕寬度375px,共有750個物理像素,則750rpx=350px,即1rpx=0.5px
2)、樣式導入 @import
跟在css中的外部樣式表的導入類似
@import "common.wxss";
分享名稱:微信小程序外部引入方法
鏈接地址:http://jinyejixie.com/news38/215288.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有微信小程序等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容