WeChatミニプログラム開発の導入例-WeChatの開発-php.cn

WeChatミニプログラム開発の導入例

小云云

リリース： 2017-11-16 15:43:53

オリジナル

5337 人が閲覧しました

WeChat は私たちの生活にますます近づいており、一部の開発者は継続的に WeChat ミニプログラムを開発しています。どうやって始めるのか？次に、WeChat ミニプログラムを例として、WeChat ミニプログラムの入門レベルの使用法を簡単に紹介します。

1. ミニプログラムアカウントを登録します

1. WeChat パブリックプラットフォーム (https://mp.weixin) にアクセスします。 .qq.com/) にアクセスし、ミニプログラムのアカウントを登録し、指示に従って対応する情報を入力します。

2. 登録が完了したら、ホームページにアクセスし、[ミニプログラムの開発] に進みます。

3. AppID を取得し、後でプロジェクトを作成するときに使用します。管理者以外の WeChat アカウントを使用して携帯電話でミニプログラムを実行する場合は、「開発者のバインド」も操作する必要があります。つまり、「ユーザー ID」-「開発者」モジュールで、使用する必要がある WeChat アカウントをバインドします。このチュートリアルでは、デフォルトで管理者の WeChat アカウントを使用します

開発者が簡単かつ効率的に開発できるように、WeChat ミニプログラムは開発とデバッグを統合する新しい開発者ツールをリリースしました。コード編集およびプログラムリリース機能

1. ダウンロードページ: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

システムに従って、ダウンロードする対応するツールのバージョン

2. ツールには編集が含まれており、デバッグとプロジェクト用の 3 ページのカード:

(1) 編集領域では、コードの作成、現在のプロジェクトのファイルの追加、削除、名前変更などの基本的な操作を実行できます。

(2) プログラムのデバッグには 3 つの主要な機能領域があります: シミュレーション

(3) プロジェクトページカードには 3 つの主な機能があります: 現在のプロジェクトの詳細の表示、プレビューの送信、アップロードとプロジェクト構成の送信

注:ツールを起動すると、開発者は QR コードをスキャンして、正常にバインドされた WeChat ID でログインする必要があります。

3. ミニプログラムの例の作成

? 
test
 ├─ page
 │ └─ index
 │  ├─ index.js
 │  ├─ index.json
 │  ├─ index.wxml
 │  └─ index.wxss
 ├─ app.js
 ├─ app.json
 └─ app.wxss

ログイン後にコピー

2. ファイルの説明とソースコードの例

小さなプログラムにはアプリ（本体）と複数のページ（ページ）が含まれています

(1) アプリはプログラム全体を記述するために使用され、3 つのファイルで構成されます。 .js 接尾辞はスクリプトファイル、.json 接尾辞は設定ファイル、.wxss 接尾辞はスタイルシートファイルであり、プロジェクトのルートディレクトリに配置する必要があります

。

app.js はミニプログラムのスクリプトコードです（必須）。このファイルでミニプログラムの周期関数やグローバル変数の宣言、フレームワークが提供する豊富な API の呼び出しを実行できます。

app.json はアプレット全体のグローバル構成 (必須) で、WeChat アプレットをグローバルに構成し、パフォーマンス、ネットワークタイムアウトの設定、複数のタブの設定などを決定するために使用されます。配列の各項目は文字列であり、ミニプログラムがどのページで構成されているかを指定します。 WeChat ミニプログラムの各ページの [パス + ページ名] を app.json のページに記述する必要があり、ページ内の最初のページがミニプログラムのホームページになります。

?
App({
 onLaunch: function () {
  console.log(&#39;App Launch&#39;)
 },
 onShow: function () {
  console.log(&#39;App Show&#39;)
 },
 onHide: function () {
  console.log(&#39;App Hide&#39;)
 },
 globalData: {
  hasLogin: false
 }
})

ログイン後にコピー

app.wxss は、ミニプログラム全体の共通のスタイルシートです (必須ではありません)。

{
 "pages":[
  "page/index/index"
 ],
 "window":{
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "欢迎页",
  "navigationBarBackgroundColor": "#fbf9fe",
  "backgroundColor": "#fbf9fe"
 },
 "debug": true
}

ログイン後にコピー

(2) ページは、ページを説明するために使用されます。ここでは、ホームページのインデックスを例として、各ミニプログラムページは、同じパスにある 4 つの異なるサフィックスファイルで構成されます。、index.js、index.wxml、index.wxss、index.json など。接尾辞 .js の付いたファイルはスクリプトファイル、接尾辞 .json の付いたファイルは構成ファイル、接尾辞 .wxss の付いたファイルはスタイルシートファイル、接尾辞 .wxml の付いたファイルはページ構造ファイルです。

index.js はページのスクリプトファイルです (必須)。このファイルでは、ページのライフサイクル関数の監視と処理、ミニプログラムインスタンスの取得、データの宣言と処理、ページインタラクションイベントへの応答を行うことができます。等

page {
 background-color: #fbf9fe;
 height: 100%;
}
.container {
 display: flex;
 flex-direction: column;
 min-height: 100%;
 justify-content: space-between;
}

ログイン後にコピー

index.wxml はページ構造ファイル (必須) です。

Page({
 data: {
  title:&#39;小程序&#39;,
  desc:&#39;Hello World!&#39;
 }
})

ログイン後にコピー

index.wxss はページスタイルシートファイルです (必須ではありません)。ページスタイルシートがある場合、ページのスタイルシートのスタイルルールは app.wxss のスタイルルールにカスケードされます。ページのスタイルシートを指定しない場合は、ページの構造ファイルの app.wxss で指定されたスタイルルールを直接使用することもできます。

<view class="container">
 <view class="header">
  <view class="title">标题：{{title}}</view>
  <view class="desc">描述：{{desc}}</view>
 </view>
</view>

ログイン後にコピー

index.json はページ構成ファイルです (必須ではありません)。ページ構成ファイルがある場合、ページ上の構成項目は app.json のウィンドウ内の同じ構成項目を上書きします。ページ構成ファイルが指定されていない場合は、app.json のデフォルト構成がページで直接使用されます。ここで指定する必要はありません。

ヒント:

a. 開発者が構成項目を減らしやすくするために、ミニプログラムでは、ページを記述する 4 つのファイルが同じパスとファイル名を持つ必要があると規定しています

b。独自のニーズに応じて選択できる API (https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715)

4. ミニプログラムのサンプルをテストします

1. WeChat Web 開発者ツールを選択し、「ローカルアプレットプロジェクト」を選択します。

2. ミニプログラムのAppIDとプロジェクト名を入力し、3番目の手順で書いたミニプログラムインスタンスフォルダーを選択し、「プロジェクトの追加」をクリックします。

3. 次のような効果が表示されたら、おめでとうございます。最初の小さなプログラムプロジェクトが正常に作成されました。左側のサイドバーの「編集」をクリックし、右側の編集ウィンドウでコードを直接変更し、保存 (CTRL+S) して更新 (F5) して有効にすることもできます。

4. 携帯電話でミニプログラムプロジェクトの効果を確認したい場合は、左側のサイドバーの「プロジェクト」をクリックし、「プレビュー」をクリックしてQRコードを生成し、WeChatを開いてスキャンすると確認できます。それ。

WeChatミニプログラム開発の導入例