AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:02:03

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序实现下拉刷新/上拉加载,用户注册登录
相关的资讯,希望对您有帮助。

微信小程序实现下拉刷新/上拉加载,用户注册登录

一:下拉刷新/上拉加载微信小程序支持下拉刷新,上拉直接默认页面效果判断到底即可。1.下拉刷新要在app.json 配置enablePullDownRefresh:true1234567window:{backgroundTextStyle:light,navigationBarBackgro ...

一:下拉刷新/上拉加载

微信小程序支持下拉刷新,上拉直接默认页面效果判断到底即可。

1.下拉刷新要在app.json 配置 enablePullDownRefresh:true

1
2
3
4
5
6
7
window:{
    backgroundTextStyle:light,
    navigationBarBackgroundColor#fff,
    navigationBarTitleTextWeChat,
    navigationBarTextStyle:black,
    enablePullDownRefresh:true
  }


2.然后Page里操作 onPullDownRefresh onReachBottom


刷新操作 直接获取数据setData一下即可

上拉加载 要将旧数据加上新数据重新setData;


详细代码

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
// pages/forum/index.js
var app = getApp();
var base=require(../../js/base.js); 
Page({
  data:{
    images_site:app.images_site,
    per_page:0,
    isfirst:true
  },
  onReady:function(){
    wx.setNavigationBarTitle({
      title: 福鼎论坛
    });
  },
  onLoad:function(options){
    this.getForum();
  },
  getForum:function(isappend,per_page){
    var that=this;
    var isappend=isappend==undefined?false:true;
    var per_page=per_page==undefined?0:per_page;
    
    wx.request({
      url: app.site+/index.php?m=forum&ajax=1&per_page=+per_page,
      data: {},
      method: GET
      success: function(res){
        // success
         that.setData({isfirst:false});
        if(isappend){
          wx.showToast({title:翻页结束});
            var data=base.json_add(that.data.forumlist,res.data.data.list);
        }else{
            var data=res.data.data.list;
            wx.showToast({title:刷新了});
        }       
        that.setData({forumlist:data,per_page:res.data.data.per_page});
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
   
  onPullDownRefresh:function(){
      this.getForum();
       
      wx.stopPullDownRefresh();
  },
  onReachBottom:function(){
     if(!this.data.isfirst && this.data.per_page!=0){
        this.getForum(1,this.data.per_page);
        console.log(this.data.images_site);
        wx.showToast({title:到底了});
     }
      
  }
})

二:用户注册登录

微信小程序提供wx.login和wx.getUserInfo来实现用户登录和用户信息获取。

第一步、通过 wx.login 获取code,再传入服务器进行登录操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
wx.login({
      success: function(res) {        if (res.code) {          //发起网络请求
          wx.request({
            url: https://www.deitui.com/onLogin,
            data: {
              code: res.code
            },success(res){
                wx.setStorageSync(sscode,res.data.sscode);
            }
          })
        else {         
         console.log(获取用户登录态失败! + res.errMsg)
        }
      }
});

第二步、服务端通过code验证,返回登录Token

我们可以根据openid判断下用户是否已经注册了,没注册就注册一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$c=file_get_contents(https://api.weixin.qq.com/sns/jscode2session?appid=.APPID.&secret=.SECRET.&js_code=.$code.&grant_type=authorization_code);
$json=json_decode($c,true);
if($json[openid]){
    //登录成功
    $sscode=md5(rand(1100,8888).time());
    //将sscode在服务器缓存起来 登录直接判断即可
    
     
    $user=M(user)->selectRow(openid=.$json[openid]. AND xfrom=wxapp );
    if($user){
        //直接返回
       cache()->set(sscode.$sscode,$user[userid].$json[openid],3600*24);  
    }else{
        $userid=M(user)->insert(array(
            openid=>$json[openid],
            xfrom=>wxapp
        ));
       cache()->set(sscode.$sscode,$userid.$json[openid],3600*24);  
    }
    echo json_encode(array(
            sscode=>$sscode
        ));
}



第三步、将登录的Token保存在微信本地缓存

1
wx.setStorageSync(sscode,res.data.sscode);

这样就完成了微信登录步骤,我们获取服务器的时候带上Token即可。

1
2
3
4
5
6
7
8
wx.request({
            url: https://www.deitui.com/onLogin,
            data: {
              sscode: wx.getStorageSync(sscode)
            },success(res){
                wx.setStorageSync(ssuser,res.data);
            }
          })

另外如何获取用户信息,小程序没发现有服务端的获取用户信息接口,我们可以使用wx.getUserInfo在客户端获取信息,在登录的时候一起带上。

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
wx.login({
      success: function(res) {        
          if (res.code) {          //发起网络请求
           wx.getUserInfo({
              success: function(res){
                var userInfo = res.userInfo
                var nickName = userInfo.nickName
                var avatarUrl = userInfo.avatarUrl
                var gender = userInfo.gender //性别 0:未知、1:男、2:女 
                var province = userInfo.province
                var city = userInfo.city
                var country = userInfo.country
                  wx.request({
                    url: https://www.deitui.com/onLogin,
                    data: {
                      code: res.code,
                      nickname:nickName,
                                        user_head:avatarUrl,
                                        gender:gender
                    },success(res){
                        //登录成功
                      wx.setStorageSync(sscode,res.data.sscode);
                    }
                  });
                
             });     
        else {         
         console.log(获取用户登录态失败! + res.errMsg)
        }
      }
});

52阅读 | 0评论
你的回应
写文章

6936