微信小程式分享 拍照/攝像
阿新 • • 發佈:2022-05-10
介面效果圖
分享
index.wxml
<!--index.wxml--> <view class="container"> <view class="userinfo"> <block wx:if="{{canIUseOpenData}}"> <view class="userinfo-avatar" bindtap="bindViewTap"> <open-data type="userAvatarUrl"></open-data> </view> <open-data type="userNickName"></open-data> </block> <block wx:elif="{{!hasUserInfo}}"> <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像暱稱 </button> <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button> <view wx:else> 請使用1.4.4及以上版本基礎庫 </view> </block> <block wx:else> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </block> </view> <!-- <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> --> <button type="primary" style="margin-top: 20rpx;" open-type="share" bindtap="onShareAppMessage">分享</button> <button type="primary" style="margin-top: 20rpx;" bindtap="takePhoto">拍照/攝像</button> <button type="warn" style="margin-top: 20rpx;" bindtap="messageHandle">推送訊息</button> <!-- --> </view>
index.js
// index.js // 獲取應用例項 const app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), canIUseGetUserProfile: false, canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需嘗試獲取使用者資訊可改為false }, // 事件處理函式 bindViewTap() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad(options) { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } console.log(options); //轉發跳轉處理 // let tpage=options.tpage // let data_key=options.data_key // let data_value=options.data_value // if(tpage){ // wx.navigateTo({ // url: '/pages/'+options.tpage+'/'+options.tpage+'?'+data_key+"="+data_value // }) // } }, getUserProfile(e) { // 推薦使用wx.getUserProfile獲取使用者資訊,開發者每次通過該介面獲取使用者個人資訊均需使用者確認,開發者妥善保管使用者快速填寫的頭像暱稱,避免重複彈窗 wx.getUserProfile({ desc: '展示使用者資訊', // 宣告獲取使用者個人資訊後的用途,後續會展示在彈窗中,請謹慎填寫 success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) }, getUserInfo(e) { // 不推薦使用getUserInfo獲取使用者資訊,預計自2021年4月13日起,getUserInfo將不再彈出彈窗,並直接返回匿名的使用者個人資訊 console.log(e) this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }, /** * 分享 */ onShareAppMessage(res){ if(res.from === 'button'){ // 來自頁面轉發按鈕 console.log(res.target); } return{ title:'自定義轉發標題內容', path:'/pages/logs/logs' } }, /** * 拍照 */ takePhoto(){ wx.chooseMedia({ mediaType:['image','video'], sourceType:['album','camera'], maxDuration:60, camera:'back', success(res){ console.log(res); } }) }, /** * 推送訊息 */ messageHandle(){ } })