wechat-pinkDiary

微信小程序-以粉粉日記APP為參考做的一個(gè)日記本。

首先，開發(fā)微信小程序你需要準(zhǔn)備好這些工具：

下載微信開發(fā)者工具，附上地址：https://mp.weixin.qq.com/debu... 下載好后就可以進(jìn)行開發(fā)了，不過(guò)呢，如果要發(fā)布你的小程序呢，你要去申請(qǐng)AppId走各種流程，不過(guò)平時(shí)練練手可以選擇無(wú)Appid進(jìn)行開發(fā)，不過(guò)會(huì)有一些局限。具體開發(fā)詳情你可以去https://mp.weixin.qq.com 這里了解。
在創(chuàng)建了一個(gè)微信小程序后，會(huì)自動(dòng)生成一些基本文件： 

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

• utlis文件夾 一般放置一些全局需要使用的js文件

• app.js 控制全局的邏輯結(jié)構(gòu)

• app.json 配置一些全局?jǐn)?shù)據(jù)，所有頁(yè)面都要在此處注冊(cè)

• app.wxml 內(nèi)容顯示

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

效果預(yù)覽 

嘻嘻，先來(lái)一波gif圖(好尷尬，動(dòng)圖太大，加載不出來(lái)）那只好來(lái)一波圖片啦~ 

體驗(yàn)動(dòng)圖可到源碼查看

頁(yè)面注冊(cè)

 "pages":[
    "pages/index/index",    //首頁(yè)，也就是tabBar里“社區(qū)“對(duì)應(yīng)的頁(yè)面
    "pages/my/index",       // tabBar“我的”頁(yè)面
    "pages/detail/index",    //首頁(yè)推薦內(nèi)容的詳情頁(yè) 
    "pages/new/index",        // 編輯日記頁(yè)面
    "pages/diary/index",      //日記列表頁(yè)面
    "pages/logs/logs"
  ]

功能實(shí)現(xiàn) 

• 輪播圖

• 寫日記

• 話題評(píng)論

• 帶emoji的輸入

• 上傳圖片

• 字體大小，顏色改變

• 地理定位

• 下拉刷新

• tabbar切換良好交互

• 獲取用戶信息

• 動(dòng)態(tài)選擇日記日期

具體實(shí)現(xiàn) 

首先,在社區(qū)這一塊，我用到大量數(shù)據(jù)都是用mock來(lái)模擬數(shù)據(jù)，詳情可見Easy Mock Easy Mock是一個(gè)可視化工具，能快速生成模擬數(shù)據(jù)的服務(wù)，它能為我們提供一個(gè)數(shù)據(jù)接口url，然后使用wx.request({ url: url, .....})來(lái)發(fā)送數(shù)據(jù)請(qǐng)求，不得不說(shuō)mock是前端人員的有力工具。

• 輪播圖 
  
  輪播圖是微信小程序自帶的輪播圖(swiper)組件 

HTML結(jié)構(gòu)

 <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,     //自動(dòng)輪播
   interval:3000,     //輪播時(shí)間差為3000ms
   duration:1200,
   indicatorcolor:"#fff",     //設(shè)置底部小圓點(diǎn)為白色
   indicatoractivecolor:"pink",   //當(dāng)圓點(diǎn)狀態(tài)為active是，呈現(xiàn)粉色
   ......
   }
 })

• tabbar切換良好交互 
  
  這個(gè)功能實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單，主要是將app.json文件中的tabBar里設(shè)置樣式、頁(yè)面路徑、圖片路徑，用列表list來(lái)渲染,詳細(xì)請(qǐng)參考以下代碼

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

• 寫日記 
  
  因?yàn)榫庉嬋沼浐驼故救沼浽趦蓚€(gè)不同的頁(yè)面，所以兩個(gè)頁(yè)面之間需要傳遞日記的內(nèi)容，這里我主要是借助wx.setLocalStorage(key:key,value:value)將需要傳遞的數(shù)據(jù)存放到本地緩存中，雖然我們不建議將關(guān)鍵信息全部存在localStorage，以防用戶換設(shè)備的情況。 但是在我們沒(méi)有更好的數(shù)據(jù)共享的方式前可以一試。最后我們?cè)谌沼浟斜眄?yè)面通過(guò)wx.getStorage(key)得到我們之前存儲(chǔ)的東西，然后再頁(yè)面上顯示出來(lái)。在日記列表頁(yè)面可以對(duì)你的日記進(jìn)行刪除和修改操作，刪除就很簡(jiǎn)單了，直接利用wx.clearStorage()將你存儲(chǔ)在localSroage里的數(shù)據(jù)全部清空就可以了。這里可以借助setTimeout來(lái)實(shí)現(xiàn)一個(gè)假的效果，修改的話，就是通過(guò)wx.navigateTo()里的url將日記的text作為參數(shù)傳遞給編輯頁(yè)面，詳情見代碼：

日記列表頁(yè)面代碼：

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

修改頁(yè)面，在onLoad()獲取參數(shù)：

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

• 話題評(píng)論 
  
  頁(yè)面展示的話題詳情和已經(jīng)展示的評(píng)論是從mock里獲取的數(shù)據(jù)，評(píng)論功能的實(shí)現(xiàn)主要是借助數(shù)組的concat()方法，將你添加的評(píng)論和原有的評(píng)論連接起來(lái)，
  首先在data里面我們有個(gè)空的commentList來(lái)存放新發(fā)布的評(píng)論，獲取評(píng)論內(nèi)容等在這就不細(xì)講，重點(diǎn)看一下發(fā)布評(píng)論的代碼：

    submitComment: function() {
      var that = this, conArr = [];
       //此處延遲的原因是 在點(diǎn)發(fā)送時(shí) 先執(zhí)行失去文本焦點(diǎn) 再執(zhí)行的send 事件 此時(shí)獲取數(shù)據(jù)不正確 故手動(dòng)延遲100毫秒
       setTimeout(function () {
         if (that.data.comment.trim().length > 0) {
           conArr.push({
             avatar:that.data.avatar,     //在onLoad(）里通過(guò)wx.getUserInfo()獲取了用戶信息
             username:that.data.username,
             time:util.formatTime(new Date()),
             content:that.data.comment,    //評(píng)論的text包括表情
             images:that.data.photos      //評(píng)論所帶圖片地址
           })
           that.setData({
             commentList: that.data.commentList.concat(conArr),
             comment: "",//清空文本域值
             photos:[],
             isShow: false,    
             photoShow:false,
           })
         } else {
           that.setData({
             comment: "",//清空文本域值
             photos:[],
           })
         }
       }, 100)
    }

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

   getLocation: function() {
  let that=this;
  wx.getLocation({      //首先獲得經(jīng)緯度
   type: 'wgs84',
   success:(res)=> {
     var latitude = res.latitude
     var longitude = res.longitude
     demo.reverseGeocoder({      //然后借助騰訊位置服務(wù)提供個(gè)逆地址解析api將經(jīng)緯度轉(zhuǎn)換成具體的地址
       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);
       }
     });
   }
  })
   }

• 下拉刷新評(píng)論 
  
  這里主要是借助了微信小程序的視圖容器scroll-view，可滾動(dòng)區(qū)域，設(shè)置屬性scroll-y="true",表示可沿著y軸滾動(dòng)，需要注意使用豎向滾動(dòng)時(shí)，需要給<scroll-view/>一個(gè)固定高度，我這里是通過(guò)wx.getSystemInfo()得到windowHeight,然后將固定高度設(shè)置為和windowHeight一樣。當(dāng)滾動(dòng)到評(píng)論底部時(shí)，會(huì)觸發(fā)會(huì)觸發(fā) scrolltolower 事件，在事件對(duì)應(yīng)的處理方法里我們將預(yù)先設(shè)置好的評(píng)論信息加載到頁(yè)面上。這樣就形成一個(gè)下拉加載的效果。參考代碼:

  //哈哈，方法命名有點(diǎn)粗糙~
  refresh:function(){
  console.log('bottom')
  let that = this,conArr = []
  if (that.data.refreshTime < 3) {     //refreshTime是在data里定義的一個(gè)常量，用來(lái)控制加載次數(shù)，這里最多3次
  for(let i=0;i<3;i++){
    conArr.push({
      'avatar':'../../images/avatar.jpg',
      'username':'西瓜君',
      'content':'簡(jiǎn)直66666',
      'time':util.formatTime(new Date())   //獲取當(dāng)前時(shí)間，utils文件夾下的util.js里定義了formateTime()方法，詳情見源碼~
    })
  }
  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;
  }

• 上傳圖片 
  
  通過(guò)wx.chooseImage(OBJECT)來(lái)從本地相冊(cè)選擇圖片或使用相機(jī)拍照，具體參數(shù)如圖：

主要代碼：

 wx.chooseImage({
  count: 1, // 默認(rèn)9  表示可選擇圖片的數(shù)量
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
  success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
      var tempFilePaths = res.tempFilePaths; 
      this.setData({
      photos: tempFilePaths
      })
   }
 })
 .....

• 帶emoji輸入框 
   

  

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

<!-- emoji表情盒子 -->
  <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="http://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: "?-