資訊專(zhuān)欄INFORMATION COLUMN
摘要：上一篇教程談了些和微信小程序開(kāi)發(fā)本身無(wú)關(guān)的技術(shù)問(wèn)題，現(xiàn)在回到主題。這邊教程主要對(duì)默認(rèn)生成的頁(yè)面進(jìn)行講解。而的顯示則是由屬性直接指定。在該例子中，當(dāng)用戶點(diǎn)擊用戶頭像和昵稱(chēng)的視圖區(qū)域時(shí)，程序便會(huì)顯示頁(yè)面。
上一篇教程談了些和微信小程序開(kāi)發(fā)本身無(wú)關(guān)的技術(shù)問(wèn)題，現(xiàn)在回到主題。
這邊教程主要對(duì)默認(rèn)生成的index 頁(yè)面進(jìn)行講解。在之前的教程中有寫(xiě)道，每一個(gè)頁(yè)面都包含.js(處理邏輯)，.wxml(描述頁(yè)面內(nèi)容)，.wxss(配置頁(yè)面樣式)三個(gè)文件，index 頁(yè)面也是如此。
講解之前先上圖
index頁(yè)面的內(nèi)容不多，只有一個(gè)用戶頭像，用戶姓名，和一個(gè)"Hello World"，首先來(lái)看看index.wxml的內(nèi)容
{{userInfo.nickName}} {{motto}}
該頁(yè)面的層級(jí)結(jié)構(gòu)比較簡(jiǎn)單，三個(gè)view標(biāo)簽，一個(gè)image以及兩個(gè)text標(biāo)簽，其中view為容器標(biāo)簽，image用來(lái)顯示用戶頭像，第一個(gè)text用來(lái)顯示用戶昵稱(chēng)，第二個(gè)text則是"Hello World"
可以看到頁(yè)面描述文件中綁定了幾個(gè)變量，分別是第二個(gè)view標(biāo)簽的 bindtap="bindViewTap"，image標(biāo)簽的src="{{userInfo.avatarUrl}} 以及兩個(gè)text標(biāo)簽的內(nèi)容文本。那么這些變量定義在哪里呢，答案就在index.js中
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
motto: "Hello World",
userInfo: {}
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: "../logs/logs"
})
},
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.js代碼定義了Page對(duì)象，該對(duì)象中定義了index.wxml綁定的變量，其中onLoad方法會(huì)在頁(yè)面加載時(shí)被調(diào)用，該方法會(huì)調(diào)用app對(duì)象的getUserInfo方法來(lái)獲取用戶信息并賦值給userInfo屬性，這樣界面就可以顯示用戶頭像和昵稱(chēng)了。而"Hello World"的顯示則是由motto屬性直接指定。
Page對(duì)象還定義了bindViewTap方法，該方法通過(guò)調(diào)用wx.navigateTo導(dǎo)航到logs頁(yè)面。關(guān)于頁(yè)面導(dǎo)航的更多內(nèi)容將在后面的教程中講解。在該例子中，當(dāng)用戶點(diǎn)擊用戶頭像和昵稱(chēng)的視圖區(qū)域時(shí)，程序便會(huì)顯示logs頁(yè)面。
最后簡(jiǎn)單看下index.wxss
/**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.wxml中使用到的樣式選擇器，這部分比簡(jiǎn)單，在這里就不多做解釋了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/81009.html
摘要：到此為止，默認(rèn)生成程序的解析部分就結(jié)束了。這個(gè)解析過(guò)程是為了對(duì)微信小程序有個(gè)總體上的理解，所以很多地方并沒(méi)有深入。在后面的教程中，我會(huì)繼續(xù)講解微信小程序開(kāi)發(fā)的各個(gè)方面。 上一篇教程中對(duì)index頁(yè)面進(jìn)行了解析，這一篇來(lái)解析下logs頁(yè)面 老規(guī)矩先上圖 showImg(https://segmentfault.com/img/remote/1460000007613022?w=378&h...
摘要：微信小程序框架提供了一系列來(lái)幫助我們進(jìn)行本地?cái)?shù)據(jù)存儲(chǔ)，上面的代碼中使用到了和兩個(gè)更多相關(guān)可以參考這里方法很容易理解，會(huì)執(zhí)行獲取用戶信息的功能。 上一篇教程中寫(xiě)道，開(kāi)發(fā)工具會(huì)生成一個(gè)默認(rèn)的程序框架，其中程序的主流程代碼包含在app.js中。默認(rèn)實(shí)現(xiàn)中，該部分功能比較簡(jiǎn)單，不過(guò)對(duì)于學(xué)研究小程序開(kāi)發(fā)還是比較有價(jià)值的。 由于代碼行數(shù)不多，下面一次性貼出來(lái)后進(jìn)行講解 //app.js App({...
摘要：在新建一個(gè)項(xiàng)目后，微信小程序會(huì)生成一個(gè)默認(rèn)的程序框架，后續(xù)程序的開(kāi)發(fā)工作都在這個(gè)框架上進(jìn)行。微信小程序的開(kāi)發(fā)模式確實(shí)和開(kāi)發(fā)很相似。通常一個(gè)完整的微信小程序包含上面兩部分，當(dāng)然我們也可以定義自己的目錄用于存放公共代碼和程序需要的其它文件。 在上一篇教程的最后，我們生成了一個(gè)類(lèi)似Hello World的小程序，這個(gè)過(guò)程中沒(méi)有編寫(xiě)任何一行代碼。在新建一個(gè)項(xiàng)目后，微信小程序會(huì)生成一個(gè)默認(rèn)的程序...
摘要：在之前的教程中寫(xiě)到，微信小程序框架將程序分為邏輯層文件和視圖層文件。關(guān)于數(shù)據(jù)綁定的更多講述，敬請(qǐng)期待微信小程序開(kāi)發(fā)教程基礎(chǔ)篇數(shù)據(jù)綁定下 在之前的教程中寫(xiě)到，微信小程序框架將程序分為邏輯層(.js文件)和視圖層(.wxml文件)。這是一種常見(jiàn)的UI和邏輯分離的程序設(shè)計(jì)方式，開(kāi)發(fā)出來(lái)的程序更加靈活，易擴(kuò)展。 這種程序設(shè)計(jì)方式通常要解決兩個(gè)問(wèn)題: UI層響應(yīng)邏輯層邏輯和數(shù)據(jù)的變化UI層將用戶...
閱讀 961·2021-10-27 14:19
閱讀 1186·2021-10-15 09:42
閱讀 1617·2021-09-14 18:02
閱讀 802·2019-08-30 13:09
閱讀 3046·2019-08-29 15:08
閱讀 2158·2019-08-28 18:05
閱讀 1010·2019-08-26 10:25
閱讀 2853·2019-08-23 16:28
