ホームページ > 記事 > WeChat アプレット > WeChatアプレット開発用ホスト環境の詳細説明
この記事では、WeChat ミニ プログラム に関する関連知識を提供します。主にホスト環境に関する関連問題を紹介します。WeChat 携帯電話はミニ プログラムのホスト環境であり、ミニ プログラムはホストに依存します。環境提供された機能は、通常の Web ページでは実現できない多くの機能を実現できますので、一緒に見ていきましょう。
[関連する学習の推奨事項: 小さなプログラム学習チュートリアル]
手机微信Itはミニ プログラムのホスト環境であり、ホスト環境が提供する機能を利用して、ミニ プログラムは通常の Web ページでは実行できない多くの機能を実現できます。例: ミニ プログラムは、WeChat が提供する API を呼び出して、QR コードのスキャンや支払いなどの機能を実装します。
アプレットのホスティング環境には次のものが含まれます:
通信モデル
実行メカニズム
コンポーネント
API
1. コミュニケーションの本体
アプレット 通信の主体はレンダリング層とロジック層であり、そのうち:
WXML テンプレートと WXSS スタイルはレンダリング層で動作します
JS スクリプトはロジック層で動作します
2. ミニ プログラムの通信モデル
ミニ プログラムの通信モデルは 2 つの部分に分かれています:
レンダリング層とロジック層の間の通信
ロジック層とサードパーティサーバー間の通信
どちらも WeChat クライアントを通じて転送されます
##1. ミニ プログラムの起動プロセス
ミニ プログラムのコード パッケージをダウンロードローカルへのapp.jsonをグローバルに解析する設定ファイルapp.jsアプレットエントリファイルを実行し、App()を呼び出してアプレットインスタンスを作成しますアプレットをホームにレンダリングしますpageアプレットの起動が完了しました2. ページのレンダリング処理
解析されたページの .json 構成ファイルをロードします。ページの .wxml テンプレートと .wxss スタイルをロードします。ページの .js ファイルを実行し、Page() を呼び出してページ インスタンスを作成します。 ページのレンダリングが完了しました1. ミニ プログラムのコンポーネントの分類:
ミニプログラムのコンポーネントもホスト環境から提供されており、開発者はそれに基づいたコンポーネントを使用して美しいページ構造を素早く構築できます。公式には、ミニ プログラムのコンポーネントは次の 9 つのカテゴリに分類されています。2. 一般的に使用されるビュー コンテナ クラスのコンポーネント
view通常のビュー領域 は同様ですHTML の div はブロック レベルの要素です。ページ レイアウト効果を実現するためによく使用されます。例: 水平レイアウトを実現するには flex を使用します。<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 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时设置固定的高度*/達成された効果:
<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のspanタグと同様、インライン要素です長押ししてテキストコンテンツを選択します効果<view> 长按可以选中文本内容: <text user-select>HelloWorld!</text> </view>
<rich-text nodes="<h1 style='color:red'>标题</h1>"> </rich-text>
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 サイトの他の関連記事を参照してください。