小程序授权登录、自定义分享、上拉加载、获取位置、template

底部附导航：小程序所有组件效果示例，供查阅。

1、小程序授权登录：
登录方式一：code登录：

    wx.login({
      success: res => {  // 发送 res.code 到后台换取 openId, sessionKey, unionId
        var code = res.code;
        var opt = {
          url: '',
          method: 'post',
          data: {
            code: res.code
          }
        }
        app.globalData.getData(opt, (res) => {
          if (res.data.status == 1) {
          //登录成功的逻辑，存储一些信息，即使用code查到openid
          } else {
          //登录失败，即当前用户不存在，即使用code未查到openid
          }
        }, (res) => {
          console.log(res)
        })
      }
    })

登录方式二：账号密码登录：已有账号，但未绑定小程序openid

    wx.login({
      success: res => {  // 发送 res.code 到后台换取 openId, sessionKey, unionId
        var code = res.code;
        wx.getUserInfo({  //此时登录按钮由button open-type="getUserInfo"伪装
          success(res) {
            console.log(res)  //小程序授权获取到的用户信息
            var opt = {
              url: '',
              method: 'post',
              data: {
                code : code  //使用code查询openid，直接绑定当前账号 
              }
            }
            app.globalData.getData(opt, (res) => {
              if (res.data.status == 1) {
               //登录成功执行操作
              } else {
                that.showToast(res.data.msg)
              }
            }, (res) => {
              console.log(res)
            })
          }
        })
      }
    })

登录方式三：验证码登录：已有账号，但未绑定小程序openid

    同上，code用来绑定用户身份

2、懒加载配置

     //json文件
      {
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 100,
      }

     //js文件
      onReachBottom: function () {
         this.ajax()
      }

     //页面data
     {
        data:[],
        page:1
     }

     //ajax()
     var that = this;
      wx.request({
        url: '',
        method: 'post',
        data: {},
        success(res) {
          if (res.data.status == 1){
              that.setData({
                  page:that.data.page +1,
                  data:that.data.data.concat(res.data.data),
              })
          }
        },
        fail(res) {
        }
      })

3、获取地理位置坐标，转换成省市区详细地址

//1、腾讯位置服务申请账号
//2、app.json文件声明如下：
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用于提供服务"
    }
  }

//3、js文件中
const app = getApp()
var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
  data: {},
  onLoad: function (options) {
    qqmapsdk = new QQMapWX({
      key: ''  //腾讯位置服务提供的key
    })
    this.getPosition();
  },
  getPosition:function(){
       wx.getLocation({
            type: 'wgs84',
            success(res) {
              var latitude = res.latitude  //获取到经纬度
              var longitude = res.longitude
              that.getLocal(latitude, longitude)
            }
          })
  },
  getLocal: function (latitude, longitude) {
    let that = this;
    qqmapsdk.reverseGeocoder({  //经纬度解析出实际地理位置
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        console.log(res)
        let province = res.result.ad_info.province
        let city = res.result.ad_info.city
        that.setData({
          province: province,
          city: city,
         latitude: latitude,
         longitude: longitude
        })
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  },
})

4、小程序模板template，主要用于相同或相似列表渲染，复用

//使用方式示例：商品列表
//template.wxml  定义模板，样式写在app.wxss里


//页面引用，index.wxml
   //view里面is填写要使用的上面的模板名字，data传入模板要渲染的数据，与上面模板渲染for循环的数据同名