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

发布者: huquanjohn | 发布时间: 2017-2-22 19:23| 查看数: 5751| 评论数: 1|帖子模式

一：下拉刷新/上拉加载

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

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

1

2

3

4

5

6

7

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh":true
  }

2.然后Page里操作 onPullDownRefresh onReachBottom

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

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

详细代码

// 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，再传入服务器进行登录操作

wx.login({
      success: function(res) {        if (res.code) {          //发起网络请求
          wx.request({
            url: ',
            data: {
              code: res.code
            },success(res){
                wx.setStorageSync("sscode",res.data.sscode);
            }
          })
        } else {         
         console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
});

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

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

$c=file_get_contents("".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即可。

wx.request({
            url: ',
            data: {
              sscode: wx.getStorageSync("sscode")
            },success(res){
                wx.setStorageSync("ssuser",res.data);
            }
          })

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

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: ',
                    data: {
                      code: res.code,
                      nickname:nickName,
                                        user_head:avatarUrl,
                                        gender:gender
                    },success(res){
                        //登录成功
                      wx.setStorageSync("sscode",res.data.sscode);
                    }
                  });
                } 
             });     
        } else {         
         console.log('获取用户登录态失败！' + res.errMsg)
        }
      }
});

两个微信

收藏0

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

最新评论

浏览过的版块

轻源码让程序更轻更快