本文為大家分享了微信小程序實(shí)現(xiàn)留言板的具體實(shí)現(xiàn)方法，供大家參考，具體內(nèi)容如下
先說(shuō)一下小程序的開(kāi)發(fā)環(huán)境之類(lèi)的基礎(chǔ)東西
1.到微信公眾平臺(tái)下載開(kāi)發(fā)者工具。安裝
2.appID與沒(méi)有appID的區(qū)別是，appID可以用真機(jī)預(yù)覽，而沒(méi)有就不行
3.目錄解釋?zhuān)?/p>
a)pages放頁(yè)面，每個(gè)都必須含有js/json/wxml/wxss四個(gè)文件。
js文件類(lèi)似于js文件，json是配置，比如整個(gè)頁(yè)面頂端的名字顏色之類(lèi)的，wxml類(lèi)似于html，wxss類(lèi)似于css。
其中代碼格式也相似。
b)utils中放公共js。
c)app開(kāi)頭的三個(gè)文件必備。
留言板：
1.先寫(xiě)wxml，然后加入class后寫(xiě)樣式。通過(guò)bindtab綁定js中的函數(shù)。在js中添加函數(shù)。
index.wxml
<!--index.wxml--><!--頁(yè)面的實(shí)現(xiàn)，相當(dāng)于html--><view class="msg-box"> <!--留言區(qū)--> <view class="send-box"> <input value='{{inputVal}}' bindinput='changeInputVal' class="input" type="text" placeholder='請(qǐng)留言...' placeholder-class='place-input' /> <button size='mini' type="primary" bindtap='addMsg'>添加</button><!--bindtap相當(dāng)于onclick--> </view> <text>刷新后添加的數(shù)據(jù)</text> <text class="msg-info" wx:if="{{msgData.length==0}}">暫無(wú)留言...^_^</text> <!--當(dāng)留言列表為空時(shí)顯示本句--> <!--留言列表 --> <view class="list-view"> <view class="item" wx:for="{{msgData}}" wx:key="{{index}}"><!--循環(huán)顯示msgData中的數(shù)據(jù)，key是必須的，否則會(huì)出現(xiàn)警告--> <text class='text1'>{{item.msg}}</text> <!--item是固定的，msg對(duì)應(yīng)msgData中的名--> <icon data-index="{{index}}" class="close-btn" bindtap='deleMsg' type="cancel"></icon> </view> </view> <text>從storage取出的數(shù)據(jù)</text> <text class="msg-info" wx:if="{{msgData1.length==0}}">暫無(wú)留言...^_^</text> <!--當(dāng)留言列表為空時(shí)顯示本句--> <view class="list-view"> <view class="item" wx:for="{{msgData1}}" wx:key="{{index}}"><!--循環(huán)顯示msgData中的數(shù)據(jù)，key是必須的，否則會(huì)出現(xiàn)警告--> <text class='text1'>{{item.msg}}</text> <!--item是固定的，msg對(duì)應(yīng)msgData中的名--> <icon data-index="{{index}}" class="close-btn" bindtap='deleMsg1' type="cancel"></icon> </view> </view><button type="primary" size='mini' bindtap='showStorage'>storage</button> </view>其中wx:if和wx:for都是類(lèi)似于c:if和c:for的寫(xiě)法。
view類(lèi)似于div，可以嵌套。
text類(lèi)似于p，button中的size可以設(shè)置大小，type可以選擇微信自帶的樣式
icon是微信自帶的圖標(biāo)，有多種。
{{msgData}}是通過(guò)嵌套的兩個(gè)大括號(hào)來(lái)去js中page{data:{}}中的參數(shù)。
wx:key是要寫(xiě)的，不寫(xiě)會(huì)出警告。
item是固定的，可以修改的是點(diǎn)后面的參數(shù)
2.編寫(xiě)樣式：
index.wxss
/**index.wxss**//*實(shí)現(xiàn)樣式，類(lèi)似于css*/.msg-box{ padding: 20px;}.send-box{ display: flex;}.input{ border: 1px solid #ccc; padding: 5px; border-radius: 5px;}.msg-info{ display: block; margin: 10px 0 0 0; color: #339900;}.place-input{ color: salmon;}.list-view{ margin: 20px 0 0 0;}.item{ overflow: hidden; border-bottom: 1px dashed #ccc; height: 30px; line-height: 30px;}.text1{ float: left;}.close-btn{ float: right; margin: 5px 5px 0 0;}基本跟css沒(méi)什么差別。
3.對(duì)應(yīng)寫(xiě)js，根據(jù)wxml中的bindtab或者bindinput之類(lèi)的綁定事件來(lái)進(jìn)行編寫(xiě)
//index.js//實(shí)現(xiàn)函數(shù)Page({ data: { inputVal: "",//留言框內(nèi)的數(shù)據(jù) msgData: [],//所有留言數(shù)據(jù) msgData1:"" }, changeInputVal(ev) { this.setData({ inputVal: ev.detail.value//將留言框的數(shù)據(jù)存儲(chǔ)到inputVal中，方便添加留言時(shí)獲取 }); }, addMsg() { //console.log(this.data.inputVal); var list = this.data.msgData;//獲取所有留言 list.push({//向list中添加當(dāng)前添加的留言 msg: this.data.inputVal }); this.setData({//將所有留言更新到msgData中。 msgData: list, inputVal: ""//清空留言框內(nèi)的內(nèi)容 }); /*獲取storage中的所有數(shù)據(jù)*/ var list1 = this.data.msgData1; for(var i=0;i<list.length;i++){ list1.push({ msg:list[i].msg }); } /*把新添加的數(shù)據(jù)添加到要存入stroage的數(shù)組中*/ wx.setStorage({ key: 'msgData1', data: list1, }) /**把數(shù)據(jù)存至stroage */ var that = this; wx.getStorage({ key: 'msgData1', success: function (res) { that.setData({ msgData1: res.data }); }, }) }, deleMsg(ev) { var list=this.data.msgData; var n = ev.target.dataset.index;//獲取當(dāng)前留言的index list.splice(n, 1);//刪除索引號(hào)為n的數(shù)據(jù) this.setData({//將所有留言更新到msgData中 msgData: list }); }, deleMsg1(ev) { var list = this.data.msgData1; var n = ev.target.dataset.index;//獲取當(dāng)前留言的index list.splice(n, 1);//刪除索引號(hào)為n的數(shù)據(jù) this.setData({//將所有留言更新到msgData中 msgData1: list }); }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { /**把storage中的內(nèi)容取出并賦值給msgData1 */ var that = this; wx.getStorage({ key: 'msgData1', success: function (res) { that.setData({ msgData1: res.data }); }, }) },})其中，整個(gè)文件必須要有的就是最外層的page({})，自帶了許多函數(shù)，如onload，可以酌情使用。本例中使用了onload。
data用來(lái)放置數(shù)據(jù)，在index.js中的數(shù)據(jù)是index.wxml可以使用的數(shù)據(jù)。如果是在app.js中帶有的data，則是全局變量。在wxml中要獲取可以通過(guò)getapp().參數(shù)名來(lái)獲取全局變量。
本例是實(shí)現(xiàn)了隨著程序的生命周期而存在的msgData和存放到本地緩存的msgData1兩種。
其他文件的內(nèi)容可以不做任何修改。至此，本留言板完成。
4.可以修改在界面最頂端的顯示字樣
index.json
{ "navigationBarTitleText": "簡(jiǎn)易留言板"}json文件中必須含有最外層的一個(gè)大括號(hào)。
如果是在app.json中設(shè)置，那么所有沒(méi)有自定義標(biāo)題的界面都是顯示“簡(jiǎn)易留言板”
如果是在index.json中設(shè)置，那么只有index.wxml中顯示“簡(jiǎn)易留言板”
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
