這篇文章主要介紹微信小程序中如何實現(xiàn)相冊選擇和拍照,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)服務(wù)項目包括龍港網(wǎng)站建設(shè)、龍港網(wǎng)站制作、龍港網(wǎng)頁制作以及龍港網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,龍港網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到龍港省份的部分城市,未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!微信小程序 拍照和相機選擇詳解
前言:
小程序中獲取圖片可通過兩種方式得到,第一種是直接打開微信內(nèi)部自己的樣式,第一格就是相機拍照,后面是圖片,第二種是彈框提示用戶是要拍照還是從相冊選擇,下面一一來看。
選擇相冊要用到wx.chooseImage(OBJECT)函數(shù),具體參數(shù)如下:
直接來看打開相機相冊的代碼:
Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var that = this; wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認(rèn)二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 that.setData({ tempFilePaths: res.tempFilePaths }) } }) }, })
方法一效果圖如下:
個人認(rèn)為第二種用戶體驗要好一點,效果如下:
點擊獲取彈框提示,代碼如下:
Page({ data: { tempFilePaths: '' }, onLoad: function () { }, chooseimage: function () { var that = this; wx.showActionSheet({ itemList: ['從相冊中選擇', '拍照'], itemColor: "#CED63A", success: function (res) { if (!res.cancel) { if (res.tapIndex == 0) { that.chooseWxImage('album') } else if (res.tapIndex == 1) { that.chooseWxImage('camera') } } } }) }, chooseWxImage: function (type) { var that = this; wx.chooseImage({ sizeType: ['original', 'compressed'], sourceType: [type], success: function (res) { console.log(res); that.setData({ tempFilePaths: res.tempFilePaths[0], }) } }) } })
文件的臨時路徑,在小程序本次啟動期間可以正常使用,如需持久保存,需在主動調(diào)用 wx.saveFile,在小程序下次啟動時才能訪問得到。
布局文件:
<button style="margin:30rpx;" bindtap="chooseimage">獲取圖片</button> <image src="pw_tempFilePaths " catchTap="chooseImageTap" mode="aspectFit" style="width: 100%; height: 450rpx" />
以上是“微信小程序中如何實現(xiàn)相冊選擇和拍照”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!