這裡使用的是開源是的外掛程式,做的很不錯
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...