微信小程序開發(二)

四：推到重來

      微信小程序新建項目，模板其實很複雜，這對一個不熟悉前端編程的程序員來說，其實很難很快掌握，需要網上找更多的資料惡補，甚至知道了後面的忘了前面的。因此，初學者最想做的時，想推倒重來，我重新寫。

這一節，我們就刪掉項目自帶的代碼和文件，以及目錄，然後我們重新再建目錄文件。

功能就是兩個頁面，一個按鈕，按下按鈕切換到下一頁。

效果如圖：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4.1 如何推倒

右鍵刪除pages，index,logs

 

代碼如下

4.2 如何重建

刪除了所有的頁面後，app.json提示下面的錯誤

VM224:1 appJSON["pages"] 需至少存在一項

所以我們需要至少一個頁面
 

點”+”號，新建目錄

 

點pages目錄右鍵，新建目錄——index

再點擊index目錄右鍵，新建Page——index

系統自動生成四個文件index.js,index.json,index.wxml,index.wxss

並且，app.json中會自動添加”pages/index/index”，系統頁不會報錯

系統自動生成的文件index.js

// pages/index/index.js

Page({

 

  /**

   * 頁面的初始數據

   */

  data: {

 

  },

 

  /**

   * 生命週期函數--監聽頁面加載

   */

  onLoad: function (options) {

 

  },

 

  /**

   * 生命週期函數--監聽頁面初次渲染完成

   */

  onReady: function () {

 

  },

 

  /**

   * 生命週期函數--監聽頁面顯示

   */

  onShow: function () {

 

  },

 

  /**

   * 生命週期函數--監聽頁面隱藏

   */

  onHide: function () {

 

  },

 

  /**

   * 生命週期函數--監聽頁面卸載

   */

  onUnload: function () {

 

  },

 

  /**

   * 頁面相關事件處理函數--監聽用戶下拉動作

   */

  onPullDownRefresh: function () {

 

  },

 

  /**

   * 頁面上拉觸底事件的處理函數

   */

  onReachBottom: function () {

 

  },

 

  /**

   * 用戶點擊右上角分享

   */

  onShareAppMessage: function () {

 

  }

})

系統自動生成的index.json文件

{

  "usingComponents": {}

}

系統自動生成的index.wxml文件代碼

<!--pages/index/index.wxml-->

<text>pages/index/index.wxml</text>

系統自動生成的Index.wxss文件代碼

/* pages/index/index.wxss */

 

 

4.3 完善第一步：主頁

Index.js中的很多代碼我們用不上，我們只保留一個函數onLoad，並且在裏面添加一條調試語句

// pages/index/index.js

Page({

  /**

   * 生命週期函數--監聽頁面加載

   */

  onLoad: function (options) {

      console.log("裝載index.js頁面...")

  }

})

運行時，在控制檯會打印該語句，效果如圖

系統自動生成的index.json文件

{

  "usingComponents": {}

}

不用做改動。

系統自動生成的index.wxml文件代碼

<!--pages/index/index.wxml-->

<text>pages/index/index.wxml</text>

程序運行時，頁面顯示內容就是這個給的，我們改動一下，讓它顯示“主頁”兩個字。

結果如下

但是主頁兩個字顯示在左側，怎麼讓它顯示在中間呢？

還記得app.wxss嗎，這個文件時控制全局的，裏面有一個align-items設置的是center，但是爲什麼沒有取作用呢。

我們再看看原來的工程模板，index.wxml中加入了view層，並且引入了class=“container”，我們這裏沒有，所以我們這樣改動一下

<!--pages/index/index.wxml-->

<view class="container">

  <text>主頁</text>

</view>

再看效果

調到中間來後，接下來我們希望把這個字體弄得大點，而且可能的話，換一個彩色字體

這樣，我們需要研究index.wxss，因爲這個文件時控制局部頁面樣式的。

系統自動生成的Index.wxss文件代碼，時空的，我們仿照系統模板，添加一個類text_style，名字我們自定義就可以了，但是這樣保存後，運行結果沒有變化

/* pages/index/index.wxss */

.text_style{

  color:green

}

原因在於我們沒有在index.wxml中加入這個樣式，index.wxml應該添加這一句

<!--pages/index/index.wxml-->

<view class="container">

  <text class="text_style">主頁</text>

</view>

運行結果如下

其實顏色已經改過來了，但是因爲字體太小，我們看不清，所以接下來，我們在樣式裏面再添加字體大小的控制，還時修改index.wxss，而且還時類text_style中添加

/* pages/index/index.wxss */

.text_style{

  color:green;

  font-size:100rpx

}

再看效果，就OK了

 

按照我們的預設，我們還需要加一個按鈕

4.4 完善第二步：按鈕

我們記得在講工程模板代碼分析的時候，按鈕也是在index.wxml中去實現的，我們也這樣試試

<!--pages/index/index.wxml-->

<view class="container">

  <text class="text_style">主頁</text>

  <button>下一頁</button>

</view>

效果如下：

看着很不協調，我們需要改動一下，怎麼改動呢，

<!--pages/index/index.wxml-->

<view class="container">

    <text class="text_style">主頁</text>

    <button type="primary">下一頁</button>

</view>

效果如圖：

Primary這個單詞是主要的，基本的，初級的，其實它還有一個意思是原色的，這裏應該就是這個意思

但是，按鈕和主頁字樣離得太近，怎麼改動一下讓下一頁放到下面呢？我們在index.wxss中再爲按鈕添加一個類，設置離頂500個像素

/* pages/index/index.wxss */

.text_style{

  color:green;

  font-size:100rpx

}

.button_style{

  margin-top: 500rpx

}

並且在index.wxml中也要加入這個類控制，

<!--pages/index/index.wxml-->

<view class="container">

    <text class="text_style">主頁</text>

    <button class="button_style" type="primary">下一頁</button>

</view>

最後的效果圖；

4.5 實現第二個頁面

我們需要在目錄pages下面再新建一個目錄next，然後在next下面新建page

系統會自動在app.json裏面添加page

  "pages": [

    "pages/index/index",

    "pages/next/next"

  ],

接着，我們需要在按鈕“下一頁”中實現函數的綁定，當我們點擊下一頁的時候，跳到next

首先，我們需要在index.wxml中實現button的綁定動作，代碼如下

<!--pages/index/index.wxml-->

<view class="container">

    <text class="text_style">主頁</text>

    <button  class="button_style" type="primary" bindtap="goNextPage">下一頁</button>

</view>

然後在index.js中去實現邏輯，即函數goNextPage，代碼如下

// pages/index/index.js

Page({

  /**

   * 生命週期函數--監聽頁面加載

   */

  onLoad: function (options) {

      console.log("裝載index.js頁面...")

  },

  goNextPage:function()

  {

    console.log('正在切換到下一頁...')

    wx.navigateTo({

      url: '../next/next'   //切換到下一頁面

    })

  }

})

運行結果如圖：

 

接着，我們再來修改一下next頁面，實現當點擊下一頁時，切換過去，子頁面顯示“子頁面”字樣。這樣，我們需要修改next.wxml

<!--pages/next/next.wxml-->

<text>下一頁</text>

我們同樣需要把這個字體調到中間，並且字體放大，設置綠色

我們修改next.wxss，代碼如下

/* pages/next/next.wxss */

.text_style{

   color:green;

   font-size:100rpx

}

 

我們再修改next.wxml，代碼如下：

<!--pages/next/next.wxml-->

<view class="container">

  <text class="text_style">下一頁</text>

</view>

最後的效果：

至此，我們自己開發的小程序就完成了，雖然功能很簡單，但是都是我們一手一腳搭起來的，還時很有收穫的。