微信小程序?qū)崿F(xiàn)發(fā)微博功能的示例代碼
跳轉(zhuǎn)頁(yè)面發(fā)狀態(tài)消息,是一個(gè)很常見(jiàn)的功能,功能截圖如下:




具體實(shí)現(xiàn),這個(gè)功能涉及到了page傳遞參數(shù)功能,那么今天就仔細(xì)探究一下如何實(shí)現(xiàn)
首先,這個(gè)功能涉及兩個(gè)頁(yè)面,分別為top和list
先看list頁(yè)面,即圖片1和圖片4,該頁(yè)面的布局如下
<!--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)
由于頁(yè)面簡(jiǎn)單,這里不涉及wxss
接著就是list.js,查看js文件
這里有button綁定的writeweibo函數(shù),本質(zhì)跳轉(zhuǎn)top頁(yè)面
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
weibos: []
},
writeweibo: function (event){
wx.navigateTo({
url: '/pages/weibo/top/top'
})
},
})
下面是跳轉(zhuǎn)后的top頁(yè)面,即圖片2,3
<!--pages/weibo/top/top.wxml--> <view> <form bindsubmit="submitEvent"> <textarea name="content" placeholder="請(qǐng)輸入內(nèi)容" /> <button form-type="submit">提交</button> </form> </view>
這里placeholder是提示信息的顯示,可以看到提交button也綁定了一個(gè)submit的方法
// pages/weibo/top/top.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow: function () {
},
submitEvent:function(event){
var content = event.detail.value.content;
var pages = getCurrentPages(); // 獲取當(dāng)前頁(yè)面信息
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í)頁(yè)面
})
}
})
以上是top.js,這里可以看到submitEvent方法,獲取當(dāng)前頁(yè)面信息,獲取weibo參數(shù),再通過(guò)setData修改數(shù)據(jù),最后navigateBack返回上一級(jí)頁(yè)面,即list頁(yè)面
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)發(fā)微博功能的文章就介紹到這了,更多相關(guān)小程序發(fā)微博功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)的picker多級(jí)聯(lián)動(dòng)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的picker多級(jí)聯(lián)動(dòng)功能,結(jié)合實(shí)例形式分析了微信小程序picker組件使用及wx.request后臺(tái)交互相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
使用bootstrap validator的remote驗(yàn)證代碼經(jīng)驗(yàn)分享(推薦)
這篇文章主要介紹了使用bootstrap validator的remote驗(yàn)證器驗(yàn)證經(jīng)驗(yàn)分享(推薦)的相關(guān)資料,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果
本文主要分享了js實(shí)現(xiàn)增加數(shù)字顯示的環(huán)形進(jìn)度條效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子
今天小編就為大家分享一篇layui 富文本圖片上傳接口與普通按鈕 文件上傳接口的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JavaScript之Map和Set_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之Map和Set的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果
本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02

