微信小程序開發(fā)教程(基礎篇)6-logs頁面解析

shiguibiao 發(fā)布于2019-08-20 12:34 / 2829人閱讀

摘要：到此為止，默認生成程序的解析部分就結束了。這個解析過程是為了對微信小程序有個總體上的理解，所以很多地方并沒有深入。在后面的教程中，我會繼續(xù)講解微信小程序開發(fā)的各個方面。

上一篇教程中對index頁面進行了解析，這一篇來解析下logs頁面

老規(guī)矩先上圖

該頁面包含返回按鈕(用于返回index頁面)，頁面title和程序啟動日志列表。
和index頁面相比，logs頁面多了一個logs.json文件，來配置頁面title的內容

{
    "navigationBarTitleText": "查看啟動日志"
}

更多配置項可以參考配置小程序



  
    {{index + 1}}. {{log}}

在logs.wxml中，定義了三個標簽，分別為view，block和text，其中view標簽為容器，block用于綁定logs數(shù)組，而text標簽用于顯示每一條log。wx:for和wx:for-item是小程序框提供的列表綁定語法，更多詳情請參考列表渲染

//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方法中從本地緩存中獲取程序啟動時間數(shù)據(jù)，之后調用數(shù)組的map方法來將時間格式化為字符串

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

最后仍然是logs.wxss，對頁面樣式進行控制。

到此為止，默認生成程序的解析部分就結束了。這個解析過程是為了對微信小程序有個總體上的理解，所以很多地方并沒有深入。在后面的教程中，我會繼續(xù)講解微信小程序開發(fā)的各個方面。

云服務器 GPU云服務器購物微信小程序開發(fā)視頻教程微信小程序開發(fā) 微信小程序開發(fā)語言微信小程序開發(fā)免費

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81062.html

微信小程序開發(fā)教程(基礎篇)5-index 頁面解析

摘要：上一篇教程談了些和微信小程序開發(fā)本身無關的技術問題，現(xiàn)在回到主題。這邊教程主要對默認生成的頁面進行講解。而的顯示則是由屬性直接指定。在該例子中，當用戶點擊用戶頭像和昵稱的視圖區(qū)域時，程序便會顯示頁面。上一篇教程談了些和微信小程序開發(fā)本身無關的技術問題，現(xiàn)在回到主題。這邊教程主要對默認生成的index 頁面進行講解。在之前的教程中有寫道，每一個頁面都包含.js(處理邏輯)，.wxml...

GT 2019-08-20 12:29 評論0 收藏0
微信小程序開發(fā)教程(基礎篇)3-app.js 解析

摘要：微信小程序框架提供了一系列來幫助我們進行本地數(shù)據(jù)存儲，上面的代碼中使用到了和兩個更多相關可以參考這里方法很容易理解，會執(zhí)行獲取用戶信息的功能。上一篇教程中寫道，開發(fā)工具會生成一個默認的程序框架，其中程序的主流程代碼包含在app.js中。默認實現(xiàn)中，該部分功能比較簡單，不過對于學研究小程序開發(fā)還是比較有價值的。由于代碼行數(shù)不多，下面一次性貼出來后進行講解 //app.js App({...

lemon 2019-08-20 12:23 評論0 收藏0
微信小程序開發(fā)教程(基礎篇)2-微信小程序結構概覽

摘要：在新建一個項目后，微信小程序會生成一個默認的程序框架，后續(xù)程序的開發(fā)工作都在這個框架上進行。微信小程序的開發(fā)模式確實和開發(fā)很相似。通常一個完整的微信小程序包含上面兩部分，當然我們也可以定義自己的目錄用于存放公共代碼和程序需要的其它文件。在上一篇教程的最后，我們生成了一個類似Hello World的小程序，這個過程中沒有編寫任何一行代碼。在新建一個項目后，微信小程序會生成一個默認的程序...

muddyway 2019-08-20 12:21 評論0 收藏0
微信小程序開發(fā)教程(基礎篇)7-數(shù)據(jù)綁定上

摘要：在之前的教程中寫到，微信小程序框架將程序分為邏輯層文件和視圖層文件。關于數(shù)據(jù)綁定的更多講述，敬請期待微信小程序開發(fā)教程基礎篇數(shù)據(jù)綁定下在之前的教程中寫到，微信小程序框架將程序分為邏輯層(.js文件)和視圖層(.wxml文件)。這是一種常見的UI和邏輯分離的程序設計方式，開發(fā)出來的程序更加靈活，易擴展。這種程序設計方式通常要解決兩個問題: UI層響應邏輯層邏輯和數(shù)據(jù)的變化UI層將用戶...

I_Am 2019-08-21 15:01 評論0 收藏0