云開發(fā) WXML與WXSS

2020-07-17 16:31 更新

相信通過前面的學習，大家對一個完整的小程序的文件結(jié)構(gòu)有了一個大致的了解，對小程序的開發(fā)者工具也有了一定的認識，那這節(jié)我們來開始動手寫一下小程序的代碼。

編輯WXML文件

我們在開發(fā)者工具里打開之前修改的模板小程序home文件夾下的home.wxml，里面有如下代碼

<!--pages/home/home.wxml-->


<text>pages/home/home.wxml</text>

這個第1行，是一句注釋，也就是一句說明，不會顯示在小程序的前端，第2行就是一個<text>組件。

接下來我們會廣泛使用到小程序的<view>組件。比如我們在上面的代碼下面加一下下面的代碼，大家再來看效果：

<view>


    <view>


        <view>WXML 模板</view>


        <view>從事過網(wǎng)頁編程的人知道，網(wǎng)頁編程采用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結(jié)構(gòu)，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。</view>


    </view>


</view>

大家可以結(jié)合上面的代碼，來了解一下組件的基本寫法

  • <view>組件和<text>組件類似，他們都是成對出現(xiàn)的，比如<text></text>，<view></view>，兩個要一起寫，有前面的開始標簽，后面就要有一個閉合標簽，閉合標簽前面有一個“/”
  • view組件是可以嵌套寫的，
  • 為了讓視覺上更好看，寫代碼的時候要有縮進（雖然不縮進也不會有影響）

我們可以把這個頁面寫的更加復雜一點。

<view>


    <view>


        <view>


            <view>技術(shù)學習說明</view>


            <view>技術(shù)和我們以往所接觸的一些知識有很大的不同，比如英文非常強調(diào)詞匯量，需要你多說多背；數(shù)學需要你記住公式，反復練習；在教學的方式上也有很大的不同，以前都是有專門的老師手把手教你，而且還有同學交流。那要學好技術(shù)，應該依循什么樣的學習方法和教學方法呢？


            </view>


        </view>


        <view>


            <view>


                <view>自學而非手把手</view>


                <view>技術(shù)的方向眾多，而且知識點也是非常龐雜，需要你具備一定的自學能力，所謂自學能力就是要求你遇到問題能夠勤于思考，擅于搜索，能夠不斷實踐探索。在實際工作中，也要求你能根據(jù)技術(shù)文檔可以迅速掌握前沿的技術(shù)，而同事不會有時間教你，如果沒有自學能力，是很難勝任很多工作的。


                </view>


            </view>


            <view>


                <view>查閱文檔而非死記知識點</view>


                <view>在高中一學期一門課只有很薄的一本書，老師會反復講解知識點，強化你的記憶，考試也是閉卷；而技術(shù)一個很小的分支，內(nèi)容就有幾千頁甚至更多，強記知識點顯然不合適。學習技術(shù)要像查詞典一樣來查閱技術(shù)文檔，你只需要掌握基本的語法和用法，在編程的時候隨時查閱，就像你不需要背誦上萬的單詞也能知道它的意思用法一樣，所以技術(shù)文檔是學習技術(shù)最為重要的參考資料。


                </view>


            </view>


            <view>


                <view>實戰(zhàn)而非不動手的看書</view>


                <view>技術(shù)是最強調(diào)結(jié)果的技能，你看了再多書，如果不知道技術(shù)成品是怎么寫出來的，都是枉然。很多朋友有收集癖，下載了很多電子資源，收藏了很多高贊的技術(shù)文章，但是卻沒有動手去消化去理解，把時間和精力都浪費了。不動手在開發(fā)者工具里去寫代碼，不動手配置開發(fā)環(huán)境，缺乏實戰(zhàn)的經(jīng)驗，都是阻礙你學好技術(shù)的壞習慣。


                </view>


            </view>


            <view>


                <view>搜索而非做伸手黨</view>


                <view>在以前，我們遇到技術(shù)問題，我們可以問老師問同學，于是很多人把這種不良的習慣也帶到了技術(shù)的學習當中，遇到問題也總喜歡求助于別人。技術(shù)的方向眾多，環(huán)境復雜，問題也是很多，如果你總是依賴別人的解答，是很難學好技術(shù)的。一定要學會在網(wǎng)上通過搜索遇到的問題來找答案。


                </view>


            </view>


            <view>


                <view>團隊協(xié)作，而非單打獨斗</view>


                <view>一個產(chǎn)品涉及的技術(shù)非常多，需要很多人來一起配合才能開發(fā)好，所以學習技術(shù)的時候我們需要了解一些代碼規(guī)范、工作的流程、項目管理等，在技術(shù)方面也會有API接口，接口文檔這些，還要懂得如何和同職業(yè)的同事以及不同角色的人如設計師等一起配合，而不是自己一個人單打獨斗。


                </view>


            </view>


            <view>


                <view>系統(tǒng)的指導而非茫然無序</view>


                <view>學好技術(shù)最依賴你自學，但是如果沒有人指導你，你可能會像蒼蠅一樣陷入眾多資料中茫然無序，抓不住一個技術(shù)的重點，也不清楚哪些技術(shù)才值得你深入學習，最好是有經(jīng)驗的人可以指點你應該看什么，學什么，什么才是重點，當然不是手把手教你。


                </view>


            </view>


        </view>


    </view>   


</view>

WXSS選擇器

大家是不是已經(jīng)發(fā)現(xiàn)我們寫的小程序頁面有點丑？那我們需要對這個小程序頁面進行美化。但是我們的代碼里面<view>組件這么多，要是不對每個組件進行區(qū)分，就很難對每個組件進行美化了。

id與class選擇器

這個時候我們就要先了解一下選擇器的概念。選擇器是用來干什么的呢？從名字里我們就可以看出來，就是為了選擇。比如學校有1000個人，我們要選擇出其中一個人，那我們可以給所有人一個學號，這個學號是唯一的，我們可以稱這個學號為id，用于精準的選擇；還有的時候我們需要對一群人進行分類選擇，比如整個班級或者所有男生，這個班級、性別，我們可以稱為class，用于分類選擇。

在wxss技術(shù)文檔這里有關(guān)于選擇器的描述。

技術(shù)文檔：WXSS技術(shù)文檔

給組件增加屬性

比如上面的view組件實在太多了，為了區(qū)分它們，我們給他們加一些屬性，這樣我們就可以用選擇器選擇它們了。

<view id="wxmlinfo">


    <view class="content">


        <view class="title">WXML 模板</view>


        <view class="desc">從事過網(wǎng)頁編程的人知道，網(wǎng)頁編程采用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結(jié)構(gòu)，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和用戶的交互。


        </view>


    </view>


</view>

以及比較復雜的那一段代碼的view組件也加上屬性。給組件添加屬性在外觀上并不會有什么效果哦~

<view id="studyweapp">


    <view class="content">


        <view class="header">


            <view class="title">技術(shù)學習說明</view>


            <view class="desc">技術(shù)和我們以往所接觸的一些知識有很大的不同，比如英文非常強調(diào)詞匯量，需要你多說多背；數(shù)學需要你記住公式，反復練習；在教學的方式上也有很大的不同，以前都是有專門的老師手把手教你，而且還有同學交流。


            那要學好技術(shù)，應該依循什么樣的學習方法和教學方法呢？


            </view>


        </view>


        <view class="lists">


            <view class="item">


                <view class="item-title">自學而非手把手</view>


                <view class="item-desc">技術(shù)的方向眾多，而且知識點也是非常龐雜，需要你具備一定的自學能力，所謂自學能力就是要求你遇到問題能夠勤于思考，擅于搜索，能夠不斷實踐探索。在實際工作中，也要求你能根據(jù)技術(shù)文檔可以迅速掌握前沿的技術(shù)，而同事不會有時間教你，如果沒有自學能力，是很難勝任很多工作的。


                </view>


            </view>


            <view class="item">


                <view class="item-title">查閱文檔而非死記知識點</view>


                <view class="item-desc">在高中一學期一門課只有很薄的一本書，老師會反復講解知識點，強化你的記憶，考試也是閉卷；而技術(shù)一個很小的分支，內(nèi)容就有幾千頁甚至更多，強記知識點顯然不合適。學習技術(shù)要像查詞典一樣來查閱技術(shù)文檔，你只需要掌握基本的語法和用法，在編程的時候隨時查閱，就像你不需要背誦上萬的單詞也能知道它的意思用法一樣，所以技術(shù)文檔是學習技術(shù)最為重要的參考資料。


                </view>


            </view>


            <view class="item">


                <view class="item-title">實戰(zhàn)而非不動手的看書</view>


                <view class="item-desc">技術(shù)是最強調(diào)結(jié)果的技能，你看了再多書，如果不知道技術(shù)成品是怎么寫出來的，都是枉然。很多朋友有收集癖，下載了很多電子資源，收藏了很多高贊的技術(shù)文章，但是卻沒有動手去消化去理解，把時間和精力都浪費了。不動手在開發(fā)者工具里去寫代碼，不動手配置開發(fā)環(huán)境，缺乏實戰(zhàn)的經(jīng)驗，都是阻礙你學好技術(shù)的壞習慣。


                </view>


            </view>


            <view class="item">


                <view class="item-title">搜索而非做伸手黨</view>


                <view class="item-desc">在以前，我們遇到技術(shù)問題，我們可以問老師問同學，于是很多人把這種不良的習慣也帶到了技術(shù)的學習當中，遇到問題也總喜歡求助于別人。技術(shù)的方向眾多，環(huán)境復雜，問題也是很多，如果你總是依賴別人的解答，是很難學好技術(shù)的。一定要學會在網(wǎng)上通過搜索遇到的問題來找答案。


                </view>


            </view>


            <view class="item">


                <view class="item-title">團隊協(xié)作，而非單打獨斗</view>


                <view class="item-desc">一個產(chǎn)品涉及的技術(shù)非常多，需要很多人來一起配合才能開發(fā)好，所以學習技術(shù)的時候我們需要了解一些代碼規(guī)范、工作的流程、項目管理等，在技術(shù)方面也會有API接口，接口文檔這些，還要懂得如何和同職業(yè)的同事以及不同角色的人如設計師等一起配合，而不是自己一個人單打獨斗。</view>


            </view>


            <view class="item">


                <view class="item-title">系統(tǒng)的指導而非茫然無序</view>


                <view class="item-desc">學好技術(shù)最依賴你自學，但是如果沒有人指導你，你可能會像蒼蠅一樣陷入眾多資料中茫然無序，抓不住一個技術(shù)的重點，也不清楚哪些技術(shù)才值得你深入學習，最好是有經(jīng)驗的人可以指點你應該看什么，學什么，什么才是重點，當然不是手把手教你。


                </view>


            </view>


        </view>


    </view>   


</view>

大家在學習的過程中，要隨時在開發(fā)者工具的模擬器上查看效果，也要經(jīng)常用微信掃碼預覽所生成的二維碼來查看效果，千萬不要只看教程怎么說，而是自己要動手去實戰(zhàn)。

CSS參考手冊

給wxml文件的組件加了選擇器之后，我們就可以在wxss文件里給指定的某個<view>組件以及某類<view>組件添加一些美化了，這里我們需要編輯home.wxss文件。wxss美化的知識和css是一樣的，所以小程序的技術(shù)文檔里面沒有，大家可以看一下w3shool的CSS參考手冊。CSS文件的作用就是來美化組件的。

技術(shù)文檔：CSS參考手冊

這里大家只需要了解CSS的字體屬性、文本屬性、背景屬性、邊框?qū)傩?/strong>、盒模型

CSS涉及的知識點非常多，現(xiàn)在大家也只需要知道有這些概念即可，學技術(shù)千萬不要在沒有看到實際效果的情況下來死記概念。概念沒有記住一點關(guān)系都沒有，因為大家可以隨時來查文檔。接下來我們也會有實際的例子讓大家看到效果，大家想深入學習的時候可以回頭再看這些文檔。

字體屬性與文本屬性

下面這些關(guān)于CSS的基礎知識點，大家可以結(jié)合我們是如何調(diào)整Word、PPT的樣式的來理解，比如我們是怎么調(diào)整文本的大小、顏色、粗細等等的，添加樣式的時候要注意隨手實戰(zhàn)了解了效果再說。

比如class為title的<view>組件里面的文字是標題，我們需要對標題的字體進行加大、加粗以及居中處理，這時候我們就可以在home.wxss文件里加入以下代碼，然后大家看看有什么效果。

.title{


  font-size: 20px; 


  font-weight: 600;


  text-align: center;


  }

通過 .title 這個選擇器，我們就選擇到了類class為 title 的<view>組件，然后就可以精準地對它進行美化，對它的美化代碼不會用在其他組件上了。

大家也要留意css的寫法，這里font-size，font-weight，text-align外面稱之為屬性，冒號:后面的我們稱之為值，屬性:值這一整個我們叫做聲明，每個聲明我們用分號;隔開。大家不要記這些概念，知道是個什么東西就行了。

class為item-title的<view>組件里面的文字是一個列表的標題，我們希望它和其他文字的樣式有所不同，不過這個標題要比title的字體小一些；比其他文字更粗，但是比title更細；顏色我們可以添加一個彩色字體，

.item-title{


  font-size:18px;


  font-weight:500;


  color: #c60;


}

我們希望描述類的文字顏色淺一點，不要那么黑，我們可以換一個淺一點的顏色，我們在home.wxss下面繼續(xù)加代碼.

.desc,.item-desc{


  color: #333;


}

大家注意，我們這里有兩個選擇器，一個是desc，一個是item-desc，當我們希望兩個不同的選擇器有相同的css代碼時，可以簡化一起寫，然后用逗號,隔開。

除了標題（class為title和item-title的<view>組件）我們都給他們加了字體大小，我們希望所有的文字大小、行間距有一個統(tǒng)一的設定。

#wxmlinfo,#studyweapp{


  font-size:16px;


  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;


  line-height: 1.6;


}

為了大家方便查閱技術(shù)文檔，我們把這些常用的css技術(shù)文檔整理到以下表格，方便大家更深入的去學習。

字體屬性 備注
font-family 規(guī)定文本的字體系列。
font-size 規(guī)定文本的字體尺寸。
font-weight 規(guī)定字體的粗細。
文本屬性 備注
color 設置文本的顏色。
line-height 設置行高。
text-align 規(guī)定文本的水平對齊方式。

盒模型

大家有沒有發(fā)現(xiàn)段落之間的距離、文字之間的距離，以及與邊框之間的距離都比較擁擠？這個時候就需要用到盒子模型啦。盒子模型就像一個長方形的盒子，它有長度、高度、也有邊框，以及內(nèi)邊距與外邊距。我們通過實戰(zhàn)來了解一下。

長度、高度、邊框我們比較好理解，那這個內(nèi)邊距和外邊距是什么意思呢？

內(nèi)邊距就是這個長方形的邊框與長方形里面的內(nèi)容之間的距離，有上邊距，右邊距、下邊距、左邊距這個四個內(nèi)邊距，分別為padding-top，padding-right，padding-bottom，padding-left。注意是上、右、下、左，這樣一個順時針。

那外邊距就是這個長方形的邊框與長方形外面的內(nèi)容之間的距離，同樣也有上邊距margin-top，右邊距margin-right，下邊距margin-bottom，左邊距margin-left這個四個邊距。同樣也是上、右、下、左這個順時針。

比如我們給id為wxmlinfo和studyweapp的<view>組件加一個內(nèi)部距，讓文字

#wxmlinfo,#studyweapp{


  padding-top:20px;


  padding-right:15px;


  padding-bottom:20px;


  padding-left:15px;


}

padding的簡寫 上面這四個padding是可以做一定的簡寫的，關(guān)于padding的簡寫，大家可以去閱讀以下技術(shù)文檔，多用就會了，CSS padding屬性 ，在這里有四個padding簡寫的案例，比如上面的這四條聲明可以簡寫成padding:20px 15px。大家可以業(yè)余深入了解一下。

class為title的view組件是標題，我們希望它和下面的文字距離大一點，我們可以添加以下樣式:

.title,.item-title{


  margin-bottom:0.9em;


  }

這里咋又冒出了一個em的單位，em是相對于當前字體尺寸而言的單位，如果當前你的字體大小為16px，那1em為16px；如果當前你的字體大小為18px，那1em為18px。

為了讓class為item-title的<view>組件，也就是列表的標題更加突出，我們可以給它左邊加一個邊框，

.item-title{


  border-left: 3px solid #c60;


  padding-left: 15px;


}

這樣，小程序的一篇文章的樣式看起來就算馬馬虎虎可以接受啦~為了便于大家查閱，我們也把盒子模型的三類屬性整合在了一起

內(nèi)邊距屬性 備注
padding 在一個聲明中設置所有內(nèi)邊距屬性。
padding-top 設置元素的上內(nèi)邊距。
padding-right 設置元素的右內(nèi)邊距。
padding-bottom 設置元素的下內(nèi)邊距。
padding-left 設置元素的左內(nèi)邊距。
外邊距屬性 備注
margin 在一個聲明中設置所有外邊距屬性。
margin-top 設置元素的上外邊距。
margin-right 設置元素的右外邊距
margin-bottom 設置元素的下外邊距。
margin-left 設置元素的左外邊距。
邊框?qū)傩?/th> 備注
border 在一個聲明中設置所有的邊框?qū)傩浴１热鏱order:1px solid #ccc;
border-top 在一個聲明中設置所有的上邊框?qū)傩浴?/td>
border-right 在一個聲明中設置所有的右邊框?qū)傩浴?/td>
border-bottom 在一個聲明中設置所有的下邊框?qū)傩浴?/td>
border-left 在一個聲明中設置所有的左邊框?qū)傩浴?/td>
border-width 設置四條邊框的寬度。
border-style 設置四條邊框的樣式。
border-color 設置四條邊框的顏色。
border-radius 簡寫屬性，設置所有四個 border-*-radius 屬性。
box-shadow 向方框添加一個或多個陰影。

更多的設計樣式，大家可以根據(jù)上面的技術(shù)文檔，在開發(fā)者工具里像做實驗一樣的來測試學習。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號