【詳細】小程序發微博功能實現

跳轉頁面髮狀態消息，是一個很常見的功能，功能截圖如下：

 

具體實現，這個功能涉及到了page傳遞參數功能，那麼今天就仔細探究一下如何實現

首先，這個功能涉及兩個頁面，分別爲top和list

先看list頁面，即圖片1和圖片4，該頁面的佈局如下

<!--pages/weibo/list/list.wxml-->
<view>這是第一條微博</view>
<view wx:for = "{{weibos}}">
{{item}}
</view>
<button type="primary" bindtap="writeweibo">發微博</button>

button綁定了一個writeweibo函數，那麼該函數需要在js文件中實現
由於頁面簡單，這裏不涉及wxss

接着就是list.js，查看js文件

這裏有button綁定的writeweibo函數，本質跳轉top頁面

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    weibos: []
  },

  writeweibo: function (event){
    wx.navigateTo({
      url: '/pages/weibo/top/top'
    })
  },
})

 

下面是跳轉後的top頁面，即圖片2，3

<!--pages/weibo/top/top.wxml-->
<view>
  <form bindsubmit="submitEvent">
    <textarea name="content" placeholder="請輸入內容" />
    <button form-type="submit">提交</button>
  </form>
</view>

這裏placeholder是提示信息的顯示，可以看到提交button也綁定了一個submit的方法

// pages/weibo/top/top.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
  
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  submitEvent:function(event){
    var content = event.detail.value.content;
    var pages = getCurrentPages();  // 獲取當前頁面信息
    var page = pages[0];
    var weibos = page.data.weibos;  // 獲取數據中的weibo參數
    weibos.push(content); 
    // 修改數據
    page.setData({
      weibos:weibos
    })

    wx.navigateBack({  //返回上一級頁面
     })
    
  }
})

以上是top.js，這裏可以看到submitEvent方法，獲取當前頁面信息，獲取weibo參數，再通過setData修改數據，最後navigateBack返回上一級頁面，即list頁面

 

這個功能就實現了！