這篇文章主要介紹了微信小程式LOL 英雄介紹開發的相關資料,需要的朋友可以參考下
最近微信小程式炒得火熱,就跟成都的這個房價一樣.昨天我也嘗試了一下,做了一個自己的英雄列表.今天將自己的製作過程記錄於此.
1.下載微信開發者工具
官網鏈接:https://mp .weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下載完成之後預設安裝即可
# 2.新建專案
開啟微信開發者工具,(首次需要微信掃碼登入),如下圖所示,點選新增項目,然後依序輸入APPID,專案名稱,並選擇你的專案所在的目錄(本地目錄),如果沒有AppID,選擇無APPID即可(局部功能受限)
#S。
#不同不同外正在結構的程式碼結構如下的程式碼。
## 目錄解釋:pages這個資料夾放的是你的這個小程式所涉及到所有頁面.image資料夾放圖片.app.json是一個小程式的入口設定檔,一些全域設定都在這個檔案裡面.我們可以看到detail這個目錄下有四個檔案:
(1) detail.js是detail.wxml這個頁面涉及的js處理的檔案
(2) detail.json是detail.wxml的設定檔,例如我們可以設定導航條的標題
(3) detail.wxml是小程式索取展示的頁面,UI的架子.
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"
}]
}
}登入後複製
windows是對小程式的導覽列的一些設定,如導覽標題,顏色等.
tabBar是小程式底部的導覽按鈕,根據自己的需求可以設定多個按鈕,並指定對應的路徑,名稱.
3.2 app.js檔案
app.js裡面裝著一些全域函數,全域變數等
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
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{
//调用登录接口
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,採用雙花括號的方法,花括號內部即變數,在detail.wxml檔案中形如{{name}},設定變數name的值需要在對應的detail.js檔案中進行設定.
Page({
data: {
hero:heros.getInfoById(app.globalData.userId),<br> name:'Ricky',<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> }
})
單一頁面上要動態設定變數,要透過this.setData({})方法
3.4 綁定事件
#wxml中的事件綁定採用bind+方法名稱
自訂屬性採用data-屬性名稱的形式,要去到這個自訂屬性,可以透過tapName方法中的event物件取得
3.5 清單渲染
小程式中的列表渲染採用wx:for="{{items}}"的方法,每一次循環items這個變數,會產生一個item物件,可以透過item.name取得每一次循環中的name屬性
3.6 導覽
#####小程式裡面的頁面跳轉可以使用:#############wx.navigateTo({
url: '../detail/detail'
})Finally, let me show you the screenshot of my mini program~
以上是微信小程式開發LOL英雄實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
