ホームページ > 記事 > WeChat アプレット > WeChatアプレット開発用ホスト環境の詳細説明

WeChatアプレット開発用ホスト環境の詳細説明

WBOY転載: 2022-10-10 15:34:492562ブラウズ

この記事では、WeChat ミニプログラムに関する関連知識を提供します。主にホスト環境に関する関連問題を紹介します。WeChat 携帯電話はミニプログラムのホスト環境であり、ミニプログラムはホストに依存します。環境提供された機能は、通常の Web ページでは実現できない多くの機能を実現できますので、一緒に見ていきましょう。

[関連する学習の推奨事項: 小さなプログラム学習チュートリアル]

小さなプログラムホスティング環境

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

WeChatアプレット開発用ホスト環境の詳細説明

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

通信モデル

実行メカニズム

コンポーネント

API

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

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

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

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

JS スクリプトはロジック層で動作します

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

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

WeChatアプレット開発用ホスト環境の詳細説明

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

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

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

動作メカニズム

##1. ミニプログラムの起動プロセス

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

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

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

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

アプレットの起動が完了しました

WeChatアプレット開発用ホスト環境の詳細説明

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

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

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

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

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

コンポーネント

1. ミニプログラムのコンポーネントの分類:

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

#コンテナの表示
基本コンテンツ
フォームコンポーネント
ナビゲーションコンポーネント
ボディコンポーネント
マップマップコンポーネント
canvas キャンバスコンポーネント
オープン機能
アクセシビリティ

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

view

通常のビュー領域

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

ページレイアウト効果を実現するためによく使用されます。

例: 水平レイアウトを実現するには 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;
}

達成効果:

WeChatアプレット開発用ホスト環境の詳細説明

スクロールビュー

スクロール可能なビュー領域
スクロールリスト効果を実現するためによく使用されます

スクロールビューを使用します。上下スクロールの効果を実現します

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

達成された効果:

WeChatアプレット開発用ホスト環境の詳細説明

swiper と swiper-item

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

これら 2 つのコンポーネントを使用して、カルーセルチャート効果を実現します:

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

達成効果:

WeChatアプレット開発用ホスト環境の詳細説明

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

text

テキストコンポーネント

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

長押ししてテキストコンテンツを選択します効果

<view>
长按可以选中文本内容:
<text user-select>HelloWorld!</text>
</view>

WeChatアプレット開発用ホスト環境の詳細説明

リッチテキスト

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

対応する UI の HTML 文字列のレンダリング構造＃＃＃

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

WeChatアプレット開発用ホスト環境の詳細説明

4.其他常用组件

button

按钮组件

功能比 HTML 中的 button 按钮丰富

通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

image

图片组件

image 组件默认宽度约 300px、高度约 240px

navigator

页面导航组件

类似于 HTML 中的 a 链接，实现页面的跳转

5.API

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，例如：实现支付，扫码等功能。

小程序 API 的 3 大分类：

事件监听 API

特点：以 on 开头，用来监听某些事件的触发
举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

同步 API

特点1：以 Sync 结尾的 API 都是同步 API
特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容

异步 API

特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果
举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

【相关学习推荐：小程序学习教程】

以上がWeChatアプレット開発用ホスト環境の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

json jquery ajax html 回调函数字符串 map JS function 事件异步 flex canvas 微信小程序 ui

声明：

この記事はjuejin.imで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：WeChat ミニプログラムの自動展開次の記事：WeChat ミニプログラムの自動展開

続きを見る

WeChatアプレット開発用ホスト環境の詳細説明

小さなプログラム ホスティング環境

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

動作メカニズム

コンポーネント

関連記事

小さなプログラムホスティング環境

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