国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

GT / 2229人閱讀

摘要：上一篇教程談了些和微信小程序開發本身無關的技術問題，現在回到主題。這邊教程主要對默認生成的頁面進行講解。而的顯示則是由屬性直接指定。在該例子中，當用戶點擊用戶頭像和昵稱的視圖區域時，程序便會顯示頁面。

上一篇教程談了些和微信小程序開發本身無關的技術問題，現在回到主題。

這邊教程主要對默認生成的index 頁面進行講解。在之前的教程中有寫道，每一個頁面都包含.js(處理邏輯)，.wxml(描述頁面內容)，.wxss(配置頁面樣式)三個文件，index 頁面也是如此。

講解之前先上圖

index頁面的內容不多，只有一個用戶頭像，用戶姓名，和一個"Hello World"，首先來看看index.wxml的內容



  
    
    {{userInfo.nickName}}
  
  
    {{motto}}

該頁面的層級結構比較簡單，三個view標簽，一個image以及兩個text標簽，其中view為容器標簽，image用來顯示用戶頭像，第一個text用來顯示用戶昵稱，第二個text則是"Hello World"

可以看到頁面描述文件中綁定了幾個變量，分別是第二個view標簽的 bindtap="bindViewTap"，image標簽的src="{{userInfo.avatarUrl}} 以及兩個text標簽的內容文本。那么這些變量定義在哪里呢，答案就在index.js中

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    motto: "Hello World",
    userInfo: {}
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: "../logs/logs"
    })
  },
  onLoad: function () {
    console.log("onLoad")
    var that = this
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.js代碼定義了Page對象，該對象中定義了index.wxml綁定的變量，其中onLoad方法會在頁面加載時被調用，該方法會調用app對象的getUserInfo方法來獲取用戶信息并賦值給userInfo屬性，這樣界面就可以顯示用戶頭像和昵稱了。而"Hello World"的顯示則是由motto屬性直接指定。

Page對象還定義了bindViewTap方法，該方法通過調用wx.navigateTo導航到logs頁面。關于頁面導航的更多內容將在后面的教程中講解。在該例子中，當用戶點擊用戶頭像和昵稱的視圖區域時，程序便會顯示logs頁面。

最后簡單看下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中使用到的樣式選擇器，這部分比簡單，在這里就不多做解釋了。

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

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

相關文章

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

    摘要：到此為止，默認生成程序的解析部分就結束了。這個解析過程是為了對微信小程序有個總體上的理解，所以很多地方并沒有深入。在后面的教程中，我會繼續講解微信小程序開發的各個方面。 上一篇教程中對index頁面進行了解析，這一篇來解析下logs頁面 老規矩先上圖 showImg(https://segmentfault.com/img/remote/1460000007613022?w=378&h...

    shiguibiao 評論0 收藏0

  • 微信小程序開發教程(基礎篇)3-app.js 解析

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

    lemon 評論0 收藏0

  • 微信小程序開發教程(基礎篇)2-微信小程序結構概覽

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

    muddyway 評論0 收藏0

  • 微信小程序開發教程(基礎篇)7-數據綁定上

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

    I_Am 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<