WeChat アプレット開発 LOL ヒーローのサンプルコード-ミニプログラム開発-php.cn

WeChat アプレット開発 LOL ヒーローのサンプルコード

高洛峰

リリース： 2017-03-19 17:48:48

オリジナル

2575 人が閲覧しました

この記事は主にWeChatミニプログラムの開発に関する関連情報を紹介しますLOLヒーローの紹介を必要とする友人はそれを参照してください

WeChatミニプログラムは、成都の住宅価格と同様に、最近非常に人気があります。 it 昨日、私は自分のヒーローのリストを作成しました。今日は私の制作プロセスをここに記録します

1. WeChat 開発者ツールをダウンロードします

公式ウェブサイトのリンク: https://mp.weixin.qq.com/debug /wxadoc/dev/devtools /download.html?t=1475052055364、ダウンロードが完了すると、デフォルトでインストールできます

2. 新しいプロジェクトを作成します

WeChat 開発者ツールを開きます (WeChat コードをスキャンする必要があります)初めてログインする場合)、下の図に示すように、[プロジェクトの追加] をクリックし、手順に従います。APPID、プロジェクト名を入力し、プロジェクトが存在するディレクトリ (ローカルディレクトリがない場合) を選択します。 AppID、APPID なしを選択します (一部の機能は制限されています)

プロジェクトの構造は次のとおりです: WeChat アプレット開発 LOL ヒーローのサンプルコード

WeChat アプレット開発 LOL ヒーローのサンプルコード

ディレクトリの説明: イメージフォルダーには、ミニプログラムに含まれるすべてのページが含まれています。はミニプログラムのエントリ設定ファイルで、一部のグローバル設定です。設定はすべてこのファイルにあります。

detail ディレクトリに 4 つのファイルがあることがわかります:

(1) 詳細.js は、詳細.wxml ページ

WeChat アプレット開発 LOL ヒーローのサンプルコード (2) 詳細.json は、detail.wxml の設定ファイルです。たとえば、ナビゲーションバーのタイトルを設定できます

(3) 詳細.wxml は、ミニプログラム、UIのシェルフです

(4)detail.wxssはdetail.wxmlの内容ですcssファイルと同様のスタイルファイルです

3.1 次に、app.jsonファイルを見てみましょう:

{
 "pages":[
  "pages/index/index",
  "pages/logs/logs",
  "pages/detail/detail",
  "pages/notice/notice",
  "pages/noticedetail/noticedetail"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "英雄角色",
  "navigationBarTextStyle":"black",
  "backgroundColor": "#fbf9fe"
 },
 "tabBar": {
  "color": "#333",
  "selectedColor": "#3cc51f",
  "borderStyle": "#cccccc",
  "backgroundColor": "#ffffff",
  "list": [{
   "pagePath": "pages/index/index",
   "text": "英雄列表",
   "iconPath": "image/list_normal.png",
   "selectedIconPath": "image/list.png"
  }, {
   "pagePath": "pages/notice/notice",
   "text": "版本公告",
   "iconPath": "image/hot_normal.png",
   "selectedIconPath": "image/hot.png"
  }]
 }
}

ログイン後にコピー

ページは、ファイルサフィックスを指定する必要がないことに注意してください。指定されたwxss、js、またはjsonを参照する必要はありません。アプレットは、関連する filename.wxml、filename.wxss、filename.js、および filename.json ファイルと自動的に一致するため、これらのファイル名に一貫性を持たせる必要があります。ナビゲーションタイトル、色などのミニプログラムのナビゲーションバー用です。

tabBar は、ミニプログラムの下部にあるナビゲーションボタンです。必要に応じて複数のボタンを設定し、対応するパス、名前を指定できます。 .

3.2 app.js ファイル

app.js には、いくつかのグローバル関数、グローバル変数などが含まれています

//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,
  userId:null
 }
})

ログイン後にコピー

globalData オブジェクトにいくつかのグローバル変数を入れます。ページパラメータを渡すには、これを使用する必要があります。

このグローバル変数を別のページで操作したい場合は、次の操作を行う必要があります:

var app=getApp();

app.globalData.userId= 12"

このようにしてグローバル変数を操作することができます。

3.3 データバインディング

アプレット内のデータバインディングは、angularやvueと同様に二重中括弧の方法を使用します。中括弧の内側が変数です。たとえば、{{name}} の場合、変数名の値を動的に設定するには、対応するdetail.js ファイルに設定する必要があります。単一ページの変数は this.setData({}) メソッドを渡します

3.4 イベントのバインディング

wxml のイベントバインディングは、bind+メソッド名を使用します

Click me! < ;/view>

カスタム属性はデータ属性名の形式をとります。このカスタム属性を取得するには、tapName のイベントオブジェクトを通じて取得できます。メソッド

3.5 リストレンダリング

アプレット内のリストレンダリングでは、items 変数がループされるたびに、それぞれの item オブジェクトが生成されます。ループは item.name

3.6 ナビゲーション

アプレットでページジャンプを使用できます:

Page({
  data: {
    hero:heros.getInfoById(app.globalData.userId),<br>　　　　 name:&#39;Ricky&#39;,<br>　　　　 items:[{"id":1,"name":"name1"},{"id":2,"name":"name2"}]
  },
  onLoad:function () {
    this.setData({
      hero:heros.getInfoById(app.globalData.userId)
    })
  },<br>　　tapName:function(event){<br>　　　　console.log(event)<br>　　}
})

ログイン後にコピー

公式の規制では、最大5レベルのページジャンプが許可されています

最後に、私のミニプログラムのスクリーンショットをお見せしましょう~

WeChat アプレット開発 LOL ヒーローのサンプルコード