? ????? ??? ??? ??? ??? ?? ???? WeChat ?? ????? ?? ?? ??? ?????. ???? WeChat? ?? ????? ??? ???? ??? ??? ???? ??? ??? ? ????. ?? ? ?????? ??? ? ?? ?? ??? ???? ???????. ?? ???? ??? ??? ????.

【?? ?? ?? ??: ?? ???? ?? ????】

?? ????? ?? ??? ??

??? WeChat? ?? ????? ?? ??? ????, ?? ????? ??? ???? ???? ??? ???? ?? ?? ??? ? ????. ?? ??????? ? ? ?? ??? ??????. ?? ?? ?? ????? WeChat?? ???? API? ???? QR ?? ?? ? ??? ?? ??? ?????.

???? ??? ???? ??? ?????.

?? ??

?? ????

Components

API

?? ??

1. ??? mini ???? ??? ??? ??? ???? ?? ??????. ? ?

WXML ???? WXSS ???? ??? ????? ?????.

JS ????? ?? ????? ?????

2. program?? ????? ?? ??? ? ???? ????.

??? ???? ?? ??? ? ??

?? ???? ?? ?? ? ??

? ? ?????. WeChat ?????? ??

?? ????

1. ?? ????? ?? ?????? ????? ?? ???? ??? ????

app.json ?? ?? ??? ?? ??

?? app.js ?? ???? ?? ???? App()? ???? ?? ????? ????. ??? ???? json ?? ??

???? .wxml ???? .wxss ???? ?????.

???? .js ??? ???? Page()? ???? ??? ????? ?????.

??? ???? ???????

Components

1. ?? ????? ?? ?? ??:

?? ????? ?? ??? ??? ?? ?????. ??? ??? ???? ???? ?? ??? ???? ???? ??? ??? ??? ??? ? ????. ?? ????? ?? ??? ????? 9?? ??? ????. ?,

View ????

?? ???

Form ?? ??

Navigation ?? ??

• Body ?? ??

• ?? ? ????

• ??? ??? ????

• ?? ??

• ???

• 2. ????? ???? ? ???? ??? ????

• view
• ?? ? ??
  The div? ??? HTML??? ?? ?? ??? ??? ???? ??? ?? ?? ?? ?????. ?? ?? ?? ????? ???? flex? ?????.

• wxml ??:

  <view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
  </view>

wxss ??:

.container1 view{
  width:100px;
  height:100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: aquamarine;
}
.container1 view:nth-child(2){
  background-color: azure;
}
.container1 view:nth-child(3){
  background-color: darkorange;
}
.container1 {
  display: flex;
  justify-content: space-around;
}

?? ??:

scroll-view

??? ??? ?? ??

??

??? ?? -view? ???? ????? ??? ????

wxml ??:

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

??? wxss ??:

.container1 {
  border:1px solid red;
  height:110px;
  /*使用scroll-view時(shí)設(shè)置固定的高度*/

?? ??:

swiper ? swiper-item

• ??? ?? ???? ?? ?? ? ??? ?? ?? ?? ??

??? ??? ???? ?? ? ????? ?????.

• wxml ??:

  <swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" circular>
  <swiper-item>
  <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>

wxss ??:

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

?? ??:

3. ????? ???? ?? ??? ?? ??

text.

??? ?? ??

HTML? ?? ??? ???? ??? ?????.

?? ?? ??? ??? ???? ??? ?????.

<view>
長(zhǎng)按可以選中文本內(nèi)容:
<text user-select>HelloWorld!</text>
</view>

rich-text

?? ??? ?? ??? HTML ???? WXML ??? ????? ?? ?????.

HTML ???? ?? UI ??? ??????

<rich-text nodes="<h1 style=&#39;color:red&#39;>標(biāo)題</h1>"> </rich-text>

4.其他常用組件

button

按鈕組件

功能比 HTML 中的 button 按鈕豐富

通過 open-type 屬性可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等）

image

圖片組件

image 組件默認(rèn)寬度約 300px、高度約 240px

navigator

頁(yè)面導(dǎo)航組件

類似于 HTML 中的 a 鏈接，實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)

5.API

小程序中的 API 是由宿主環(huán)境提供的，通過這些豐富的小程序 API，開發(fā)者可以方便的調(diào)用微信提供的能力，例如：實(shí)現(xiàn)支付，掃碼等功能。

小程序 API 的 3 大分類：

事件監(jiān)聽 API

• 特點(diǎn)：以 on 開頭，用來(lái)監(jiān)聽某些事件的觸發(fā)

• 舉例：wx.onWindowResize(function callback) 監(jiān)聽窗口尺寸變化的事件

同步 API

• 特點(diǎn)1：以 Sync 結(jié)尾的 API 都是同步 API

• 特點(diǎn)2：同步 API 的執(zhí)行結(jié)果，可以通過函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常

• 舉例：wx.setStorageSync('key', 'value') 向本地存儲(chǔ)中寫入內(nèi)容

異步 API

• 特點(diǎn)：類似于 jQuery 中的 $.ajax(options) 函數(shù)，需要通過 success、fail、complete 接收調(diào)用的結(jié)果

• 舉例：wx.request() 發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過 success 回調(diào)函數(shù)接收數(shù)據(jù)

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

? ??? WeChat ??? ??? ?? ??? ??? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!