最近微信小程序炒得火熱,就跟成都的這個房價一樣.昨天我也嘗試了一下,做了一個自己的英雄列表.今天將自己的制作過程記錄於此.
1.下載微信開發者工具
官網鏈接:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下載完成之后默認安裝即可
2.新建項目
打開微信開發者工具,(首次需要微信掃碼登錄),如下圖所示,點擊添加項目,然后依次輸入APPID,項目名稱,並選擇你的項目所在的目錄(本地目錄),如果沒有AppID,選擇無APPID即可(部分功能受限)
3.編寫代碼
我的項目結構如下:
目錄解釋:pages這個文件夾放的是你的這個小程序所涉及到所有頁面.image文件夾放圖片.app.json是一個小程序的入口配置文件,一些全局設置都在這個文件里面.
我們可以看到detail這個目錄下有四個文件:
(1) detail.js是detail.wxml這個頁面涉及到的js處理的文件
(2) detail.json是detail.wxml的配置文件,比如我們可以設置導航條的標題
(3) detail.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"
}]
}
}
pages是整個小程序需要注冊的頁面,注意到不用指定文件后綴,我們也不用去位一個頁面引用指定的wxss,js,json文件.小程序會自動去匹配相關的 filename.wxml, filename.wxss, filename.js, filename.json文件,所以我們在命名這些文件的時候要保持文件名一致.
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),
name:'Ricky',
items:[{"id":1,"name":"name1"},{"id":2,"name":"name2"}]
},
onLoad:function () {
this.setData({
hero:heros.getInfoById(app.globalData.userId)
})
},
tapName:function(event){
console.log(event)
}
})
單個頁面上要動態設置變量,要通過this.setData({})方法
3.4 綁定事件
wxml中的事件綁定采用 bind+方法名
<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
自定義屬性采用 data-屬性名 的形式,要去到這個自定義屬性,可以通過tapName方法中的event對象獲取
3.5 列表渲染
小程序中的列表渲染采用wx:for="{{items}}"的方法,每一次循環items這個變量,會生成一個item對象,可以通過item.name獲取每一次循環中的name屬性
<view wx:for="{{items}}" class="listView" bindtap="showDetail" data-idIndex="{{index+1}}">
<view>{{item.name}}</view><view>{{item.id}}</view>
</view>
3.6 導航
小程序里面的頁面跳轉可以使用:
wx.navigateTo({
url: '../detail/detail'
})
官方規定跳轉最多5層頁面.
更多小程序的API信息請參考官方網站:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html?t=1475052046827
最后給大家看一下我的迷你小程序的截圖~
