微信小程序實現發(fā)微博功能的示例代碼

更新時間：2020年06月24日 11:07:23 作者：HL是限量版

這篇文章主要介紹了微信小程序實現發(fā)微博功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

跳轉頁面發(fā)狀態(tài)消息，是一個很常見的功能，功能截圖如下：

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

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

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

<!--pages/weibo/list/list.wxml-->
<view>這是第一條微博</view>
<view wx:for = "{{weibos}}">
{{item}}
</view>
<button type="primary" bindtap="writeweibo">發(fā)微博</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: {
 
 },
 
 /**
 * 生命周期函數--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函數--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函數--監(jiān)聽頁面顯示
 */
 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頁面

到此這篇關于微信小程序實現發(fā)微博功能的文章就介紹到這了,更多相關小程序發(fā)微博功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！