微信小程序 Image API實(shí)例詳解
選擇圖片時(shí)可設(shè)置圖片是否是原圖,圖片來(lái)源。這用的也挺常見(jiàn)的,比如個(gè)人中心中設(shè)置頭像,可以與wx.upLoadFile()API使用
主要方法:
wx.chooseImage(object)
wxml
<!--監(jiān)聽(tīng)按鈕--> <button type="primary" bindtap="listenerButtonChooseImage">點(diǎn)擊我選擇相冊(cè)</button> <!--通過(guò)數(shù)據(jù)綁定的方式動(dòng)態(tài)獲取js數(shù)據(jù)--> <image src="{{source}}" mode="aspecFill" style="width: 640rpx; height: 640rpx"/>
js
Page({ data:{ // text:"這是一個(gè)頁(yè)面" source: '' }, /** * 選擇相冊(cè)或者相機(jī) 配合上傳圖片接口用 */ listenerButtonChooseImage: function() { var that = this; wx.chooseImage({ count: 1, //original原圖,compressed壓縮圖 sizeType: ['original'], //album來(lái)源相冊(cè) camera相機(jī) sourceType: ['album', 'camera'], //成功時(shí)會(huì)回調(diào) success: function(res) { //重繪視圖 that.setData({ source: res.tempFilePaths }) } }) },
wx.previewImage(object)
這又是一個(gè)奇葩API真實(shí)搞不懂怎么用這個(gè)。先模仿下官方咋使用但是沒(méi)有效果,搞懂了在補(bǔ)充下自己的使用
wxml
<!--圖片預(yù)覽--> <button type="primary" bindtap="listenerButtonPreviewImage">展示圖片</button>
js
Page({ data:{ // text:"這是一個(gè)頁(yè)面" source: '' }, /** * 預(yù)覽圖片 又一個(gè)奇葩接口 */ listenerButtonPreviewImage: function() { wx.previewImage({ current: 'http://img.souutu.com/2016/0511/20160511055648316.jpg', urls: [ 'http://img.souutu.com/2016/0511/20160511055648316.jpg', 'http://img.souutu.com/2016/0511/20160511055650751.jpg', 'http://img.souutu.com/2016/0511/20160511054928658.jpg' ], //這根本就不走 success: function(res) { console.log(res); }, //也根本不走 fail: function() { console.log('fail') } }) } })
感謝閱讀本文,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
微信小程序 sha1 實(shí)現(xiàn)密碼加密實(shí)例詳解
這篇文章主要介紹了微信小程序 sha1 實(shí)現(xiàn)密碼加密實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07JS前端可視化canvas動(dòng)畫(huà)原理及其推導(dǎo)實(shí)現(xiàn)
這篇文章主要為大家介紹了JS前端可視化canvas動(dòng)畫(huà)原理及其推導(dǎo)實(shí)現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序Server端環(huán)境配置詳解(SSL, Nginx HTTPS,TLS 1.2 升級(jí))
這篇文章主要介紹了微信小程序Server端環(huán)境配置詳解(SSL, Nginx HTTPS,TLS 1.2 升級(jí))的相關(guān)資料,需要的朋友可以參考下2017-01-01Nest.js 之依賴(lài)注入原理及實(shí)現(xiàn)過(guò)程詳解
這篇文章主要為大家介紹了Nest.js 之依賴(lài)注入原理及實(shí)現(xiàn)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01JS實(shí)現(xiàn)一個(gè)微信錄音功能過(guò)程示例詳解
這篇文章主要介紹了JS實(shí)現(xiàn)一個(gè)微信錄音功能過(guò)程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02微信小程序 image組件binderror使用例子與js中的onerror區(qū)別
這篇文章主要介紹了微信小程序 image組件binderror使用例子與js中的onerror區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-02-02微信小程序 setData使用方法及常用錯(cuò)誤解決辦法
這篇文章主要介紹了微信小程序 setData使用方法及常用錯(cuò)誤解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05微信小程序 頁(yè)面跳轉(zhuǎn)事件綁定的實(shí)例詳解
這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)事件綁定的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文大家能夠理解并應(yīng)用小程序頁(yè)面跳轉(zhuǎn)及事件綁定的實(shí)例,需要的朋友可以參考下2017-09-09