wx原生小程序小功能_await wx.getstoragesync('openid');

1.登录程序

<!--index.wxml-->
<view class="container">
 <button wx:if="{{!hasUserInfo}}" bindtap="getUserProfile">获取头像昵称</button>
 <view class="userinfo">
   <image src="{{userInfo.avatarUrl}}"></image>
   <view>{{nickName}}</view>
   <view>{{userInfo.nickName}}</view>
 </view>
</view>
1
2
3
4
5
6
7
8
9

<!--index.js-->
data:{
    hasUserInfo: false,
    userInfo:{}
  },
  getUserProfile:function(){
    wx.getUserProfile({
      desc: '获取用户信息',
      success:(res) =>{
        console.log(res.userInfo);
        this.setData({
          hasUserInfo:true,
          userInfo:res.userInfo
        })
      }
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!--index.css-->
/* pages/my/my.wxss */
.userinfo{
  display: flex;
  width: 300rpx;
  height: 300rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

1
2
3
4
5
6
7
8
9
10
11

2.微信云开发

1.小程序的get 请求数据

在js文件中使用get方法获取数据

onShow: function () {
 const db = wx.cloud.database()
 var that = this
 db.collection('UpDataLog').orderBy('time','desc').get({
   success: function(res) {
     that.setData({
       list:res.data
     })
   }
 })
},
1
2
3
4
5
6
7
8
9
10
11

在data定义list集合

然后在wxml中去使用for循环渲染数据

2.css样式

1. 圆角边框

border-radius:20rpx;
1

3.功能

1.排序

使用.onderBy()来进行渲染列表的排序

2.多张图片的渲染

3.监听页面的向上还是向下滑动

//监听用户滑动页面事件
  onPageScroll:function(e){
    if (e.scrollTop <= 0) {
      // 滚动到最顶部
       e.scrollTop = 0;
     } else if (e.scrollTop > this.data.scrollHeight) {
       // 滚动到最底部
       e.scrollTop = this.data.scrollHeight;
     }
     if (e.scrollTop > this.data.scrollTop || e.scrollTop >= this.data.scrollHeight) {
       //向下滚动 
       console.log('向下 ', this.data.scrollHeight)
       this.getTabBar().setData({
        show:false})
     } else {
       //向上滚动 
       console.log('向上滚动 ', this.data.scrollHeight)
       this.getTabBar().setData({
        show:true
      })
     }
     //给scrollTop重新赋值 
     this.setData({
       scrollTop: e.scrollTop
     })
  },
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

4.轮播图片的放大

编写图片数组imgList

wxml文件

js文件中编写方法：preview

如果是组件中的话，方法必须写在methods中

   // 预览图片，放大预览
  preview(event){
    let index = event.currentTarget.dataset.index
    // console.log(this.data.imgList);
    // console.log(data.imgList);
    // console.log('我点了');
    wx.previewImage({
      current: this.data.imgList[index], //当前显示图片的http链接
      urls: this.data.imgList //需要预览的图片HTTP链接列表
    })
  },
1
2
3
4
5
6
7
8
9
10
11

5.九宫格图片放大

第一张图

2.两张图片点击放大

6.获取当前位置

7.查看本地缓存

8.浏览量更新

9.获取当前时间

let dataTime
    let Time
    let yy = new Date().getFullYear()
    let mm = new Date().getMonth()+1
    let dd = new Date().getDate()
    let hh = new Date().getHours()
    let mf = new Date().getMinutes()<10?'0'+new Date().getMinutes():
    new Date().getMinutes()
    let ss = new Date().getSeconds()<10?'0'+new Date().getSeconds():
    new Date().getSeconds()
    dataTime = `${yy}-${mm}-${dd}`;
    Time = `${hh}:${mf}:${ss}`;
1
2
3
4
5
6
7
8
9
10
11
12

10.点赞

1.点赞效果的实现

2.点赞逻辑

// 点赞了
  dianzan(){
    let that =this
    // console.log('点赞了',this.data.prize);
    // 如果prize的值为false 证明点击点赞
    if(this.data.prize == false){
      // 需要获取用户的呢成和openid openid相当于你在此小程序里面的身份证  通过openid去识别用户
      // 此点赞用户为该动态的第一个点赞者
      if (!that.data.list.prizelist) {
        console.log('第一个');
        // 获取到用户呢陈和openid
        let nick = wx.getStorageSync('userInfo')
        let openidd= wx.getStorageSync('openid')
        // prizelist应该为一个数组
        let prizelist = [{nick:nick.nickName,openid:openidd}]
        // let prizelist = {nick:nick.nickName,openid:openidd}
        // 将获取到的用户信息写到该条动态数据的点赞列表里
        db.collection('mryang').doc(that.data.list._id).update({
          data:{
            prizelist:prizelist
          }
        })//点赞成功的反馈
        .then(res=>{
          that.getlist()  //更新点赞
          wx.showToast({
            title: '点赞成功',
            icon:'none'
          }) 
          that.setData({
            prize:true,
          })
        })
        // console.log(prizelist);
        // return      
      }else{  //不是第一个点赞的
        console.log('不是第一个');
        // 获取到用户呢陈和openid
        let nick = wx.getStorageSync('userInfo')
        let openidd= wx.getStorageSync('openid')
        // prizelist应该为一个数组
        // let prizelist = [{nick:nick.nickName,openid:openidd}] //获取点赞者的信息
        let newprizelist = that.data.list.prizelist
        newprizelist.push({nick:nick.nickName,openid:openidd})
        // 将获取到的用户信息写到该条动态数据的点赞列表里
        db.collection('mryang').doc(that.data.list._id).update({
          data:{
            prizelist:newprizelist
          }
        })//点赞成功的反馈
        .then(res=>{
          that.getlist()  //更新点赞
          console.log(res);
          wx.showToast({
            title: '点赞成功',
            icon:'none'
          }) 
          that.setData({
            prize:true,
          })
        })
        that.setData({
          prize:true,
        })
      }
    }    
    else{  //证明点击点赞取消点赞

      // 获取点赞列表
      let prizelist = that.data.list.prizelist
      console.log(prizelist);
      // 从点赞列表里面查询此点赞列表的openid
      for(var i=0;i<prizelist.length;i++){
        console.log(prizelist[i].openid);
        // 进行判断
        if(prizelist[i].openid == wx.getStorageSync('openid')){ //找到以后删除用户点赞数据
          prizelist.splice(i,1) //表示从第i条数据开始删除1条数据
          // 删除以后重新更新数据
          db.collection('mryang').doc(that.data.list._id).update({
            data:{
              prizelist:prizelist
            }
          })//点赞成功的反馈
          .then(res=>{
            that.getlist()  //更新点赞
            wx.showToast({
              title: '取消点赞',
              icon:'none'
            }) 
            that.setData({
              prize:false,
            })
          })
          break
        }
      }
    }
  },
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

3.根据id获取数据

// 通过id值去获取本条数据
  getlist(){
    console.log('本条数据id',this.data.list._id);
    const db = wx.cloud.database();
    var Id = this.data.list._id
    db.collection('mryang').doc(Id).get().then(res =>{
      console.log(res.data);
      this.setData({
        list:res.data
      })
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12

11. 获取openid

}),
    //获取code
    wx.login({
      success:(res)=>{
        console.log(res);
        let code = res.code
        // 通过code换取openid
        wx.request({
          url:'https://api.weixin.qq.com/sns/jscode2session?appid='+'wx63794d051326d9aa' + '&secret=' + 'e472d43d52d9d71bda113bc9ca07cfee' + '&js_code=' + code + '&grant_type=authorization_code',
          success:(res)=>{
            console.log(res.data.openid);
            wx.setStorageSync('openid', res.data.openid)
          }
        })
      }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

清楚openid

12.判断用户是否登录，如果没有登录，则跳回到登录页

13.设置一个启动页

可以通过设置启动页面顺序来实现此功能

在启动页的js文件中设置一个定时器，便可以实现此功能

14.页面标题的修改

15.通过云函数获取openid

创建云函数

通过调用云函数直接返回openid，并将openid缓存

16.开启下拉刷新

在app.jaon开启下拉刷新

17.组件onload方法的实现

在组件Component中想实现onload的话必须将方法写在lifetimes中