小程式分享

ShariseMo發表於2018-05-21

通用方法（模組化）

ajax請求： wx.request（）

// wx.request 封裝  post: function(url = '', json, cb = () => {}, cbErr) {    var _this = this    var token = ''    let userInfo = wx.getStorageSync('userInfo')    wx.getStorage({      key: 'token',      success: function(res) {        token = res.data        json.token = token        json.business_no = business_no        wx.request({          url: _this.globalData.web_url + url,          header: {            'content-type': 'application/x-www-form-urlencoded'          },          method: 'POST',          data: json,          success: function(res) {            if (res.data.code == 200) {              cb(res)            } else if (res.data.code == 301) {              _this.handleLogin(userInfo)            } else if (res.data.code == 41000) {              wx.showToast({                title: res.data.msg || '操作失敗,請稍後再試',                icon: 'none',                duration: 2000              })            }          },          fail: function(err) {            console.log('err:', err)            wx.showToast({              title: err || '操作失敗,請稍後再試',              icon: 'none',              duration: 2000            })          }        })      }    })  },複製程式碼

日期時間格式化： dateFormat（）

  
  // 格式化整數  formatNumber(n) {    n = n.toString()    return n[1] ? n : '0' + n  },  // 格式化時間日期  formatTime(date, format = 'yyyy-mm-dd hh:mm') {    var _this = this    var date = date * 1000    if (date) {      const year = new Date(date).getFullYear()      const month = new Date(date).getMonth() + 1      const day = new Date(date).getDate()      const hour = new Date(date).getHours()      const minute = new Date(date).getMinutes()      const second = new Date(date).getSeconds()      if (format == 'yyyy-mm-dd') {        return [year, month, day].map(_this.formatNumber).join('/')      } else {        return (          [year, month, day].map(_this.formatNumber).join('/') +          ' ' +          [hour, minute].map(_this.formatNumber).join(':')        )      }    }  },  
複製程式碼

獲取裝置型號

//獲取裝置型號  getDevice() {    wx.getSystemInfo({      success: function(res) {        console.log('device-model:', res)        if (res.model.indexOf('iPhone X') != -1) {          this.globalData.deviceType = 1          console.log('deviceType324234', _this.globalData.deviceType)        }      }    })  },複製程式碼

資料儲存

關於同步快取和非同步快取的區別

以Sync（同步，同時）結尾的都是都是同步快取，二者的區別是，非同步不會阻塞當前任務，同步快取直到同步方法處理完才能繼續往下執行。

非同步快取

wx.setStorage({
  key:'token',
  data: '231321313123'
})
wx.getStorage({
  key:'token',
  success: function(res){
     console.log(res.data)
  }
})
wx.removeStorage({
   key: 'token',
   success: function(res){
     cosnole.log(res.data)
   } 
})複製程式碼

小程式合成圖片文字並儲存到本地

技術點：

canvas【wx.drawImage(), wx.fillText(), wx.draw()】
wx.canvasToTempFilePath(false,callback) // 把當前畫布指定區域的內容匯出生成指定大小的圖片，並返回檔案路徑
wx.saveImageToPhotosAlbum() //將檔案儲存到本地相簿，注意要在圖片生成的回撥函式中執行

注意問題：

真機除錯的時候，圖片如果是網路圖片會顯示不出來，需要先呼叫wx.downloadFile將圖片快取下來

或者直接將圖片放在本地再進行合成

頁面：

<canvas canvas-id="shareCanvas" style="width:300px;height:300px;border:1rpx solid #ccc;"></canvas>複製程式碼

效果圖：

小程式但引數分享（邀請有禮）

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123'
    }
  }
})複製程式碼

可以將需要攜帶的引數放在path的頁面引數中，然後在頁面的onload（options）方法中的options獲取

分享時小程式封面圖片：

imageUrl

自定義圖片路徑，可以是本地檔案路徑、程式碼包檔案路徑或者網路圖片路徑，支援PNG及JPG，不傳入 imageUrl 則使用預設截圖。顯示圖片長寬比是 5:4