この記事では、WeChat ミニ プログラム に関する関連知識(shí)を提供します。主にホスト環(huán)境に関する関連問(wèn)題を紹介します。WeChat 攜帯電話(huà)はミニ プログラムのホスト環(huán)境であり、ミニ プログラムはホストに依存します。環(huán)境提供された機(jī)能は、通常の Web ページでは実現(xiàn)できない多くの機(jī)能を?qū)g現(xiàn)できますので、一緒に見(jiàn)ていきましょう。

[関連する學(xué)習(xí)の推奨事項(xiàng): 小さなプログラム學(xué)習(xí)チュートリアル]

小さなプログラム ホスティング環(huán)境

手機(jī)微信Itはミニ プログラムのホスト環(huán)境であり、ホスト環(huán)境が提供する機(jī)能を利用して、ミニ プログラムは通常の Web ページでは実行できない多くの機(jī)能を?qū)g現(xiàn)できます。例: ミニ プログラムは、WeChat が提供する API を呼び出して、QR コードのスキャンや支払いなどの機(jī)能を?qū)g裝します。

アプレットのホスティング環(huán)境には次のものが含まれます:

通信モデル

実行メカニズム

コンポーネント

API

コミュニケーション モデル

1. コミュニケーションの本體

アプレット 通信の主體はレンダリング層とロジック層であり、そのうち:

WXML テンプレートと WXSS スタイルはレンダリング層で動(dòng)作します

JS スクリプトはロジック層で動(dòng)作します

2. ミニ プログラムの通信モデル

ミニ プログラムの通信モデルは 2 つの部分に分かれています:

レンダリング層とロジック層の間の通信

ロジック層とサードパーティサーバー間の通信

どちらも WeChat クライアントを通じて転送されます

動(dòng)作メカニズム

##1. ミニ プログラムの起動(dòng)プロセス

ミニ プログラムのコード パッケージをダウンロードローカルへの

app.jsonをグローバルに解析する設(shè)定ファイル

app.jsアプレットエントリファイルを?qū)g行し、App()を呼び出してアプレットインスタンスを作成します

アプレットをホームにレンダリングしますpage

アプレットの起動(dòng)が完了しました

2. ページのレンダリング処理

解析されたページの .json 構(gòu)成ファイルをロードします。

ページの .wxml テンプレートと .wxss スタイルをロードします。

ページの .js ファイルを?qū)g行し、Page() を呼び出してページ インスタンスを作成します。

ページのレンダリングが完了しました

コンポーネント

1. ミニ プログラムのコンポーネントの分類(lèi):

ミニプログラムのコンポーネントもホスト環(huán)境から提供されており、開(kāi)発者はそれに基づいたコンポーネントを使用して美しいページ構(gòu)造を素早く構(gòu)築できます。公式には、ミニ プログラムのコンポーネントは次の 9 つのカテゴリに分類(lèi)されています。

• #コンテナの表示

• 基本コンテンツ

• フォーム コンポーネント

• ナビゲーション コンポーネント

• ボディ コンポーネント

• マップマップコンポーネント

• canvas キャンバスコンポーネント

• オープン機(jī)能

• アクセシビリティ

2. 一般的に使用されるビュー コンテナ クラスのコンポーネント

view

通常のビュー領(lǐng)域

は同様ですHTML の div はブロック レベルの要素です。

ページ レイアウト効果を?qū)g現(xiàn)するためによく使用されます。

例: 水平レイアウトを?qū)g現(xiàn)するには 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;
}

達(dá)成効果:

スクロールビュー

• スクロール可能なビュー領(lǐng)域

• スクロール リスト効果を?qū)g現(xiàn)するためによく使用されます

スクロール ビューを使用します。上下スクロールの効果を?qū)g現(xiàn)します

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

達(dá)成された効果:

swiper と swiper-item

カルーセル チャート コンテナ コンポーネントとカルーセル チャート アイテム コンポーネント

これら 2 つのコンポーネントを使用して、カルーセル チャート効果を?qū)g現(xiàn)します:

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;
}

達(dá)成効果:

3. よく使用される基本的なコンテンツ コンポーネント

text

テキストコンポーネント

HTMLのspanタグと同様、インライン要素です

長(zhǎng)押ししてテキストコンテンツを選択します効果

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

リッチテキスト

リッチ テキスト コンポーネントは、HTML 文字列の WXML 構(gòu)造へのレンダリングをサポートします

対応する UI の HTML 文字列のレンダリング構(gòu)造＃＃＃

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

4.其他常用組件

button

按鈕組件

功能比 HTML 中的 button 按鈕豐富

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

image

圖片組件

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

navigator

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

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

5.API

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

小程序 API 的 3 大分類(lèi)：

事件監(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)窗口尺寸變化的事件

同步 API

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

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

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

異步 API

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

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

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

以上がWeChatアプレット開(kāi)発用ホスト環(huán)境の詳細(xì)説明の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。