コードを書きます

小さなプログラムインスタンスを作成します

開発者ツールの左側(cè)のナビゲーションにある「編集」をクリックします。このプロジェクトが初期化されており、いくつかの簡単なコードファイルが含まれていることがわかります。最も重要で不可欠なものは、app.js、app.json、および app.wxss です。このうち、.js サフィックスはスクリプト ファイル、.json サフィックスは設(shè)定ファイル、.wxss サフィックスはスタイル シート ファイルです。 WeChat アプレットはこれらのファイルを読み取り、アプレット インスタンスを生成します。

変更を容易にし、獨自の WeChat アプレットを最初から開発できるように、これら 3 つのファイルの機能を簡単に理解しましょう。

app.jsはミニプログラムのスクリプトコードです。アプレットのライフサイクル関數(shù)を監(jiān)視および処理し、このファイルでグローバル変數(shù)を宣言できます。この例では、ローカル データの同期ストレージや同期読み取りなど、フレームワークによって提供される豊富な API を呼び出します。利用可能な API の詳細については、API ドキュメントを參照してください

//app.js
App({
 onLaunch: function () {
 //調(diào)用API從本地緩存中獲取數(shù)據(jù)
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
 },
 getUserInfo:function(cb){
 var that = this;
 if(this.globalData.userInfo){
  typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
  //調(diào)用登錄接口
  wx.login({
  success: function () {
   wx.getUserInfo({
   success: function (res) {
    that.globalData.userInfo = res.userInfo;
    typeof cb == "function" && cb(that.globalData.userInfo)
   }
   })
  }
  });
 }
 },
 globalData:{
 userInfo:null
 }
})

app.json はアプレット全體のグローバル構(gòu)成です。このファイルでは、ミニ プログラムを構(gòu)成するページの構(gòu)成、ミニ プログラムのウィンドウの背景色の構(gòu)成、ナビゲーション バーのスタイルの構(gòu)成、およびデフォルトのタイトルの構(gòu)成を行うことができます。このファイルにはコメントを追加できないことに注意してください。その他の設(shè)定可能な項目については、設(shè)定の詳細を參照してください

{
 "pages":[
 "pages/index/index",
 "pages/logs/logs"
 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "WeChat",
 "navigationBarTextStyle":"black"
 }
}

app.wxssはアプレット全體の共通スタイルシートです。 app.wxss で宣言されたスタイル ルールをページ コンポーネントの class 屬性で直接使用できます。

/**app.wxss**/
.container {
 height: 100%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 200rpx 0;
 box-sizing: border-box;
}

ページの作成

このチュートリアルには、インデックス ページとログ ページの 2 つのページがあります。つまり、ウェルカム ページとアプレット起動ログの表示ページです。両方ともページディレクトリ。 WeChat ミニ プログラムの各ページの [パス + ページ名] は app.json のページ內(nèi)に記述する必要があり、ページ內(nèi)の最初のページがミニ プログラムのホームページになります。
各ミニ プログラム ページは、同じパスにある同じ名前の 4 つの異なるサフィックス ファイル (index.js、index.wxml、index.wxss、index.json など) で構(gòu)成されます。接尾辭 .js の付いたファイルはスクリプト ファイル、接尾辭 .json の付いたファイルは構(gòu)成ファイル、接尾辭 .wxss の付いたファイルはスタイル シート ファイル、接尾辭 .wxml の付いたファイルはページ構(gòu)造ファイルです。

index.wxml はページの構(gòu)造ファイルです:

<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
 <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
 <view class="usermotto">
 <text class="user-motto">{{motto}}</text>
 </view>
</view>

この例では、、、 がビルドに使用されます。ページ構(gòu)造とバインディングデータとインタラクション処理関數(shù)。

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

//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
 data: {
 motto: 'Hello World',
 userInfo: {}
 },
 //事件處理函數(shù)
 bindViewTap: function() {
 wx.navigateTo({
  url: '../logs/logs'
 })
 },
 onLoad: function () {
 console.log('onLoad')
 var that = this
 //調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)
 app.getUserInfo(function(userInfo){
  //更新數(shù)據(jù)
  that.setData({
  userInfo:userInfo
  })
 })
 }
})
 index.wxss 是頁面的樣式表：
/**index.wxss**/
.userinfo {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.userinfo-avatar {
 width: 128rpx;
 height: 128rpx;
 margin: 20rpx;
 border-radius: 50%;
}

.userinfo-nickname {
 color: #aaa;
}

.usermotto {
 margin-top: 200px;
}

ページのスタイルシートはオプションです。ページ スタイル シートがある場合、ページのスタイル シートのスタイル ルールは app.wxss のスタイル ルールにカスケードされます。ページのスタイル シートを指定しない場合は、ページの構(gòu)造ファイルの app.wxss で指定されたスタイル ルールを直接使用することもできます。

index.jsonはページの設(shè)定ファイルです:

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

ログのページ構(gòu)造

<!--logs.wxml-->
<view class="container log-list">
 <block wx:for-items="{{logs}}" wx:for-item="log">
 <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
</view>

ログ ページは、 制御タグを使用してコードを整理し、 で wx:for-items を使用します。ログ データをバインドし、ループ內(nèi)のノードにログ データを展開します。

//logs.js
var util = require('../../utils/util.js')
Page({
 data: {
 logs: []
 },
 onLoad: function () {
 this.setData({
  logs: (wx.getStorageSync('logs') || []).map(function (log) {
  return util.formatTime(new Date(log))
  })
 })
 }
})

実行結(jié)果は以下の通りです:

4. モバイルプレビュー

開発者ツールの左側(cè)のメニューバーで「プロジェクト」を選択し、「プレビュー」をクリックします。コードをスキャンして、WeChat クライアントで體験してください。

上記はWeChatミニプログラム開発ガイドの情報をまとめたものです。今後も関連情報を追加していきますので、このサイトをよろしくお願いいたします。

WeChat ミニプログラム開発ガイドと関連記事の詳細な説明については、PHP 中國語 Web サイトに注目してください。