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

具體實現，這個功能涉及到了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頁面

到此這篇關於微信小程式實現發微博功能的文章就介紹到這了,更多相關小程式發微博功能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！