云開發(fā) WXML與WXSS

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

編輯WXML文件

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

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


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

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

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

<view>


    <view>


        <view>WXML 模板</view>


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


    </view>


</view>

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

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

我們可以把這個(gè)頁面寫的更加復(fù)雜一點(diǎn)。

<view>


    <view>


        <view>


            <view>技術(shù)學(xué)習(xí)說明</view>


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


            </view>


        </view>


        <view>


            <view>


                <view>自學(xué)而非手把手</view>


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


                </view>


            </view>


            <view>


                <view>查閱文檔而非死記知識(shí)點(diǎn)</view>


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


                </view>


            </view>


            <view>


                <view>實(shí)戰(zhàn)而非不動(dòng)手的看書</view>


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


                </view>


            </view>


            <view>


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


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


                </view>


            </view>


            <view>


                <view>團(tuán)隊(duì)協(xié)作，而非單打獨(dú)斗</view>


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


                </view>


            </view>


            <view>


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


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


                </view>


            </view>


        </view>


    </view>   


</view>

WXSS選擇器

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

id與class選擇器

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

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

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

給組件增加屬性

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

<view id="wxmlinfo">


    <view class="content">


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


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


        </view>


    </view>


</view>

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

<view id="studyweapp">


    <view class="content">


        <view class="header">


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


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


            那要學(xué)好技術(shù)，應(yīng)該依循什么樣的學(xué)習(xí)方法和教學(xué)方法呢？


            </view>


        </view>


        <view class="lists">


            <view class="item">


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


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


                </view>


            </view>


            <view class="item">


                <view class="item-title">查閱文檔而非死記知識(shí)點(diǎn)</view>


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


                </view>


            </view>


            <view class="item">


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


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


                </view>


            </view>


            <view class="item">


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


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


                </view>


            </view>


            <view class="item">


                <view class="item-title">團(tuán)隊(duì)協(xié)作，而非單打獨(dú)斗</view>


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


            </view>


            <view class="item">


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


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


                </view>


            </view>


        </view>


    </view>   


</view>

大家在學(xué)習(xí)的過程中，要隨時(shí)在開發(fā)者工具的模擬器上查看效果，也要經(jīng)常用微信掃碼預(yù)覽所生成的二維碼來查看效果，千萬不要只看教程怎么說，而是自己要?jiǎng)邮秩?shí)戰(zhàn)。

CSS參考手冊

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

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

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

.title{


  font-size: 20px; 


  font-weight: 600;


  text-align: center;


  }

.item-title{


  font-size:18px;


  font-weight:500;


  color: #c60;


}

.desc,.item-desc{


  color: #333;


}

#wxmlinfo,#studyweapp{


  font-size:16px;


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


  line-height: 1.6;


}

#wxmlinfo,#studyweapp{


  padding-top:20px;


  padding-right:15px;


  padding-bottom:20px;


  padding-left:15px;


}

.title,.item-title{


  margin-bottom:0.9em;


  }

.item-title{


  border-left: 3px solid #c60;


  padding-left: 15px;


}