微信小程式外部引入方法
阿新 • • 發佈:2019-01-05
一、引入模板
小程式提供了兩個引入外部模板的方法:import和include
使用外部模板可以實現大部分共同頁面的程式碼利用,在一個app中,頭部和腳部基本不會
變動太大,這時就可以通過模板的方式引入,實現多個頁面的複用。
1.1 import
示例:
<!--view.wxml-->
<template name="view">
<text>{{text}}</text>
</template>
- 1
- 2
- 3
- 4
引入:
<import src="view.wxml"/>
<template is="view" data="{{text: 'forbar'}}"/>
- 1
- 2
注意:import有作用域,即import引入的模板只在當前頁面有效,即import不會向下查詢另外的模板
1.2 include
include標籤可以看作是對 “html”的一個拷貝,即將外部的wxml片段拷貝進文件中
示例:
外部wxml片段
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view >
- 1
- 2
- 3
- 4
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
- 1
- 2
- 3
- 4
- 5
總結:import是引入模板片段,且有作用域限制,不能進行模板巢狀。include是引入wxml片段,相當於程式碼拷貝。
二、WXSS 微信樣式表
小程式中,頁面樣式的渲染通過wxss檔案實現,.wxss可以看成是css,因為它們都在實現相同的功能。實質上wxss也是在css的基礎之上進行了擴充和修改得到的。
wxss在css上的擴充套件特性:
1)、尺寸單位:rpx
rpx:是一個相對畫素單位,可以根據螢幕寬度進行自適應。
針對移動端的開發,設計稿一般都是以iphone6為標準的。而iphone用的是視網膜屏,即我們css中設定的1px,在iphone上實際是由2px*2px的畫素點組成的。
以iphone6為準,螢幕寬度375px,共有750個物理畫素,則750rpx=350px,即1rpx=0.5px
2)、樣式匯入 @import
跟在css中的外部樣式表的匯入類似
@import "common.wxss";