資訊專(zhuān)欄INFORMATION COLUMN
摘要：到此為止，默認(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ī)矩先上圖
該頁(yè)面包含返回按鈕(用于返回index頁(yè)面)，頁(yè)面title和程序啟動(dòng)日志列表。
和index頁(yè)面相比，logs頁(yè)面多了一個(gè)logs.json文件，來(lái)配置頁(yè)面title的內(nèi)容
{
"navigationBarTitleText": "查看啟動(dòng)日志"
}
更多配置項(xiàng)可以參考配置 小程序
{{index + 1}}. {{log}}
在logs.wxml中，定義了三個(gè)標(biāo)簽，分別為view，block和text，其中view標(biāo)簽為容器，block用于綁定logs數(shù)組，而text標(biāo)簽用于顯示每一條log。wx:for和wx:for-item是小程序框提供的列表綁定語(yǔ)法，更多詳情請(qǐng)參考列表渲染
//logs.js
var util = require("../../utils/util.js")
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync("logs") || []).map(function (log) {
return util.formatTime(new Date(log))
})
})
}
})
logs.js定義了logs數(shù)組，并在onLoad方法中從本地緩存中獲取程序啟動(dòng)時(shí)間數(shù)據(jù)，之后調(diào)用數(shù)組的map方法來(lái)將時(shí)間格式化為字符串
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
最后仍然是logs.wxss，對(duì)頁(yè)面樣式進(jìn)行控制。
到此為止，默認(rèn)生成程序的解析部分就結(jié)束了。這個(gè)解析過(guò)程是為了對(duì)微信小程序有個(gè)總體上的理解，所以很多地方并沒(méi)有深入。在后面的教程中，我會(huì)繼續(xù)講解微信小程序開(kāi)發(fā)的各個(gè)方面。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81062.html
摘要：上一篇教程談了些和微信小程序開(kāi)發(fā)本身無(wú)關(guān)的技術(shù)問(wèn)題，現(xiàn)在回到主題。這邊教程主要對(duì)默認(rèn)生成的頁(yè)面進(jìn)行講解。而的顯示則是由屬性直接指定。在該例子中，當(dāng)用戶(hù)點(diǎn)擊用戶(hù)頭像和昵稱(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...
摘要：微信小程序框架提供了一系列來(lái)幫助我們進(jìn)行本地?cái)?shù)據(jù)存儲(chǔ)，上面的代碼中使用到了和兩個(gè)更多相關(guān)可以參考這里方法很容易理解，會(huì)執(zhí)行獲取用戶(hù)信息的功能。 上一篇教程中寫(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層將用戶(hù)...
閱讀 1575·2021-11-24 09:39
閱讀 1064·2021-11-22 15:11
閱讀 2220·2021-11-19 11:35
閱讀 1643·2021-09-13 10:37
閱讀 2482·2021-09-03 10:47
閱讀 2166·2021-08-30 09:47
閱讀 1644·2021-08-20 09:39
閱讀 2924·2019-08-30 14:13
