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

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. ミニ プログラムの例の作成

1.

? 
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('App Launch')
 },
 onShow: function () {
  console.log('App Show')
 },
 onHide: function () {
  console.log('App Hide')
 },
 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:'小程序',
  desc:'Hello World!'
 }
})

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 アプレットをより良く開発できることを願っています。

関連する推奨事項:

最も完全な WeChat アプレット プロジェクトの例

WeChat アプレットの知識の紹介

WeChat アプレットで共有変数値を実現する方法の紹介

以上がWeChatミニプログラム開発の導入例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。