處理微信小程式上傳頭像裁剪功能。

2022-09-02 10:21:09 字數 1783 閱讀 4822

這裡使用的是開源是的外掛程式,做的很不錯 

git下來之後,如果急著使用效果。可以直接到example目錄下 把we-cropper資料夾直接放在自己的小程式專案中,現在我使用的是**裁剪上傳的功能。

所以需要兩個頁面來共同完成。

a頁面 展示修改裁剪後**的頁面,b頁面的原來實現裁剪功能的頁面。

a頁面的** :通過事件出發獲取相簿的api後,拿到位址,攜帶位址跳轉到b頁面

wx.chooseimage(`,

})},

})——————————————————————————————————————

b 頁面的wxml :

class="upload"

bindtap="uploadtap">

重新選擇

class="getcropperimage"

bindtap="getcropperimage">

確定————————————————————————————————

b頁面的css:

@import "../../style/common.wxss";

page

.cropper

.cropper-buttons

————————————————————————————————————

b頁面的js   關鍵的頁面

import wecropper from '../../we-cropper/we-cropper.js'

const device = wx.getsysteminfosync()

const width = device.windowwidth

const height = device.windowheight - 50

page(}},

touchstart(e) ,

touchmove(e) ,

touchend(e) ,

//這個是儲存上傳裁剪後的的方法

getcropperimage() )

function uploadimage(filepath, cb) ,

formdata: ,

success: function (res) )

console.log('上傳成功')

console.log(res);

wx.showtoast()

cb(res);

},fail: function (res) )

},})

}} else

})},

uploadtap()

})},

onload(option) = this.data

if (option.src) )

.on('beforeimageload', (ctx) => )

}).on('imageload', (ctx) => )

.on('beforedraw', (ctx, instance) => )

.updatecanvas()}}

})——————————————————————————————————————————

這裡只是寫了的上傳頭像裁剪的功能,其他的還有常規的的,裁剪網路圖,新增水印,區域性裁剪的功能。有興趣可以在example目錄夾下有對應的原始碼

小程式上拉載入更多 微信小程式搜尋分頁功能實現

這裡以搜尋歌曲為例 前端 搜尋 正在載入更多.已載入全部 樣式 page else that.setdata searchloadingcomplete true,把 沒有資料 設為true,顯示 searchloading false 把 上拉載入 的變數設為false,隱藏 keywordsea...

微信小程式 上拉載入

oa系統中,領導要對員工的的申請進行審批,如此多的員工,不可能一下子都顯示出來,需要後台進行分頁,每次上拉觸底載入一頁,每次上拉觸底載入一頁。注 因為各方面原因,不能上傳源 只提供思路和偽 data onload function options onreachbottom function ini...

微信小程式 上下左右滑動

data handletouchmove function event let currentx event.touches 0 pagex let currenty event.touches 0 pagey let tx currentx this.data.lastx let ty curre...