微信小プログラム入門5:スタイルシートwxss

一、導入テンプレート

ウィジェットは、importとincludeの2つの外部テンプレートを導入する方法を提供します.
外部テンプレートを使用すると、ほとんどの共通ページのコード利用が実現され、1つのappでは頭部と足がほとんど変動しないため、テンプレート方式で導入し、複数のページの多重化を実現することができる.
1.1 import
例:

    <template name="view">
        <text>{{text}}text>
    template>

導入:

    <import src="view.wxml"/>
    <template is="view" data="{{text: 'forbar'}}"/>

注意:importには、importが導入したテンプレートが現在のページでのみ有効である役割ドメインがあります.つまり、importは別のテンプレートを下に検索しません.
1.2 include
includeラベルは、外部のwxmlクリップをドキュメントにコピーする「html」のコピーと見なすことができます.例:外部wxmlクリップ

    
    <view> header view>
    
    <view> footer view>

    
    <include src="header.wxml"/>
    <view> body view>
    <include src="footer.wxml"/>

まとめ:importはテンプレートクリップを導入し、役割ドメインの制限があり、テンプレートのネストはできません.includeはwxmlフラグメントを導入し,コードコピーに相当する.

二、WXSS微信様式表

ウィジェットでは、ページスタイルのレンダリングはwxssファイルで実現する.wxssは、同じ機能を実現しているため、cssと見なすことができる.実質的にwxssもcssに基づいて拡張と修正を行った.wxssのcss上の拡張特性:1)、寸法単位:rpx rpx:は相対画素単位であり、スクリーン幅に応じて適応することができる.モバイル端末の開発に向けて、設計原稿は一般的にiphone 6を基準としている.iPhoneは網膜スクリーン、すなわちcssで設定した1 pxを用いており、iPhoneでは実際には2 px*2 pxの画素点から構成されている.iPhone 6を基準として画面幅375 px、合計750個の物理画素がある場合、750 rpx=350 px、すなわち1 rpx=0.5 px 2)、スタイルインポート@importはcssにおける外部スタイルテーブルのインポートと類似する

    @import "common.wxss";