微信小程式學習筆記(2)----HelloWorld分析
寫在前面
IDE結構
上圖是微信開發工具自動生成的一個HelloWorld,微信小程式的開發、除錯都在這個工具中完成,相比於eclipse、Idea之類的Idea,小程式顯示功能比較少,沒多少選單。
編輯
編輯選單中是存放程式碼的,可以建立檔案及資料夾、編輯程式碼,還有程式碼提示功能雖然不是很強大。值得注意的是修改程式碼後,檔案上會有一個綠色小點,儲存後會消失,修改程式碼需要編譯後才能生效。
除錯
除錯選單主要是檢視程式碼執行效果,微信小程式應該只能在微信和這個開發工具中運行了。這個除錯視窗功能和chrome的除錯窗有點區別,Console、Soruce、Network都和chrome的大體一樣,
Storage用於顯示當前專案的使用 wx.setStorage 或者 wx.setStorageSync 後的資料儲存情況。
Appdata 用於顯示當前專案當前時刻 appdata 具體資料,實時地反饋專案資料情況,可以在此處編輯資料,並及時地反饋到介面上。
Wxml這個和Chrome的Elemnets功能比較相似,可以看到頁面的HTML結果和CSS樣式,Chrome中的事件、盒子模型和其它都是沒有的
專案
這個要是使用者釋出小程式和真機預覽用的,可惜賬號沒有許可權,無法真實體驗一下
程式碼結構
app.wxss
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
這個app.wxss可以看到是全域性的css檔案,在這個檔案個定義的css樣式,其它所有頁面都可以使用
app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
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
}
})
utils/util.js
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
util.js是自動生成的時間格式化工具在其它頁面可以通過
var util = require('../../utils/util.js')
引用
index.wxml index.js index.wxss
<!--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.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;
}
//index.js
//獲取應用例項
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函式
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//呼叫應用例項的方法獲取全域性資料
app.getUserInfo(function(userInfo){
//更新資料
that.setData({
userInfo:userInfo
})
})
}
})
index.wxml可看作是一個頁面的檢視檔案,可以看作是HTML檔案
index.wxss 可以看作是頁面的樣式檔案,可以看作是css檔案
index.js 可以看到是頁面的生命週期檔案,主要是頁面生命週期、事件回撥、業務處理等
值得注意
index.wxss和index.js 在index.wxml中不需要手動匯入,通過檔名匹配,所以在建立檔案時應儘量按個規則來
logs
這個目錄下的和index下的一樣的結果,只不過是顯示日誌檔案,可以刪除的