著者は仕事の関係で、WeChat アプレットと SAP システムを統合するプロジェクトに参加したことがあり、WeChat アプレットの開発知識をゼロから学びました。ここでは、関連する学習者に役立つことを期待して、一連の記事を通じて学んだことを共有します.
ステップ 1: WeChat Mini Program に申し込み、開発環境を構築する
このステップは、主に WeChat アプレットの登録と開発環境の構築です。
まず、WeChat の公式 Web サイトで独自の WeChat ミニ プログラムに申し込む必要があります。
ボタンをクリックして登録に進みます。WeChat ミニ プログラムまたは WeChat 公式アカウントを登録していないメール アドレスを使用する必要があることに注意してください。網易メールボックスを使用しています。登録後、メールボックスにアクティベーションメールが届きます。
アクティベート後、ミニプログラムの科目情報登録ページに入ることができます。ここでは、ID 番号と携帯電話の認証コードを使用して登録する必要があります。
登録後、WeChat 開発者ツールに入ることができます。私はアプレットプロジェクトを選びました:
Development Management->Development and Design メニューで、登録した WeChat Mini Program の ID を見つけます。コピーして後で使用します。
次に、以下のリンクにアクセスして、WeChat 開発者ツールをダウンロードします。
統合開発環境 (IDE) と考えることができます。
インストールが完了したら、WeChat 開発者ツールを開始します。ローカル プロジェクト ディレクトリを指定し、WeChat アプレットの AppID を入力するよう求められます。この ID は前の手順でコピーしました。
入力するだけで、共通のクイック スタート テンプレートを作成するオプションをオンにすると、WeChat 開発者ツールが WeChat アプレット リソース ファイルの Hello World バージョンを自動的に作成します。
自動的に作成されたアプレットを下の図に示します。インターフェイスの表示は、単純な Hello World テキストです。
[アップロード] ボタンをクリックします。
1.0.0 などのバージョン番号を維持し、[アップロード] をクリックします。
次に、アプレット管理の背景に戻ると、上記の WeChat 開発者ツールを介してアップロードしたアプレットのバージョン 1.0.0 が表示されます。[審査用に送信] の右側にあるドロップダウン メニューをクリックし、[試用版として選択] を選択します。
試用版の QR コードが生成され、友人に送信すると、このアプレットを使用できます。
友人が携帯電話で QR コードをスキャンすると、次のインターフェイスが表示されます。アプレットには試用版のプロンプトが表示されます。
Go to the trial version をクリックすると、WeChat 開発者ツールによって自動的に生成された Hello World アプレットが表示されます。
この記事の次のステップでは、WeChat アプレットのビュー設計の原則を紹介します。
ステップ 2: WeChat アプレットのビュー デザイン
この記事では、アプレットのビュー デザインに焦点を当てます。これは、下の図に示す pages/index ディレクトリにある index.wxml ファイルです。
フロントエンドの開発には SAP UI5 というフロントエンド フレームワークを使用するのが私の日常業務ですが、たまたま SAP UI5 フレームワークは、WeChat の wxml に非常によく似た xml 形式のビュー (UI) の作成もサポートしています。アプレット。
JSP 開発を行った友人は、wxml を JSP ファイルと比較できます。
wxml ソース コード:
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{
{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{
{motto}}</text>
</view>
</view>
コードの各行について、以下で 1 つずつ説明します。
2 行目: <view class="container"> はビュー要素を宣言します, css 型はコンテナーです. このコンテナー クラスは WeChat アプレットに付属しています. 削除するとアプレットのビュー位置が変わります.以下の私のテスト：
したがって、予約する必要があります。
3 行目: <view class="userinfo"> view 要素はネストできます。これは、ネイティブ HTML の div 要素に相当します。別のビュー要素がここで定義されています, css クラスは userinfo です. この css クラスは WeChat によって提供されていません, しかし、私たち自身によって開発されました. それはファイル index.wxss にあります:
4 行目:
<button wx:if="{ {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> アバターのニックネームを取得</button>
ボタンは Get Avatar Nickname というラベルで定義されます。
このボタンは、式 !hasUserInfo && canIUse が true の場合にのみ表示されます。
ボタンは WeChat アプレット フレームワークによって提供されるコンポーネントであり、コンポーネントはビュー レイヤーの基本単位であり、いくつかの機能と WeChat スタイルのスタイルを備えています。ここでのボタン タグは、ネイティブの HTML タグではないことに注意してください。
コンポーネントの API は、WeChat 開発者の公式 Web サイトで照会できます。
次の 2 つのプロパティの意味:
open-type="getUserInfo": このボタンをクリックすると、ボタンをクリックした現在の WeChat ユーザーの詳細データが自動的に取得されます。
bindgetuserinfo="jerry_getUserInfo": ユーザー データが正常に取得されたら、アプレット index/index.js で定義されている独自に開発されたコールバック関数 jerry_getUserInfo を実行します。
5 行目から 8 行目:
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
</block>
ここでは、イメージとテキストの 2 つの UI 要素で構成されるブロック領域が定義されています。
image 要素の bindtap="bindViewTap" は、クリックされると、index.js に実装されているイベント ハンドラー関数 bindViewTap を実行することを意味します。
class="userinfo-avatar": userinfo-avatar も wxss のカスタム css クラスです。
src="{
{userInfo.avatarUrl}}": 画像の src 属性は、データ モデル userInfo のフィールド avatarUrl にバインドされます。データ型 userInfo は index.js で作成され、現在のビューにバインドされます。
また、別のテキスト要素 text によって表示されるテキストは、userInfo.nickName にバインドされます。
携帯電話で WeChat アプレットのコンソール ページを直接開いて、現在のビューにバインドされたデータ モデル userInfo の詳細を表示できます。ここで、userInfo.nickName には次の値が含まれています。
ここでは、イメージとテキストの 2 つの UI 要素で構成されるブロック領域が定義されています。
image 要素の bindtap="bindViewTap" は、クリックされると、index.js に実装されているイベント ハンドラー関数 bindViewTap を実行することを意味します。
class="userinfo-avatar": userinfo-avatar も wxss のカスタム css クラスです。
src="{
{userInfo.avatarUrl}}": 画像の src 属性は、データ モデル userInfo のフィールド avatarUrl にバインドされます。データ型 userInfo は index.js で作成され、現在のビューにバインドされます。
また、別のテキスト要素 text によって表示されるテキストは、userInfo.nickName にバインドされます。
携帯電話で WeChat アプレットのコンソール ページを直接開いて、現在のビューにバインドされたデータ モデル userInfo の詳細を表示できます。ここで、userInfo.nickName には次の値が含まれています。
このチュートリアルの後続記事では、WeChat アプレット プロジェクトの index.js 内のコードの意味を説明します。