微信小程序實現(xiàn)留言板（Storage）

本文為大家分享了微信小程序實現(xiàn)留言板的具體實現(xiàn)方法，供大家參考，具體內(nèi)容如下

在蒲江縣等地區(qū)，都構建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務理念，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設計網(wǎng)站設計制作按需網(wǎng)站設計,公司網(wǎng)站建設,企業(yè)網(wǎng)站建設,成都品牌網(wǎng)站建設,營銷型網(wǎng)站,成都外貿(mào)網(wǎng)站建設,蒲江縣網(wǎng)站建設費用合理。

先說一下小程序的開發(fā)環(huán)境之類的基礎東西

1.到微信公眾平臺下載開發(fā)者工具。安裝

2.appID與沒有appID的區(qū)別是，appID可以用真機預覽，而沒有就不行

3.目錄解釋：

微信小程序實現(xiàn)留言板（Storage）

a)pages放頁面，每個都必須含有js\json\wxml\wxss四個文件。

js文件類似于js文件，json是配置，比如整個頁面頂端的名字顏色之類的，wxml類似于html，wxss類似于css。

其中代碼格式也相似。

b)utils中放公共js。

c)app開頭的三個文件必備。

留言板：

1.先寫wxml，然后加入class后寫樣式。通過bindtab綁定js中的函數(shù)。在js中添加函數(shù)。

index.wxml

<!--index.wxml-->
<!--頁面的實現(xiàn)，相當于html-->
<view class="msg-box">
 <!--留言區(qū)-->
 <view class="send-box">
  <input value='{{inputVal}}' bindinput='changeInputVal' class="input" type="text" placeholder='請留言...' placeholder-class='place-input' />
  <button size='mini' type="primary" bindtap='addMsg'>添加</button><!--bindtap相當于onclick-->
 </view>
  <text>刷新后添加的數(shù)據(jù)</text>
 <text class="msg-info" wx:if="{{msgData.length==0}}">暫無留言...^_^</text>   <!--當留言列表為空時顯示本句--> 
 <!--留言列表 -->
  <view class="list-view">
  <view class="item" wx:for="{{msgData}}" wx:key="{{index}}"><!--循環(huán)顯示msgData中的數(shù)據(jù)，key是必須的，否則會出現(xiàn)警告-->
   <text class='text1'>{{item.msg}}</text> <!--item是固定的，msg對應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}}">暫無留言...^_^</text>   <!--當留言列表為空時顯示本句--> 
 <view class="list-view">
  <view class="item" wx:for="{{msgData1}}" wx:key="{{index}}"><!--循環(huán)顯示msgData中的數(shù)據(jù)，key是必須的，否則會出現(xiàn)警告-->
   <text class='text1'>{{item.msg}}</text> <!--item是固定的，msg對應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都是類似于c:if和c:for的寫法。

view類似于div，可以嵌套。

text類似于p，button中的size可以設置大小，type可以選擇微信自帶的樣式

icon是微信自帶的圖標，有多種。

{{msgData}}是通過嵌套的兩個大括號來去js中page{data:{}}中的參數(shù)。

wx:key是要寫的，不寫會出警告。

item是固定的，可以修改的是點后面的參數(shù)

2.編寫樣式：

index.wxss

/**index.wxss**/
/*實現(xiàn)樣式，類似于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沒什么差別。

3.對應寫js，根據(jù)wxml中的bindtab或者bindinput之類的綁定事件來進行編寫

//index.js
//實現(xiàn)函數(shù)
Page({
 
 data: {
  inputVal: "",//留言框內(nèi)的數(shù)據(jù)
  msgData: [],//所有留言數(shù)據(jù)
  msgData1:""
 },
  changeInputVal(ev) {
   this.setData({
    inputVal: ev.detail.value//將留言框的數(shù)據(jù)存儲到inputVal中，方便添加留言時獲取
   });
  },
  addMsg() {
   //console.log(this.data.inputVal);
   var list = this.data.msgData;//獲取所有留言
   list.push({//向list中添加當前添加的留言
    msg: this.data.inputVal
   });
   this.setData({//將所有留言更新到msgData中。
    msgData: list,
    inputVal: ""http://清空留言框內(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;//獲取當前留言的index
   list.splice(n, 1);//刪除索引號為n的數(shù)據(jù)
   this.setData({//將所有留言更新到msgData中
    msgData: list
   });
  },
  deleMsg1(ev) {
   var list = this.data.msgData1;
   var n = ev.target.dataset.index;//獲取當前留言的index
   list.splice(n, 1);//刪除索引號為n的數(shù)據(jù)
   this.setData({//將所有留言更新到msgData中
    msgData1: list
   });
  },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  /**把storage中的內(nèi)容取出并賦值給msgData1 */
  var that = this;
  wx.getStorage({
   key: 'msgData1',
   success: function (res) {
    that.setData({
     msgData1: res.data
    });
   },
  })
 },
})

其中，整個文件必須要有的就是最外層的page({})，自帶了許多函數(shù)，如onload，可以酌情使用。本例中使用了onload。

data用來放置數(shù)據(jù)，在index.js中的數(shù)據(jù)是index.wxml可以使用的數(shù)據(jù)。如果是在app.js中帶有的data，則是全局變量。在wxml中要獲取可以通過getapp().參數(shù)名來獲取全局變量。

本例是實現(xiàn)了隨著程序的生命周期而存在的msgData和存放到本地緩存的msgData1兩種。

其他文件的內(nèi)容可以不做任何修改。至此，本留言板完成。

4.可以修改在界面最頂端的顯示字樣

index.json

{
 "navigationBarTitleText": "簡易留言板"
}

json文件中必須含有最外層的一個大括號。

如果是在app.json中設置，那么所有沒有自定義標題的界面都是顯示“簡易留言板”

如果是在index.json中設置，那么只有index.wxml中顯示“簡易留言板”

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標題：微信小程序實現(xiàn)留言板（Storage）
轉載來源：http://www.rwnh.cn/article10/jissgo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站營銷、網(wǎng)站設計公司、關鍵詞優(yōu)化、靜態(tài)網(wǎng)站、網(wǎng)站設計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

微信小程序實現(xiàn)留言板（Storage）