創(chuàng)建第一個應(yīng)用
22530D90-263A-438F-A908-5515F8277ADE.png
注意 AppID 目前個人無法申請,使用企業(yè)賬號可以申請,我們就選擇"無AppID"
3E07AFC1-E434-43C3-90F4-C96C3E2B23B5.png
- 單擊添加項目即可完成工程的創(chuàng)建
AC69BE4C-C12D-48A4-B95F-0C248FEB015A.png
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>
寫法基本和web 頁面的寫法相同,稍微有一些區(qū)別
比如
1 .src="{{userInfo.avatarUrl}}" 要使用{{}} 把數(shù)據(jù)包起來 有人會問userInfo.avatarUrl 哪里來的？ 他是定義在xx.js 文件中的數(shù)據(jù)
2 .bindtap="bindViewTap" 給視圖綁定一個單擊事件 "bindViewTap" 當(dāng)用戶單機(jī)頁面時就會觸發(fā)這個函數(shù),這個函數(shù)是寫在 xx.js 文件中的
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;
}
xx.js 文件 頁面數(shù)據(jù)存放和函數(shù)處理都在這個文件中
// 獲取全局app 實例
var app = getApp()
Page({
// 定義界面上需要的數(shù)據(jù)
data: {
motto: 'Hello World',
userInfo: {}
},
//視圖點(diǎn)擊事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
// 界面加載的時候觸發(fā)這個函數(shù)
onLoad: function () {
// js 日志輸出
console.log('onLoad')
// 引用當(dāng)前頁面
var that = this
//調(diào)用應(yīng)用實例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
app.js文件的作用,相當(dāng)于iOS開發(fā)appdelegate文件一樣
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
// 定義一個全局函數(shù),在其他頁面的js文件中可以訪問的到
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
// 定義全局變量,在其他的頁面js文件中可以訪問的到
globalData:{
userInfo:null
}
})
** app.json 配置全局屬性 **
{
// 把包含的頁面都放在這里,第一個是默認(rèn)啟動后的頁面
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"black",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.wxss全局訪問的樣式
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
