導(dǎo)航路線

關(guān)于微信小程序知識(shí)點(diǎn)一共做了六個(gè)博客,涵蓋大部分內(nèi)容,有想學(xué)習(xí)的可以按照以下順序查看
1.微信小程序的啟動(dòng)和渲染過(guò)程(加組件分類和組件的基本使用以及API分類)
2.微信小程序wxml的數(shù)據(jù)和事件的綁定,以及條件和列表的渲染
3.微信小程序wxss相關(guān)介紹、全局配置和tabbar知識(shí)以及發(fā)送網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求(post,get)
4.微信小程序頁(yè)面導(dǎo)航、編程式導(dǎo)航、頁(yè)面事件、生命周期和WXS腳本
5.微信小程序自定義組件、組件的生命周期和組件通信(插槽)
6.微信小程序使用npm包、全局?jǐn)?shù)據(jù)共享和分包

小程序的啟動(dòng)過(guò)程

1. 把小程序的代碼包下載到本地
2. 解析app.json全局配置文件
3. 執(zhí)行app.js小程序入口文件,調(diào)用App()創(chuàng)建小程序?qū)嵗?/li>
4. 渲染小程序首頁(yè)
5. 小程序啟動(dòng)完成

小程序頁(yè)面渲染的過(guò)程

1. 加載解析頁(yè)面的.json配置文件
2. 加載頁(yè)面的.wxml模板和.wxss樣式
3. 執(zhí)行頁(yè)面的.js文件,調(diào)用page(創(chuàng)建頁(yè)面實(shí)例
4. 頁(yè)面渲染完成

小程序中組件的分類有九大類

• 視圖容器
• 基礎(chǔ)內(nèi)容
• 表單組件
• 導(dǎo)航組件
• 媒體組件
• map地圖組件
• canvas畫布組件
• 開(kāi)放能力
• 無(wú)障礙訪問(wèn)
  上面加粗的為常用的

常用的視圖容器類組件

1. view
   • 普通視圖區(qū)域
   • 類似于html中的div,是一個(gè)塊級(jí)元素
   • 常用來(lái)實(shí)現(xiàn)頁(yè)面的布局效果
2. scroll-view
   • 可滾動(dòng)的視圖區(qū)域
   • 常用來(lái)實(shí)現(xiàn)滾動(dòng)列表效果

下列分別為wxml和wxss的代碼,可用于查看效果

<scroll-view class="container1" scroll-y>
  <view>a</view>
  <view>b</view>
  <view>c</view>
</scroll-view>

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: pink;
}
.container1 view:nth-child(1){
  background-color:green;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1{
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

3. swiper和swiper-item
   • 輪播圖容器組件和輪播圖item組件

下列分別為wxml和wxss的代碼,可用于查看效果

<swiper>
  <swiper-item class="swiper-container">  
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: pink;
}
swiper-item:nth-child(2) .item{
  background-color: green;
}
swiper-item:nth-child(3) .item{
  background-color: orange;
}

swiper組件常用屬性

使用如下,這里就演示了兩個(gè)屬性,各位沒(méi)事干的可以挨個(gè)測(cè)試一下,wxss代碼和上面一樣

<swiper indicator-dots indicator-color="white">
  <swiper-item class="swiper-container">  
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

4. text
   • 文本組件
   • 類似于HTML中的span標(biāo)簽
     text組件可以通過(guò)selectable屬性,實(shí)現(xiàn)長(zhǎng)按選中文本內(nèi)容的效果

<view>
	手機(jī)號(hào)支持長(zhǎng)按選中效果
	<text selectable>13800005056</text>
</view>

效果圖:(這個(gè)效果在開(kāi)發(fā)者工具模擬器實(shí)現(xiàn)不了,可以通過(guò)手機(jī)真機(jī)實(shí)現(xiàn))

5. rich-text
   • 富文本組件
   • 支持把HTML字符串渲染為WXML結(jié)構(gòu)
     通過(guò)rich-text組件的nodes屬性節(jié)點(diǎn),把HTML字符串渲染為對(duì)應(yīng)的UI結(jié)構(gòu):

應(yīng)用場(chǎng)景:商品詳情頁(yè)的結(jié)構(gòu)渲染

<rich-text nodes="<h2 style='color:red;'>這是標(biāo)題</h2>"/>

6. button
   • 按鈕組件
   • 功能比HTML中的button按鈕豐富
   • 通過(guò)open-type屬性可以調(diào)用微信提供的各種功能(客服,轉(zhuǎn)發(fā),獲取用戶授權(quán),獲取用戶信息等)
     以下是小程序按鈕的種類

<button>普通按鈕</button>
<!-- 通過(guò)type屬性指定按鈕的顏色和類型 -->
<button type="primary">主色調(diào)按鈕</button>
<button type="warn">警告按鈕</button>
<!-- size="mini" 小尺寸按鈕-->
<button size="mini">普通小尺寸按鈕</button>
<button type="primary" size="mini">主色調(diào)小尺寸按鈕</button>
<button type="warn" size="mini">警告小尺寸按鈕</button>
<!-- plain 鏤空按鈕 -->
<button size="mini" plain>普通小尺寸鏤空按鈕</button>
<button type="primary" size="mini" plain>主色調(diào)小尺寸鏤空按鈕</button>
<button type="warn" size="mini" plain>警告小尺寸鏤空按鈕</button>

效果圖:

7. image
   • 圖片組件
   • image組件默認(rèn)寬度約300px,高度約為240px(給了標(biāo)簽不引入圖片也會(huì)占位)

<image src="" mode=""/>
<image src="/img/1.jpg" mode=""/>

效果圖:

image組件的mode屬性用來(lái)指定圖片的裁剪和縮放模式,常用的mode屬性如下

8. navigator
   • 頁(yè)面導(dǎo)航組件
   • 類似于HTML中的a鏈接

小程序宿主環(huán)境-API

小程序官方把API分為了如下三大類文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-674168.html

1. 事件監(jiān)聽(tīng)API
   • 特點(diǎn): 以on開(kāi)頭,用來(lái)監(jiān)聽(tīng)某些事件的觸發(fā)
   • 舉例: wx.onWindowResize(function callback) 監(jiān)聽(tīng)窗口尺寸變化的事件
2. 同步API
   • 特點(diǎn)一: 以Sync結(jié)尾的API都是同步API
   • 特點(diǎn)二: 同步API的執(zhí)行結(jié)果,可以通過(guò)函數(shù)返回值直接獲取,如果執(zhí)行出錯(cuò)會(huì)拋出異常
   • 舉例: wx.setStorageSync(‘key’,‘value’) 向本地存儲(chǔ)中寫入內(nèi)容
3. 異步API
   • 特點(diǎn): 類似于jQuery中的$.ajax(options)函數(shù),需要通過(guò)success、fail、complete接收調(diào)用的結(jié)果
   • 舉例: wx.request() 發(fā)起網(wǎng)絡(luò)請(qǐng)求,通過(guò)success回調(diào)函數(shù)接收數(shù)據(jù)

到了這里，關(guān)于微信小程序的啟動(dòng)和渲染過(guò)程(加組件分類和組件的基本使用以及API分類)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！