头图

微信小程序云开发--证件照(2)(页面结构)

橙小城

微信证件照小程序开发,第二话,由于最近工作比较忙,更新没有那么及时,不过还是会坚持更新的,今天更新总体页面结构,以及首页图片数据库存储,接口调用等

掘金更新比较早,之后会同步更新

页面UI(自己布局的,赶不上大佬的水准😄)

首页

image.png

我的证照

image.png

首页(图片存储以及数据库调用)

用户进入首页时,获取用户的openid,存入数据库,便于后面授权

image.png
首先在数据库创建集合

image.png
把图片上传云存储,拿到File ID

image.png
前端请求数据库拿到图片数组

//获取标题图片
    getBannerList(){
        wx.showLoading({ title: '加载中', })
        const that = this
        const db = wx.cloud.database()
        db.collection('bannerList').get().then(res => {
            res.data.forEach(e => {
                e.imgUrl = e.imgUrl.trim()
            });
          that.setData({
            bannerList:res.data
          })
          wx.hideLoading()
        })
    },

tips:

新建的数据集合一定要改下“所有用户可读”,不然获取不到数据

image.png

我的页面(用户授权)

微信的用户授权弹框,今年四月份新改的逻辑,不在用wx.getUserInfo,目前是用wx.getUserProfile,具体可看官方解释
从数据库中读取用户信息,如果有用户昵称,则已授权,没有则弹出授权弹框

// 新的获取用户信息事件回调
getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        this.setUserInfo(res.userInfo)
      }
    })
  },
// 更新设置用户信息
    setUserInfo (userInfo) {
        this.setData({
            authorized: !!userInfo.nickName,
            userInfo: {
                ...this.data.userInfo,
                ...userInfo
            }
        })
        const openid = app.globalData.openid
        if (!openid) return
        wx.cloud.callFunction({
            name: 'setUserInfo',
            data: {openid, data: userInfo}
        }).then(res => {
            console.log(res)
        })
    },

总结

可能有点乱,功能走通后,之后会分享出我的代码,应该会清楚一点,目前正在加紧开发中。。。

之后会持续分享,请持续关注哦!

码字不易,记得点赞哟!

阅读 673
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏