wechat-pinkDiary

微信小程(cheng)序-以粉粉日記(ji)APP為(wei)參(can)考做的一個日記(ji)本。

首先，開發微信小程序你需要準備好這些工具：

下載微信開發者工具，附上地址：//mp.weixin.qq.com/debu... 下載好后就可以進行開發了，不過呢，如果要發布你的小程序呢，你要去申請AppId走各種流程，不過平時練練手可以選擇無Appid進行開發，不過會有一些局限。具體開發詳情你可以去//mp.weixin.qq.com 這里了解。
在創建(jian)了一(yi)個微信小程序后，會自動生(sheng)成一(yi)些基(ji)本(ben)文件： 

• page文(wen)件(jian)夾 頁面文(wen)件(jian)夾 包(bao)含(han)你所有的頁面文(wen)件(jian),至少包(bao)含(han).js .wxml .wxs后綴文(wen)件(jian)，.json可選

• utlis文(wen)件夾(jia) 一般(ban)放(fang)置一些全(quan)局(ju)需要使用的(de)js文(wen)件

• app.js 控制全局的邏輯結構

• app.json 配置一些全(quan)局(ju)數據，所有頁面都(dou)要在此處注冊

• app.wxml 內容顯示

• app.wxss 全局樣式
  下面切入(ru)我(wo)們的正題： 

效果預覽 

嘻嘻，先來一波gif圖(好尷尬，動圖太大，加載不出來）那只好來一波圖片啦~ 

體驗(yan)動圖可到(dao)源(yuan)碼查看

頁面注冊

 "pages":[
    "pages/index/index",    //首(shou)頁，也(ye)就(jiu)是tabBar里(li)“社區“對應的頁面
    "pages/my/index",       // tabBar“我的”頁面
    "pages/detail/index",    //首頁(ye)推薦內(nei)容的詳情頁(ye) 
    "pages/new/index",        // 編輯日(ri)記頁(ye)面
    "pages/diary/index",      //日記列表頁面
    "pages/logs/logs"
  ]

功能實現 

• 輪播(bo)圖

• 寫日記(ji)

• 話(hua)題評論(lun)

• 帶emoji的輸入

• 上傳圖片

• 字體大小，顏色改變

• 地理定位(wei)

• 下拉刷新

• tabbar切換良(liang)好交互

• 獲(huo)取用(yong)戶信息

• 動態選擇日記日期

具體實現 

首(shou)先(xian),在社區這一(yi)塊(kuai)，我用到大量數據(ju)(ju)都(dou)是(shi)(shi)用mock來(lai)模(mo)擬數據(ju)(ju)，詳情可見(jian)Easy Mock Easy Mock是(shi)(shi)一(yi)個(ge)可視(shi)化工(gong)具，能快速(su)生成模(mo)擬數據(ju)(ju)的(de)服務，它能為(wei)我們(men)提供(gong)一(yi)個(ge)數據(ju)(ju)接口url，然后(hou)使用wx.request({ url: url, .....})來(lai)發送(song)數據(ju)(ju)請求，不得不說mock是(shi)(shi)前端人員的(de)有力工(gong)具。

• 輪播圖 
  
  輪播圖(tu)是微(wei)信(xin)小(xiao)程序自帶的(de)輪播圖(tu)(swiper)組件(jian) 

HTML結構

 <swiper class="swiper_box"
  indicator-color="{{indicatorcolor}}" 
  indicator-active-color="{{indicatoractivecolor}}" 
  vertical="{{vertical}}" 
  autoplay="{{autoplay}}" 
  interval="{{interval}}" 
  duration="{{duration}}" 
  indicator-dots="indicatorDots">
      <block wx:for="{{images}}" wx:key="item">
        <swiper-item>
          <image src="{{item}}" class="slide-image"></image>
        </swiper-item>
      </block>
    </swiper>

js配置

 Page({
 data: {
   indicatorDots:true,
   vertical:false,
   autoplay:true,     //自動(dong)輪播
   interval:3000,     //輪(lun)播時間差(cha)為3000ms
   duration:1200,
   indicatorcolor:"#fff",     //設置(zhi)底部小圓點為白色
   indicatoractivecolor:"pink",   //當(dang)圓點狀(zhuang)態為(wei)active是(shi)，呈現(xian)粉色
   ......
   }
 })

• tabbar切換良好交互 
  
  這個功能實現(xian)起來比(bi)較簡單，主要是將app.json文(wen)件中的tabBar里設置(zhi)樣式(shi)、頁(ye)面路(lu)徑(jing)、圖片路(lu)徑(jing)，用列表list來渲(xuan)染,詳細請參考以下代碼

     "tabBar": {
      "color":"#999",
      "selectedColor":"#ff71a8",
      "borderStyle":"white",
      "list": [{
        "pagePath": "pages/index/index",
        "text": "社區",
        "iconPath": "images/lifeNormal.png",
        "selectedIconPath": "images/lifeSelected.png"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的(de)",
        "iconPath": "images/myNormal.png",
        "selectedIconPath": "images/mySelected.png"
      }]
   }

• 寫日記 
  
   因(yin)為(wei)編輯日(ri)記(ji)和展示(shi)日(ri)記(ji)在(zai)兩個(ge)不同的(de)(de)頁面(mian)，所以(yi)(yi)兩個(ge)頁面(mian)之間需(xu)(xu)要傳(chuan)(chuan)遞日(ri)記(ji)的(de)(de)內容，這里我(wo)主要是借助wx.setLocalStorage(key:key,value:value)將需(xu)(xu)要傳(chuan)(chuan)遞的(de)(de)數據(ju)(ju)存(cun)放到(dao)本地緩存(cun)中(zhong)，雖然(ran)我(wo)們(men)(men)不建(jian)議將關鍵信息(xi)全部(bu)存(cun)在(zai)localStorage，以(yi)(yi)防(fang)用戶換設備(bei)的(de)(de)情況。 但是在(zai)我(wo)們(men)(men)沒有更好的(de)(de)數據(ju)(ju)共享的(de)(de)方式前(qian)可(ke)以(yi)(yi)一試(shi)。最(zui)后我(wo)們(men)(men)在(zai)日(ri)記(ji)列表(biao)頁面(mian)通(tong)過(guo)(guo)wx.getStorage(key)得到(dao)我(wo)們(men)(men)之前(qian)存(cun)儲的(de)(de)東西，然(ran)后再頁面(mian)上(shang)顯示(shi)出(chu)來。在(zai)日(ri)記(ji)列表(biao)頁面(mian)可(ke)以(yi)(yi)對你(ni)的(de)(de)日(ri)記(ji)進行刪(shan)除(chu)和修(xiu)改操作(zuo)，刪(shan)除(chu)就很簡單了(le)(le)，直(zhi)接利(li)用wx.clearStorage()將你(ni)存(cun)儲在(zai)localSroage里的(de)(de)數據(ju)(ju)全部(bu)清空(kong)就可(ke)以(yi)(yi)了(le)(le)。這里可(ke)以(yi)(yi)借助setTimeout來實現一個(ge)假的(de)(de)效果，修(xiu)改的(de)(de)話，就是通(tong)過(guo)(guo)wx.navigateTo()里的(de)(de)url將日(ri)記(ji)的(de)(de)text作(zuo)為(wei)參數傳(chuan)(chuan)遞給編輯頁面(mian)，詳情見代碼：

日記列表頁面代碼：

 //modify就是點擊修改按鈕(niu)觸發的事件(jian)
 modify: function(){
 console.log('aaa')
 wx.navigateTo({
   url:"/pages/new/index?content="+this.data.content
 })
  }

修改頁面，在onLoad()獲取參(can)數：

onLoad:function(query) {
  that.setData({
    content:query.content
  })
  .....

• 話題評論 
  
  頁面展示的話題詳情和已經展示的評論是從mock里獲取的數據，評論功能的實現主要是借助數組的concat()方法，將你添加的評論和原有的評論連接起來，
  首先(xian)在(zai)(zai)data里面我們有個空的(de)commentList來(lai)存(cun)放新(xin)發布(bu)的(de)評論(lun)，獲取評論(lun)內(nei)容(rong)等在(zai)(zai)這就不細講，重點(dian)看(kan)一下發布(bu)評論(lun)的(de)代(dai)碼：

    submitComment: function() {
      var that = this, conArr = [];
       //此處延遲的(de)原(yuan)因是(shi) 在點(dian)發送時 先執行(xing)失(shi)去文(wen)本(ben)焦點(dian) 再執行(xing)的(de)send 事(shi)件 此時獲取數(shu)據(ju)不(bu)正確 故手(shou)動延遲100毫(hao)秒
       setTimeout(function () {
         if (that.data.comment.trim().length > 0) {
           conArr.push({
             avatar:that.data.avatar,     //在onLoad(）里(li)通過(guo)wx.getUserInfo()獲取(qu)了用戶(hu)信(xin)息
             username:that.data.username,
             time:util.formatTime(new Date()),
             content:that.data.comment,    //評論的text包括表情
             images:that.data.photos      //評論所帶圖(tu)片地址(zhi)
           })
           that.setData({
             commentList: that.data.commentList.concat(conArr),
             comment: "",//清空文本域(yu)值
             photos:[],
             isShow: false,    
             photoShow:false,
           })
         } else {
           that.setData({
             comment: "",//清空(kong)文本(ben)域值
             photos:[],
           })
         }
       }, 100)
    }

• 地理定位 
  
  我在定位功能的實現中使用了騰訊地圖的定位API,具體使用可參考網址詳細解析//lbs.qq.com/qqmap_wx_js... <br/>
  但是有3步是必不可少的：
  1 申請開發者密鑰（key）：[申請密鑰] //lbs.qq.com/key.html
  2 下載微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0
  3 安全域名設置，需要在微信公眾平臺添加域名地址//apis.map.qq.com 完成
  以上3步，你就可以友好地使用Api了，首先使用wx.getLocation()獲取當前用戶位置的 
  經緯度，然后通過逆地址解析獲取當前的具體位置，這里就是使用騰訊位置服務平臺提的 
   reverseGeocoder接口，在逆地址解(jie)析結果中獲(huo)取省份和城市信息(xi)。參(can)考代碼：

   getLocation: function() {
  let that=this;
  wx.getLocation({      //首先獲(huo)得經緯度
   type: 'wgs84',
   success:(res)=> {
     var latitude = res.latitude
     var longitude = res.longitude
     demo.reverseGeocoder({      //然后借助騰訊位置服務(wu)提供個逆地址(zhi)解析api將經緯(wei)度轉換(huan)成具(ju)體的(de)地址(zhi)
       location:{
         latitude,
         longitude
       },
       success: function(res) {
         console.log(res.result)
           var location=res.result.address_component.province+res.result.address_component.city
           that.setData({
             location,
             locationStyle:'background-image:url(./../../images/blue.png);color:#1296db;'
           });
           wx.setStorage({
             key:"location",
             data:location
           })
  
       },
       fail: function(res) {
           console.log(res);
       },
       complete: function(res) {
           console.log(res);
       }
     });
   }
  })
   }

• 下拉刷新評論 
  
  這(zhe)(zhe)里主要是(shi)借助了(le)微信小程序的(de)(de)視(shi)圖容器scroll-view，可滾(gun)動(dong)(dong)區域，設置屬性scroll-y="true",表(biao)示可沿著y軸(zhou)滾(gun)動(dong)(dong)，需要注意使(shi)用豎(shu)向滾(gun)動(dong)(dong)時，需要給<scroll-view/>一個(ge)(ge)固(gu)定高度(du)，我(wo)這(zhe)(zhe)里是(shi)通過wx.getSystemInfo()得到windowHeight,然(ran)后將固(gu)定高度(du)設置為和(he)windowHeight一樣。當滾(gun)動(dong)(dong)到評論底(di)部時，會(hui)觸發會(hui)觸發 scrolltolower 事(shi)件，在事(shi)件對(dui)應的(de)(de)處理方法里我(wo)們將預先設置好的(de)(de)評論信息加(jia)(jia)載到頁面上。這(zhe)(zhe)樣就形成(cheng)一個(ge)(ge)下拉加(jia)(jia)載的(de)(de)效果(guo)。參考代碼(ma):

  //哈哈，方法命名有點粗糙~
  refresh:function(){
  console.log('bottom')
  let that = this,conArr = []
  if (that.data.refreshTime < 3) {     //refreshTime是在(zai)data里(li)定義(yi)的一個(ge)常量，用(yong)來控制加載次數，這里(li)最多3次
  for(let i=0;i<3;i++){
    conArr.push({
      'avatar':'../../images/avatar.jpg',
      'username':'西(xi)瓜君(jun)',
      'content':'簡直(zhi)66666',
      'time':util.formatTime(new Date())   //獲取(qu)當前時間，utils文件夾下的util.js里定義了formateTime()方法(fa)，詳情(qing)見源(yuan)碼~
    })
  }
  wx.showToast({               //顯示加載提示框
    title: '加載中',
    icon: 'loading',
    duration: 3000
  })
  setTimeout(function () {
        that.setData({
          commentList: that.data.commentList.concat(conArr)
        })
      },3000)
  } else {
  that.setData({
    nodata:true
  })
  }
  ++that.data.refreshTime;
  }

• 上傳圖片 
  
  通過wx.chooseImage(OBJECT)來從(cong)本地(di)相冊選擇圖片或使用相機拍(pai)照，具(ju)體參數如圖：

主要(yao)代碼(ma)：

 wx.chooseImage({
  count: 1, // 默(mo)認9  表示可選擇圖片(pian)的數量
  sizeType: ['original', 'compressed'], // 可以(yi)指定是原圖(tu)(tu)還是壓縮圖(tu)(tu)，默認二者都有
  sourceType: ['album', 'camera'], // 可以指定(ding)來源是相冊還是相機，默認(ren)二者(zhe)都有(you)
  success: function (res) {
        // 返回選(xuan)定(ding)照片的本地文件路徑列(lie)表，tempFilePath可(ke)以作(zuo)為(wei)img標(biao)簽的src屬性顯(xian)示圖片
      var tempFilePaths = res.tempFilePaths; 
      this.setData({
      photos: tempFilePaths
      })
   }
 })
 .....

• 帶emoji輸入框 
   

  

這里首先我們需要在data里定義一個emojiChar，注意這個emojiChar是有一大串可愛表情連起來的字符串，具體可以看下面的js代碼，首先我們通過split()將字符串emojiChar切割成一個表情數組emChar[],但是這些表情不是顯示在表情框中的表情形式，我們需要將他們轉化成上圖所示的qq和微信的原始表情展示。每一個表情都有相應的字符編碼，但是其實我們這里并不是使用正則來轉換成實體字符，這里我們是通過image將所有的表情以圖片的形式顯示出來，這里的圖片訪問地址從別人的項目里借鑒過來的，具體見代碼。完成了emoji顯示，接下來的就是實現當點擊emoji時，將它顯示到input文本域中。但是其實這里呈現出來的是我們之前在emojiChar里定義的表情樣式，通過dataSet傳遞所選中的表情，詳情見js代碼的emojichoose()方法。完成以上這些，一個可愛的小型emoji輸入框就是實現啦~
HTML結(jie)構：

<!-- emoji表(biao)情盒子 -->
  <view class="emoji-box {{isShow ? 'emoji-move-in' : 'emoji-move-out'}} {{isLoad ? 'no-emoji-move' : ''}}" >
    <scroll-view scroll-y="true" bindscroll="emojiScroll" style="height:200px">
      <block wx:for="{{emojis}}" wx:for-item="e" wx:key="">
        <view class="emoji-cell">
          <image class="touch-active" bindtap="emojiChoose" 
          src="//soupu.oss-cn-shanghai.aliyuncs.com/emoji/{{e.emoji}}.png" 
          data-emoji="{{e.char}}"
          data-oxf="{{e.emoji}}">
          </image>
        </view>
      </block>
    </scroll-view>
  </view>

js控制

Page({
data: {
 .......
  emojiChar: "?-