Tang
《Days》核心代码总结（三）

《Days》核心代码总结（三）

大概是最后一次总结了。
这次更新了最初的彩蛋功能，时光机w
增加了足迹增减和自定义相册，以及分享相册的功能，分开来说。
足迹增减：
因为微信小程序的map属于所谓原生组件，所以操作起来很不方便，只能用cover-view代替button按钮，cover-image代替img，所以随之而来的问题就是，个人信息无法用点击按钮的方式获取了（腾讯要求必须用按钮获取用户信息），图片无法直接显示为图标，地图无法通过点击的方式进行功能方面的响应，这里用曲线救国的方式解决了。
增加足迹方面，使用了Github上的的exif.js提取照片内的GPS和日期信息，同样因为小程序的先天缺陷，不支持Image对象，需要对exif.js文件稍微改造一下，删掉涉及Image对象的部分，直接通过ArrayBuffer格式读取图片信息就可以了。另外因为小程序使用的火星坐标系，要对EXIF信息内的GPS信息进行一下换算。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
    wx.chooseImage({
      count: 1,
      sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      ...
        let path = res.tempFilePaths[0];
        wx.getFileSystemManager().readFile({
          filePath: path, //选择图片返回的相对路径
          //encoding: 'base64', //编码格式,默认ArrayBuffer
          success: re => { //成功的回调
            //获取EXIF信息
            EXIF.getData(re.data, function() {
              let gpslt = EXIF.getTag(this, "GPSLatitude")
              let gpslg = EXIF.getTag(this, "GPSLongitude")
              if (EXIF.getTag(this, "DateTime") != undefined) {
                let datetime = EXIF.getTag(this, "DateTime")
                date = datetime.substring(0, 4) + '年' + datetime.substring(5, 7) + '月' + datetime.substring(8, 10) + '日'
              } else {
                let com = require('../letter/common.js');
                date = com.today() + ' uploaded'
              }
              //无GPS信息的，手动选择
              if (gpslt == undefined || gpslg == undefined) {
                ...
                wx.chooseLocation({
                  success: res => {
                    latinum = res.latitude
                    langinum = res.longitude
                    that.upImage(path, latinum, langinum, date)
                  },
                  fail: re => {
                ...
                    return
                  }
                })
              }
              else {
                latinum = gpslt[0] + gpslt[1] / 60 + gpslt[2] / 3600
                langinum = gpslg[0] + gpslg[1] / 60 + gpslg[2] / 3600
                let gjcgps = GPS.gcj_encrypt(latinum, langinum)
                that.upImage(path, gjcgps.lat, gjcgps.lon, date)
              }
            })
          }
        })
      }
    })

分享相册方面，通过全局变量fpcode和incomeid的内容判断当前相册以什么形式分享出去，在用户点击链接后，为了快速查到有没有这个相册，以及这个相册的所有人是谁，在数据库新建一个表专门存储这两项信息，查不到的，弹出新建相册提示。为了保证创建者的编辑权限，防止别人对相册内容进行增减，这里引入一个变量sharehidden，当打开别人的相册时，隐藏增减按钮，如果是自己的相册则显示按钮。

wxml部分：

1
2
3
4
<covers class="buttons">
<cover-view class="butt del" bindtap="delfp" style="display:{{(sharehide||delhidden)?'none':'block'}}">减</cover-view>
<cover-view class="butt add" bindtap="newfp" style="display:{{(sharehide||hidden)?'none':'block'}}">增</cover-view>
</covers>

js部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    let that=this
    if (that.data.needrefresh == true) {
      //查询fpcode是否存在，不存在的提示新建
      if (app.globalData.fpcode != undefined && app.globalData.fpcode != '')
      {
        that.setData({
          request: {
            fpcode: app.globalData.fpcode
          }
        })    
        wx.cloud.callFunction({
          name: 'getTarget',
          data: {
            //type: 'all',
            datas: that.data.request,
            table: app.globalData.database.fpcodes
          },
          success: res => {
            console.log(res)
            //若不存在该fpcode，提示新建
            if(res.result.data.length == 0){
              wx.showModal({
                title: '该提取码无主',
                content: '要新建一个吗？',
                showCancel: true,
                cancelText: '不！',
                confirmText: '要！',
                success: res => {
                  that.setData({
                    request:{
                      fpcode:app.globalData.fpcode,
                      _openid:app.globalData.openId
                    }
                  })
                  //新建fpcode
                  if (res.confirm) {
                    that.addTarget(app.globalData.database.fpcodes,that.data.request)
                    that.onLoad()
                  }
                  else{
                    app.globalData.fpcode=''
                  }
                }
              })
            }
            else {
              that.onLoad()
            }
          },
          fail: re => {
            wx.showToast({
              icon: 'none',
              title: '读取失败'
            })
            console.log(re)
            console.log("table: " + app.globalData.database.fpcodes + " request: " + JSON.stringify(that.data.request))
            that.setData({
              needrefresh: true
            })
          },
          complete: () => {
            that.setData({
              request: {}
            })
          }
        })
      }
      //无fpcode直接读取本人地图
      else{
        that.onLoad()
      }
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let that = this
    wx.setTabBarStyle({
      color: '#FFFFFF',
      selectedColor: '#FFC408',
      backgroundColor: '#EC113B',
      borderStyle: 'white'
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({})
        }
      }
    })

    if (options != undefined && options != null) {
      if (options.fpcode != null && options.fpcode != '') {
        app.globalData.fpcode = options.fpcode
      }
      app.globalData.incomeid = options.id
    }
    if (app.globalData.openId == '') {
      //读取页面时调用login云函数，返回用户openid
      wx.cloud.callFunction({
        name: 'login',
        success: res => {
          app.globalData.openId = res.result.openid

          if (that.userInfoReadyCallback) {
            that.userInfoReadyCallback(res)
          }
          that.getMarks()
        }
      })
    } else {
      that.getMarks()
    }
    that.setData({
      needrefresh: false
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    let that = this
    let img = '../../images/share.png'
    let fppath = 'pages/map/map?fpcode=' + app.globalData.fpcode + '&id=' + app.globalData.openId
    let fptitle = '猫&鱼的时光机'
    //有提取码的，标题写入提取码
    if (app.globalData.fpcode != undefined && app.globalData.fpcode != '') {
      fptitle = '提取码：' + app.globalData.fpcode
    }
    //通过链接打开的，传出ID为分享者ID
    if (app.globalData.incomeid != undefined && app.globalData.incomeid != ''){
      fpath = 'pages/map/map?fpcode=' + app.globalData.fpcode + '&id=' + app.globalData.incomeid
    }
    if (that.data.footprints.length > 0) {
      if(that.data.pic_addr != ''){
        img = that.data.pic_addr
      }
      else {
        const sele = Math.random();
        let num = Math.floor(sele * that.data.footprints.length)
        img = that.data.footprints[num].add
      }
    }
    console.log("title: "+fptitle +" path: "+fppath +" img: "+img)
    return {
      title: fptitle,
      path: fppath,
      imageUrl: img
    }
  },

自定义相册部分比较简单，和分享相册功能是前后配合使用的。新引入一个页面文件fpcode.wxml，用户输入的内容存入全局变量fpcode，直接返回map页面后，再判断fpcode的值打开相应相册，如果留空则读取当前用户的相册，如果fpcode不存在，则提示新建。

fpcode.wxml:

1
2
3
4
5
6
  <view class="new_cake">
      <input class="cake_title" placeholder-style="color:#91989F" placeholder="{{hint}}" focus="true" bindinput="title_input"/>
      <button class="cake_button"
     open-type="getUserInfo"
     bindgetuserinfo="onGetUserInfo" bindtap="send_cake">打  开</button>
  </view>

fpcode.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
  send_cake(res) {
    if(this.data.title==''){
      app.globalData.fpcode=''
    }
    else {
      app.globalData.fpcode = this.data.title
    }
    app.globalData.incomeid = ''
    wx.navigateBack({
      delta: 1
    })
  },
...

以上。

参考文献：

Exif.js 读取图像的元数据

使用js对WGS-84 ，GCJ-02与BD-09的坐标进行转换

exif-js

小程序云开发上传图片-到云存储并保存路径到数据库

小程序图片转Base64，方法总结。

微信小程序分享传递参数

 

码字很辛苦，转载请注明来自空间中的空间的《《Days》核心代码总结（三）》
2019-07-18   和谐小本子·专

评论

COPYRIGHT © ME | 豫ICP备16030167号 | THEME DESIGN BY  Miued and Memory