小程序授权登录、自定义分享、上拉加载、获取位置、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里
<template name='lists'>
  <view class='list' wx:for='{{datas}}' wx:key="{{item.id}}" bindtap='' data-id='{{item.id}}'>
    <view class='imgBox'> 
      <image src='{{url}}{{item.img}}'  class='listImg' mode="widthFix"></image> //控制宽度，高度自适应
    </view>
    <view class='listName'>{{item.name}}</view>
    <view class='listDesc'>{{item.desc}}</view>
  </view>
</template>

//页面引用，index.wxml
  <view> //view里面is填写要使用的上面的模板名字，data传入模板要渲染的数据，与上面模板渲染for循环的数据同名
    <template is="lists" data="{{datas}}"/> 
  </view>

//页面底部导入template模板文件
<import src="../template/template.wxml"/>  

//js中定义商品列表数据
Page({
  data: {
      datas:[]
  },
  onLoad: function () {},
})

5、小程序实现分享

  // 小程序分享商品到小程序，wechat =>  wechat
  // js文件自定义分享内容
  onShareAppMessage: function (options) {
    var that = this;
    var shareObj = {
      title: '这里是分享标题',
      path: '/pages/login/login?a=1&b=2', //这里是分享的路径，可以带参数
      imageUrl: '这里是分享自定义图片地址',
      success: function (res) {
        if (res.errMsg == 'shareAppMessage:ok') {
        }
      },
      fail: function () {
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用户取消转发
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 转发失败，其中 detail message 为详细失败信息
        }
      },
      complete: function () {
      }
    }
    // 来自页面内的按钮的转发
    if (options.from == 'button') {
      var eData = options.target.dataset;
      shareObj.title = '这里是分享的标题',
      shareObj.path = '/pages/login/login?a=1&b=2';
    }
    return shareObj;
  },

  // app调用小程序，并分享商品，app => wechat
  // app端需要在腾讯开放平台关联小程序，然后调用小程序的路径和参数同上，
 //req.miniprogramType=0,1,2  分别代表拉起正式版，开发版，体验版

其他

//1、图片高度自适应：
<image src='' mode="widthFix"></image> //width:100%，高度自适应

//2、超出显示省略号，效果见下方图片
.line1{ /* 控制单行超出显示省略号 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
}
.line2{ /* 控制最多两行显示省略号 */
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  overflow: hidden;
  text-overflow:ellipsis;
}
.line3{ /* 控制最多三行显示省略号 */
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:3;
  overflow: hidden;
  text-overflow:ellipsis;
}

多行超出省略号.png