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

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

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

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

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

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

通信モデル

実行メカニズム

コンポーネント

API

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

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

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

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

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

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

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

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

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

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

動作メカニズム

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

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

コンポーネント

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

• #コンテナの表示

• 基本コンテンツ

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

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

• ボディ コンポーネント

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

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

• オープン機能

• アクセシビリティ

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

 A B C 

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

• スクロール可能なビュー領域

• スクロール リスト効果を実現するためによく使用されます

 A B C 

.container1 { border:1px solid red; height:110px; /*使用scroll-view时设置固定的高度*/

  A   B   C  

.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. よく使用される基本的なコンテンツ コンポーネント

 长按可以选中文本内容: HelloWorld! 

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 サイトの他の関連記事を参照してください。