微信小程序?qū)崿F(xiàn)發(fā)微博功能的示例代碼

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

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)微博功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

具體實(shí)現(xiàn)，這個(gè)功能涉及到了page傳遞參數(shù)功能，那么今天就仔細(xì)探究一下如何實(shí)現(xiàn)

首先，這個(gè)功能涉及兩個(gè)頁面，分別為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綁定了一個(gè)writeweibo函數(shù)，那么該函數(shù)需要在js文件中實(shí)現(xiàn)
由于頁面簡單，這里不涉及wxss

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

這里有button綁定的writeweibo函數(shù)，本質(zhì)跳轉(zhuǎn)top頁面

Page({
 
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 weibos: []
 },
 
 writeweibo: function (event){
 wx.navigateTo({
  url: '/pages/weibo/top/top'
 })
 },
})

下面是跳轉(zhuǎn)后的top頁面，即圖片2，3

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

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

// pages/weibo/top/top.js
Page({
 
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {
 
 },
 
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function () {
 
 },
 
 submitEvent:function(event){
 var content = event.detail.value.content;
 var pages = getCurrentPages(); // 獲取當(dāng)前頁面信息
 var page = pages[0];
 var weibos = page.data.weibos; // 獲取數(shù)據(jù)中的weibo參數(shù)
 weibos.push(content); 
 // 修改數(shù)據(jù)
 page.setData({
  weibos:weibos
 })
 
 wx.navigateBack({ //返回上一級(jí)頁面
  })
 
 }
})

以上是top.js，這里可以看到submitEvent方法，獲取當(dāng)前頁面信息，獲取weibo參數(shù)，再通過setData修改數(shù)據(jù)，最后navigateBack返回上一級(jí)頁面，即list頁面

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