界面開發(fā)
-
使用自己的AppID在開發(fā)者工具中創(chuàng)建一個(gè)項(xiàng)目
image.png
???<small>如果不打算上線，只是純粹練練手，可以選擇無AppID</small>
-
開發(fā)者工具界面介紹
設(shè)備選擇區(qū)：可以選擇各種設(shè)備展示樣式
image.png
Console：和瀏覽器上的命令終端一樣，可以在此輸入代碼查看結(jié)果
image.png
Sources：和瀏覽器的sources一樣，顯示項(xiàng)目文件
image.png
Network：與瀏覽器一致，可以在此查看網(wǎng)絡(luò)請(qǐng)求的結(jié)果
image.png
Storage：可以將一些數(shù)據(jù)存在這里
image.png
AppData:直觀展示了程序運(yùn)行中各數(shù)據(jù)的值
image.png
Wxml：即當(dāng)前頁面的html
image.png -
編寫代碼
點(diǎn)擊開發(fā)者工具左側(cè)的“編輯”按鈕，我們就可以看到整個(gè)項(xiàng)目的代碼，其中的框架已經(jīng)自動(dòng)生成了。最主要的文件就是app.js、app.json、app.wxss。如果不習(xí)慣微信開發(fā)者工具的編輯器，可以用其他編輯器打開本地文件進(jìn)行編輯，然后在開發(fā)者工具看運(yùn)行查看效果。
app.json：項(xiàng)目的配置文件
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/userMeta/user",
"pages/update/update"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
<small>pages中配置所有頁面的路徑
windows中配置的是窗口的樣式</small>
app.wxml：全局樣式文件，類似于css
/app.wxss/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
<small>每個(gè)頁面都可以單獨(dú)創(chuàng)建樣式文件，這些樣式文件的作用范圍只針對(duì)于它們的同名js文件</small>
app.js：全局的js代碼，包括一些生命周期
//app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
onShow: function () {
console.log("App生命周期函數(shù)——onShow函數(shù)");
},
onHide: function () {
console.log("App生命周期函數(shù)——onHide函數(shù)");
},
onError: function (msg) {
console.log("App生命周期函數(shù)——onError函數(shù)");
}
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)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
<small>
onLaunch：當(dāng)小程序初始化完成時(shí)觸發(fā)
onShow：當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)是觸發(fā)
onHide：當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)觸發(fā)
onError：當(dāng)小程序發(fā)生腳本錯(cuò)誤，或api調(diào)用錯(cuò)誤時(shí)觸發(fā)
getUserInfo：自定義的一些函數(shù)，可以被調(diào)用
globalData：用于存儲(chǔ)數(shù)據(jù)的對(duì)象
</small>
其他頁面：寫法與全局文件類似，都可以有json文件、js文件和Wxml文件，下面是index頁面代碼展示
index.js
//index.js
//獲取應(yīng)用實(shí)例
import service from '../../services/service';
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
inputValue: null
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
bindKeyInput: function(e) {
this.setData({
inputValue: e.detail.value
})
},
submit: function() {
wx.navigateTo({
url: '../userMeta/user?id=' + this.data.inputValue
})
},
updateClick: function() {
wx.navigateTo({
url: '../update/update'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
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 class="search">
<input placeholder="請(qǐng)輸入用戶id" bindinput="bindKeyInput" />
<button class="button" bindtap="submit">搜索</button>
</view>
<view class="change">
<button class="add">添加用戶信息</button>
<button class="update" bindtap="updateClick">更新用戶信息</button>
</view>
</view>
index.wxml
/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; } .search { margin: 1rem; } .search input { width:70%; float:left; height:2rem; line-height:2rem; background-color:#999999; } .search .button { width: 27%; float: right; height: 100%; line-height: 2rem; }
