樹莓派+小程序開發(二)

樹莓派+小程序開發(一)
樹莓派+小程序開發(二)
五: 讓小程序連接樹莓派
六：小程序控制面板設計
七：樹莓派如何解析小程序的信息
八：樹莓派如何回信息給小程序
九：樹莓派與微信小程序通過websocket通信
十：小程序實時顯示樹莓派溫溼度
十一：python版 websocket服務器實現
十二：python版websocket 服務器如何整合led和beep
十三：Python版服務器整合dht11溫溼度傳感器

四：推到重來

微信小程序新建項目，模板其實很複雜，這對一個不熟悉前端編程的程序員來說，其實很難很快掌握，需要網上找更多的資料惡補，甚至知道了後面的忘了前面的。因此，初學者最想做的時，想推倒重來，我重新寫。
這一節，我們就刪掉項目自帶的代碼和文件，以及目錄，然後我們重新再建目錄文件。
功能就是兩個頁面，一個按鈕，按下按鈕切換到下一頁。
效果如圖：

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”，系統頁不會報錯

// 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
系統自動生成的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
程序運行時，頁面顯示內容就是這個給的，我們改動一下，讓它顯示“主頁”兩個字。
結果如下

但是主頁兩個字顯示在左側，怎麼讓它顯示在中間呢？
還記得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>

最後的效果：

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

接下來，我們將進入第五章：讓小程序連接樹莓派。

樹莓派+小程序開發(一)
樹莓派+小程序開發(二)
五: 讓小程序連接樹莓派
六：小程序控制面板設計
七：樹莓派如何解析小程序的信息
八：樹莓派如何回信息給小程序
九：樹莓派與微信小程序通過websocket通信
十：小程序實時顯示樹莓派溫溼度
十一：python版 websocket服務器實現
十二：python版websocket 服務器如何整合led和beep
十三：Python版服務器整合dht11溫溼度傳感器