微信小程序-pinkDiary

wechat-pinkDiary

微信小程序-以粉粉日記APP爲參考作的一個日記本。

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

下載微信開發者工具，附上地址：https://mp.weixin.qq.com/debu... 下載好後就能夠進行開發了，不過呢，若是要發佈你的小程序呢，你要去申請AppId走各類流程，不過平時練練手能夠選擇無Appid進行開發，不過會有一些侷限。具體開發詳情你能夠去https://mp.weixin.qq.com 這裏瞭解。
在建立了一個微信小程序後，會自動生成一些基本文件： 

• page文件夾 頁面文件夾 包含你全部的頁面文件,至少包含.js .wxml .wxs後綴文件，.json可選

• utlis文件夾 通常放置一些全局須要使用的js文件

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

• app.json 配置一些全局數據，全部頁面都要在此處註冊

• app.wxml 內容顯示

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

效果預覽 

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

體驗動圖可到源碼查看

頁面註冊

"pages":[
    "pages/index/index",    //首頁，也就是tabBar裏「社區「對應的頁面
    "pages/my/index",       // tabBar「個人」頁面
    "pages/detail/index",    //首頁推薦內容的詳情頁 
    "pages/new/index",        // 編輯日記頁面
    "pages/diary/index",      //日記列表頁面
    "pages/logs/logs"
  ]

• 功能實現

• 輪播圖

• 寫日記

• 話題評論

• 帶emoji的輸入

• 上傳圖片

• 字體大小，顏色改變

• 地理定位

• 下拉刷新

• tabbar切換良好交互

• 獲取用戶信息

• 動態選擇日記日期

具體實現 

首先,在社區這一塊，我用到大量數據都是用mock來模擬數據，詳情可見Easy Mock Easy Mock是一個可視化工具，能快速生成模擬數據的服務，它能爲咱們提供一個數據接口url，而後使用wx.request({ url: url, .....})來發送數據請求，不得不說mock是前端人員的有力工具。

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

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,     //自動輪播
   interval:3000,     //輪播時間差爲3000ms
   duration:1200,
   indicatorcolor:"#fff",     //設置底部小圓點爲白色
   indicatoractivecolor:"pink",   //當圓點狀態爲active是，呈現粉色
   ......
   }
 })

• tabbar切換良好交互 
  
  這個功能實現起來比較簡單，主要是將app.json文件中的tabBar裏設置樣式、頁面路徑、圖片路徑，用列表list來渲染,詳細請參考如下代碼

  "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": "個人",
        "iconPath": "images/myNormal.png",
        "selectedIconPath": "images/mySelected.png"
      }]
   }

• 寫日記 
  
  由於編輯日記和展現日記在兩個不一樣的頁面，因此兩個頁面之間須要傳遞日記的內容，這裏我主要是藉助wx.setLocalStorage(key:key,value:value)將須要傳遞的數據存放到本地緩存中，雖然咱們不建議將關鍵信息所有存在localStorage，以防用戶換設備的狀況。 可是在咱們沒有更好的數據共享的方式前能夠一試。最後咱們在日記列表頁面經過wx.getStorage(key)獲得咱們以前存儲的東西，而後再頁面上顯示出來。在日記列表頁面能夠對你的日記進行刪除和修改操做，刪除就很簡單了，直接利用wx.clearStorage()將你存儲在localSroage裏的數據所有清空就能夠了。這裏能夠藉助setTimeout來實現一個假的效果，修改的話，就是經過wx.navigateTo()裏的url將日記的text做爲參數傳遞給編輯頁面，詳情見代碼：

日記列表頁面代碼：

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

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

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

• 話題評論 
  
  頁面展現的話題詳情和已經展現的評論是從mock裏獲取的數據，評論功能的實現主要是藉助數組的concat()方法，將你添加的評論和原有的評論鏈接起來，
  首先在data裏面咱們有個空的commentList來存放新發布的評論，獲取評論內容等在這就不細講，重點看一下發布評論的代碼：

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

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

  getLocation: function() {
  let that=this;
  wx.getLocation({      //首先得到經緯度
   type: 'wgs84',
   success:(res)=> {
     var latitude = res.latitude
     var longitude = res.longitude
     demo.reverseGeocoder({      //而後藉助騰訊位置服務提供個逆地址解析api將經緯度轉換成具體的地址
       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);
       }
     });
   }
  })
   }

• 下拉刷新評論 
  
  這裏主要是藉助了微信小程序的視圖容器scroll-view，可滾動區域，設置屬性scroll-y="true",表示可沿着y軸滾動，須要注意使用豎向滾動時，須要給<scroll-view/>一個固定高度，我這裏是經過wx.getSystemInfo()獲得windowHeight,而後將固定高度設置爲和windowHeight同樣。當滾動到評論底部時，會觸發會觸發 scrolltolower 事件，在事件對應的處理方法裏咱們將預先設置好的評論信息加載到頁面上。這樣就造成一個下拉加載的效果。參考代碼:

  //哈哈，方法命名有點粗糙~
  refresh:function(){
  console.log('bottom')
  let that = this,conArr = []
  if (that.data.refreshTime < 3) {     //refreshTime是在data裏定義的一個常量，用來控制加載次數，這裏最多3次
  for(let i=0;i<3;i++){
    conArr.push({
      'avatar':'../../images/avatar.jpg',
      'username':'西瓜君',
      'content':'簡直66666',
      'time':util.formatTime(new Date())   //獲取當前時間，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;
  }

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

主要代碼：

wx.chooseImage({
  count: 1, // 默認9  表示可選擇圖片的數量
  sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
  sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
  success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
      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結構：

<!-- 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: "☺-