微信小程式 quick start專案解析
阿新 • • 發佈:2018-11-27
很有意思的是微信自己的語言竟然是抄襲,wxml相當於html,把ht換成了wx ,wxss相當於css,把c換成了wx而已。
pages是存放網頁的地方。
utils是微信小程式的js工具類
app.js是小程式的指令碼程式碼
app.json是小程式配置檔案
app.wxss是小程式樣式表
//app.js App({ onLaunch: function () { //呼叫API從本地快取中獲取資料 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) //將logs儲存到快取中 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呼叫app的globalData,globalData是被事先聲明瞭的 that.globalData.userInfo = res.userInfo; //TODO 後續補充這個,目前不是很懂下面程式碼 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"
}
}
pages 聲明瞭所有介面的路徑。
window 配置了所有頁面的特徵和標題等。
/**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,大體能瞭解樣式的含義。
index.wxml 是頁面的結構檔案:
<!--index.wxml 頁面註釋是這種註釋--> <!--class是引用的app.wxss中的定義樣式--> <view class="container"> <!--bindtap繫結一個動作:bindViewTap,bindViewTap在index.js中定義--> <view bindtap="bindViewTap" class="userinfo"> <!--src="{{userInfo.avatarUrl}}" 這種寫法是在index.js 中userInfo json物件中獲取的--> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <!--{{motto}} 也是在index.js中data中的motto獲得--> <text class="user-motto">{{motto}}</text> </view> </view>
logs.wxml 頁面結構:
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
裡面有個for迴圈,這個迴圈的物件是logs,迴圈的專案是log,資料從logs.js獲得。
//logs.js
//引用js用require引用外部js
var util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
//設定資料用setData
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
下面介紹下頁面中js的結構
//logs.js
var util = require('../../utils/util.js')
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log1) {
return util.formatTime(new Date(log1))+"-------------"
})
})
}
})
page注意大寫,標準寫法是Pag({
//裡面寫data,表示資料,資料格式是json
//,號後面可以跟方法onLoad是系統方法,表示頁面載入後呼叫。
//this是框架自己,setData表示設定資料,設定資料也是json賦值。
})
待續。。。