微信小程序分享 拍照/摄像 定位

界面效果图

分享

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(){

  }
})

摄像

定位

app.json 新增授权

 "permission": {
    "scope.userLocation": {
      "desc": "司机位置定位" //描述用途
    }
  },

效果图

    <view style="margin-top: 20rpx;display: flex;justify-content:space-between;align-items: center;width: 95%;margin-left: 2%;margin-right: 2%;border-top: 1rpx solid #f7f7f7;padding-top: 10rpx;padding-bottom: 20rpx;" bindtap="handleLocation">
     <text class="entry-title">当前定位</text>
     <text class="entry-value">{{address}}</text>
     <image style="width: 30rpx;height:35rpx;" src="/images/location.png"></image>
    </view>

/*******************************************************/
/**
   * 定位
   */
  handleLocation(){
    var that = this
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success (res) {
        const latitude = res.latitude
        const longitude = res.longitude
        wx.chooseLocation({
          latitude,
          longitude,
          success(res){
            that.setData({
              address:res.address
            })
            console.log(res.address);
          }
        })
      }
    })
  }

demo 地址

https://git.weixin.qq.com/depressiom/demo.git