WeChat ミニプログラム開発ガイド詳細説明-ミニプログラム開発-php.cn

WeChat ミニプログラム開発ガイド詳細説明

高洛峰

リリース： 2017-02-22 14:36:13

オリジナル

1760 人が閲覧しました

コードを書きます

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

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

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

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

//app.js
App({
 onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync(&#39;logs&#39;) || []
 logs.unshift(Date.now())
 wx.setStorageSync(&#39;logs&#39;, logs)
 },
 getUserInfo:function(cb){
 var that = this;
 if(this.globalData.userInfo){
  typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
  //调用登录接口
  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 はアプレット全体のグローバル構成です。このファイルでは、ミニプログラムを構成するページの構成、ミニプログラムのウィンドウの背景色の構成、ナビゲーションバーのスタイルの構成、およびデフォルトのタイトルの構成を行うことができます。このファイルにはコメントを追加できないことに注意してください。その他の設定可能な項目については、設定の詳細を参照してください

{
 "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 のページ内に記述する必要があり、ページ内の最初のページがミニプログラムのホームページになります。
各ミニプログラムページは、同じパスにある同じ名前の 4 つの異なるサフィックスファイル (index.js、index.wxml、index.wxss、index.json など) で構成されます。接尾辞 .js の付いたファイルはスクリプトファイル、接尾辞 .json の付いたファイルは構成ファイル、接尾辞 .wxss の付いたファイルはスタイルシートファイル、接尾辞 .wxml の付いたファイルはページ構造ファイルです。

index.wxml はページの構造ファイルです:

<!--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>

ログイン後にコピー

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

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

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
 motto: &#39;Hello World&#39;,
 userInfo: {}
 },
 //事件处理函数
 bindViewTap: function() {
 wx.navigateTo({
  url: &#39;../logs/logs&#39;
 })
 },
 onLoad: function () {
 console.log(&#39;onLoad&#39;)
 var that = this
 //调用应用实例的方法获取全局数据
 app.getUserInfo(function(userInfo){
  //更新数据
  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 のスタイルルールにカスケードされます。ページのスタイルシートを指定しない場合は、ページの構造ファイルの app.wxss で指定されたスタイルルールを直接使用することもできます。

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

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

ログのページ構造

<!--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 を使用します。ログデータをバインドし、ループ内のノードにログデータを展開します。

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

ログイン後にコピー

実行結果は以下の通りです:

4. モバイルプレビュー

微信小程序开发指南详解