小程序登录授权及上拉触底更新

小程序登录授权

1.前端首先调用wx.login获取code
2.然后通过wx.getUserInfo来获取iv,userInfo, encryptedData这几个变量。
3.然后调用后台提供的接口，然后传递参数来获取我们需要的东西
4.openId:用户在小程序中唯一编号

代码开发步骤:

绑定登录事件, 获取用户授权, 拿到用户相关信息
调用wx.login获取code
发送登录请求, 传入用户相关信息和code
登录成功, 修改文案
登录成功时, 把用户昵称存入缓存
在onload里获取缓存的昵称, 若有, 就修改文案
点击登录按钮先判断是否已登录

实现的代码逻辑就是先获取我们的用户的code,然后来获取iv,userInfo, encryptedData,可通过es6的写法来进行对象变量解析
实现代码：
//index.wxml

<!--pages/myPage/myPage.wxml-->
<view class="header">
    <view class="img">
    <image style="width: 100%;" mode="widthFix" src="{{infoUrl}}"></image>
    </view>
    <view class="title" bindtap="getUserId">
        {{text}}
    </view>
</view>
<view class="img">
    <van-grid>
  <van-grid-item icon="http://film.huruqing.cn/assets/filming.79064307.png" text="电影订单" />
  <van-grid-item icon="http://film.huruqing.cn/assets/mall.e6f9e0b8.png" text="商品订单" />
</van-grid>
</view>
<view class="artive">
  <view class="item">
    <view class="left">优惠券</view>
    <view class="right">
    <image style="width: 100%;" mode="widthFix" src="../../img/jjian.png"></image>
    </view>
  </view>
  <view class="item">
    <view class="left">余额</view>
    <view class="right">
    <image style="width: 100%;" mode="widthFix" src="../../img/jjian.png"></image>
    </view>
  </view>
  <view class="item">
    <view class="left">设置</view>
    <view class="right">
    <image style="width: 100%;" mode="widthFix" src="../../img/jjian.png"></image>
    </view>
  </view>
</view>

//index.js

// pages/myPage/myPage.js
const app=getApp();
Page({
    data:{
        text:'未登录',
        loginBolean:false,
        infoUrl:'xxxx'
    },
    onLoad(){
        let lorage=wx.getStorageSync('nickName');
        let imgUrl=wx.getStorageSync('imgUrl');
        if(lorage){
            this.setData({
                infoUrl:imgUrl,
                text : lorage,
                loginBolean : true
            })
        }
    },
    getUserId(e){
        if(this.data.loginBolean) return false;
        let slef=this;
    wx.getUserProfile({
        desc: '用于完善会员资料',  
        success:async (res) => {
           //修改用户的头像
           this.setData({
               infoUrl:res.userInfo.avatarUrl
           })
           wx.setStorageSync('imgUrl',res.userInfo.avatarUrl);
           //通过es6的写法进行对象中的数据进行解构
           let {iv,userInfo, encryptedData}=res;
            let code=await this.getCode();
            this.postUsername(slef,{code,iv,userInfo, encryptedData});
        }
    })
    },
    //声明一个函数来获取我们的code
    getCode(){
       //我们通过permise方法封装一个函数来获取code
       return new Promise((resolve,resject)=>{
           wx.login({
            success(res){
               resolve(res.code) 
            },
            fail(err){
                resject('查询失败',err)
            }
           })
       })
    },
    //发送请求
    postUsername(slef,params) {
        //发送数据
    app.post('xxxxx',params).then(res=>{
        res.data.data=JSON.parse(res.data.data)
       let nickName=res.data.data.nickName;
        slef.setData({
           text:nickName,
           loginBolean : true
       })
       wx.setStorageSync('nickName', nickName);
    })
    }
})

小程序上拉加载更多

首先你需要一个好的后端人员来提供一个可以分页用的数据,
大体的思路就是声明一个全局的变量来保存当前页数，通过小程序的生命周期函数onReachBottom来将我们滑到底了就令当前发送的页数加一，每次触底就加一,然后就再发送一次请求,将我们得到的数据拼接到原来的数组上.
//index.wxml

<!--pages/cinma/cinma.wxml-->
<!-- 头部 -->
<van-sticky>
    <view class="header">
        <van-dropdown-menu class="mune">
            <van-dropdown-item bind:change="change" value="{{ value1 }}" options="{{ option1 }}" />
        </van-dropdown-menu>
        <view class="title">影院列表</view>
        <view></view>
    </view>
</van-sticky>
<!-- 内容 -->
<view class="artire">
    <view class="item" wx:for="{{cinemaList}}" wx:key="cityId">
        <view class="left">
            <text class="title">{{item.name}}</text>
            <text class="nei">{{item.address}}</text>
            <text class="tui">
                <text>退</text> <text>改签</text> <text>小吃</text> <text>折扣卡</text>
            </text>
            <text class="xia"><text class="ka">卡</text> 开卡特惠,首单1张最高立减4元</text>
        </view>
        <view class="right">
            <text>￥{{item.lowPrice}}</text>
            <text>{{item.distance}}</text>
        </view>
    </view>
</view>
<view style="color: #999; text-align: center; padding-bottom:25rpx;" wx:if="{{show}}">没有更多了</view>

//index.js

// pages/cinma/cinma.js
const app = new getApp();
Page({
    data: {
      show:false,
      currPage : 1,
        option1: [
        {text: '深圳',value: 0},
        {text: '上海',value: 1},
        {text: '北京',value: 2},
        {text: '广州',value: 3}
        ],
        value1: 0,
        cityName: '未知',
        cinemaList: [],
        // 存放经纬度
         location: {},
         city:'深圳'
    },
    onShow() {
        wx.showLoading({
            title: 'loading',
          })
        this.getLocation();
        // 获取影院列表应该在获取位置之后执行
        // this.getCinemaList();
      },
    
      // 获取影院列表
      getCinemaList(cityName) {
        app.post('http://zl.huruqing.cn:3008/cinema/list', {
          cityName:this.data.city,
          currPage:this.data.currPage
        }).then(res => {
          // 根据影院的经纬度和定位的经纬,计算出使用者与影院之间的距离
          let cinemaList = res.data.data || [];
          cinemaList = cinemaList.map(item => {  
            // 计算两个坐标之间的距离
            let lat1, lng1, lat2, lng2;
            lat1 = item.latitude;
            lng1 = item.longitude;
            lat2 = this.data.location.latitude;
            lng2 = this.data.location.longitude;
            let distance = this.getDistance(lat1,lng1,lat2,lng2);  
            distance = distance.toFixed(2) + 'km';
            return {
              ...item,
              distance: distance||'距离未知'
            }
          })
          this.setData({
            cinemaList: [
              ...this.data.cinemaList,
              ...cinemaList
            ]
          }, () => {
            wx.hideLoading();
          })
          if(cinemaList.length===0){
            this.setData({
              show:true
            })
          }
        }).catch(err => {
         console.log(err);
        })
      },
      // 获取城市名称
      getCityName({
        latitude,
        longitude
      }) {
        let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=XBZBZ-OBG63-LOD3N-3QR5Q-X6Z2Q-BFBIR`;
        wx.request({
          url,
          success: (res) => { 
            let cityName = res.data.result.address_component.city;
            this.setData({
              cityName
            }); 
            this.getCinemaList(cityName);
          }
        })
      },
      change(event){
        let arr;
         arr=this.data.option1.filter((item)=>{
             return item.value==event.detail;
         })
         this.setData({
             city : arr[0].text,
             cinemaList:[]
         })
         this.getCinemaList();
      },
      onReachBottom(){
        this.setData({
          currPage:this.data.currPage+1
        })
        this.getCinemaList();
      }
})