第一個微信小程序（實現點擊一個按鈕彈出toast）

今天根據網上的教程搭建了微信小程序的環境，然后看文檔做了一個簡單的小應用。

 

項目的目錄是這個樣子的:

app.js、app.json、app.wxss是全局文件，必不可少的文件。定義在app.wxss中的樣式為全局樣式，作用於每一個頁面。在page的wxss文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋app.wxss中相同的選擇器。

 

app.js文件代碼:

App({
  onLaunch: function () {
    console.log('小程序已啟動')
  },
  onShow: function () {
    console.log('小程序顯示')
  },
  onHide: function () {
    console.log('小程序隱藏')
  },
  globalData: {
    hasLogin: false
  }
})

app.json文件代碼：

{
  "pages": [
      "page/first/first"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我的第一個小程序",
    "navigationBarBackgroundColor": "#fbf9fe",
    "backgroundColor": "#fbf9fe"
  },
  "debug": true
}

app.json中pages起到設置頁面路徑的作用。

app.wxss是樣式文件，就跟css文件一樣，里面暫時就沒寫代碼了，不影響。

 

然后是first文件夾下的文件

first.js文件是邏輯文件，就好比是框架中的控制器；first.json是配置文件，一些文件的路徑需要些在里面；first.wxml就好比是html文件；first.wxss就好比是html的css文件。

first.js文件代碼：

var status = true;
Page({
  toastShow: function(event) {
    console.log("觸發了點擊事件，彈出toast")
    status = false
    this.setData({status:status})　　　　//setData方法可以建立新的data屬性，從而起到跟視圖實時同步的效果
  },
  toastHide:function(event){
      console.log("觸發bindchange，隱藏toast")
      status =true
      this.setData({status:status})
  },
  data:{
      status:status　　　　　　　　　　　　//data里面的屬性可以傳遞到視圖
  }
})

first.wxml文件代碼：

<button type="default" bindtap="toastShow">點擊彈出toast</button>
<toast hidden="{{status}}" duration="3000" bindchange="toastHide">
        這是toast
</toast>
<view class="myStyle">這是status的值:{{status}}</view>

提示：

toast標簽的duration屬性說明：hidden設置false后，觸發bindchange的延時，單位毫秒。
在本應用中，點擊了button后，觸發bindtap的綁定事件toastShow：將status設置為false，也就是顯示toast。隨后過了3秒鍾，觸發了toast標簽中bindchange的綁定事件toastHide，將status設置為true，也就是隱藏toast。

first.wxss文件代碼：

.myStyle{
    color:cyan;
    text-align: center
}