? ????? ??? ??? ??? ??? ?? ???? 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è)置固定的高度*/

?? ??:

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>
長按可以選中文本內(nèi)容:
<text user-select>HelloWorld!</text>
</view>

rich-text

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

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

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

4.其他常用組件

button

按鈕組件

功能比 HTML 中的 button 按鈕豐富

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

image

圖片組件

image 組件默認寬度約 300px、高度約 240px

navigator

頁面導(dǎo)航組件

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

5.API

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

小程序 API 的 3 大分類：

事件監(jiān)聽 API

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

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

同步 API

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

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

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

異步 API

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

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

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

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