1.4 實(shí)戰(zhàn)1：Hello World

本節(jié)通過一個(gè)簡單的測試小程序，實(shí)現(xiàn)一個(gè)輸出Hello World消息的頁面。

1.4.1 編寫頁面鏈接

打開前面創(chuàng)建的測試項(xiàng)目，在此項(xiàng)目的基礎(chǔ)上，我們準(zhǔn)備創(chuàng)建一個(gè)helloWorld頁面。

在模擬器的下方，可以看到當(dāng)前的頁面地址和頁面所攜帶的參數(shù)。該頁面的路徑為pages/index/index，那么文件就應(yīng)當(dāng)是pages→index中的index文件。在代碼的編輯器中可以看出，似乎在這個(gè)名稱為index的文件夾中包含了3個(gè)命名為index但后綴不同的文件，如圖1-18所示。其中：

圖1-18 開發(fā)小程序的文件結(jié)構(gòu)

● 后綴為.wxml的文件是該頁面的頁面文件。

● 后綴為.wxss的文件是該頁面的樣式文件。

● 后綴為.js的文件是該頁面的邏輯文件，也就是編寫JavaScript代碼的文件。

打開index.wxml，查看默認(rèn)代碼，如下所示。

＜!--index.wxml--＞
＜view class="container"＞
  ＜view class="userinfo"＞
    ＜button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo"
bindgetuserinfo= "getUserInfo"＞ 獲取頭像昵稱 ＜/button＞
    ＜block wx:else＞
      ＜image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}"
background-size="cover"＞＜/image＞
      ＜text class="userinfo-nickname"＞{{userInfo.nickName}}＜/text＞
    ＜/block＞
  ＜/view＞
  ＜view class="usermotto"＞
    ＜text class="user-motto"＞{{motto}}＜/text＞
  ＜/view＞
＜/view＞

本文件的第1行，即在編輯器中顯示為綠色的部分，是注釋。也就是說，這類代碼在程序中只是為了增加程序的可讀性，并不會(huì)在程序中有任何作用。

第2行是小程序中最基本的一個(gè)元素：＜view＞＜/view＞。這個(gè)元素相當(dāng)于HTML中的＜div＞＜/div＞元素，其指定的class屬性的值container，是在index.wxss中命名的樣式效果，可以打開index.wxss查看。

在這里，我們需要編寫一個(gè)跳轉(zhuǎn)的鏈接，跳轉(zhuǎn)到之后要編寫的helloWorld頁面中。新增一個(gè)＜view＞＜/view＞元素，代碼如下：

＜view bindtap='bindMyViewTap'＞點(diǎn)我跳轉(zhuǎn)＜/view＞

將上述代碼加到任何地方都是可以的，只不過會(huì)出現(xiàn)在頁面的不同區(qū)域，但不會(huì)影響效果。在上述代碼中，＜view＞＜/view＞綁定了一個(gè)單擊事件，而這個(gè)事件需要手動(dòng)添加到index.js文件中。

注意：使用Ctrl+S鍵進(jìn)行保存或手動(dòng)單擊編譯按鈕時(shí)都會(huì)引發(fā)保存和重新編譯事件，即在左邊的模擬器中可以看到小程序的最新效果。

接下來需要編寫index.js文件。在bindViewTap方法的下面、onLoad方法的上面，增加如下代碼。

……
  // 事件處理函數(shù)
  bindViewTap: function（）{
    wx.navigateTo（{
      url: '../logs/logs'
    }）
  }，
  // 用戶單擊“點(diǎn)我跳轉(zhuǎn)”view
  bindMyViewTap:function（）{
    wx.navigateTo（{
      url: '/pages/index/helloWorld'
    }）
  }，
  onLoad: function（）{
……

這里使用了wx.navigateTo這個(gè)API進(jìn)行頁面跳轉(zhuǎn)。使用Ctrl+S鍵保存，嘗試單擊，查看效果。此時(shí)在調(diào)試器中會(huì)報(bào)錯(cuò)，表示helloWorld頁面不存在，如圖1-19所示。那是因?yàn)檫@個(gè)頁面還沒有創(chuàng)建，下一節(jié)就介紹如何創(chuàng)建。

圖1-19 調(diào)試器的報(bào)錯(cuò)

1.4.2 編寫新頁面內(nèi)容

首先創(chuàng)建新頁面。開發(fā)者工具提供了非常簡單的方式，只需要在app.json中聲明該頁面，保存后就會(huì)自動(dòng)為開發(fā)者生成這個(gè)頁面的3個(gè)文件，只需要在app.js中修改pages數(shù)組的內(nèi)容，如下所示。

{
  "pages":[
    "pages/index/index"，
    "pages/logs/logs"，
    "pages/index/helloWorld"
  ]，
  "window":{
    "backgroundTextStyle":"light"，
    "navigationBarBackgroundColor": "#fff"，
    "navigationBarTitleText": "WeChat"，
    "navigationBarTextStyle":"black"
  }
}

保存后開發(fā)者工具自動(dòng)生成helloWorld頁面。現(xiàn)在嘗試在index頁面單擊鏈接，就會(huì)跳轉(zhuǎn)至該頁面，如圖1-20所示。

圖1-20 helloWorld頁面

接下來，需要編寫該頁面的代碼。打開helloWorld.wxml，編寫一個(gè)簡單的＜ text ＞＜/ text ＞元素，如下所示。

＜!--pages/index/helloWorld.wxml--＞
＜text＞{{data}}＜/text＞

上述代碼指明了在文字元素中顯示一個(gè)名為data的變量，而這個(gè)變量需要在helloWorld.js中聲明，代碼如下所示。

/＊＊
  ＊ 頁面的初始數(shù)據(jù)
  ＊/
  data: {
    data: 'Hello World'
  }，

這樣，一個(gè)完整的顯示Hello World的頁面就完成了，效果如圖1-21所示。

圖1-21 頁面顯示效果