底部附導(dǎo)航：小程序所有組件效果示例，供查閱。

1、小程序授權(quán)登錄：
登錄方式一：code登錄：

    wx.login({
      success: res => {  // 發(fā)送 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 {
          //登錄失敗，即當(dāng)前用戶不存在，即使用code未查到openid
          }
        }, (res) => {
          console.log(res)
        })
      }
    })

登錄方式二：賬號密碼登錄：已有賬號，但未綁定小程序openid

    wx.login({
      success: res => {  // 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
        var code = res.code;
        wx.getUserInfo({  //此時登錄按鈕由button open-type="getUserInfo"偽裝
          success(res) {
            console.log(res)  //小程序授權(quán)獲取到的用戶信息
            var opt = {
              url: '',
              method: 'post',
              data: {
                code : code  //使用code查詢openid，直接綁定當(dāng)前賬號 
              }
            }
            app.globalData.getData(opt, (res) => {
              if (res.data.status == 1) {
               //登錄成功執(zhí)行操作
              } 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、獲取地理位置坐標(biāo)，轉(zhuǎn)換成省市區(qū)詳細(xì)地址

//1、騰訊位置服務(wù)申請賬號
//2、app.json文件聲明如下：
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息將用于提供服務(wù)"
    }
  }

//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: ''  //騰訊位置服務(wù)提供的key
    })
    this.getPosition();
  },
  getPosition:function(){
       wx.getLocation({
            type: 'wgs84',
            success(res) {
              var latitude = res.latitude  //獲取到經(jīng)緯度
              var longitude = res.longitude
              that.getLocal(latitude, longitude)
            }
          })
  },
  getLocal: function (latitude, longitude) {
    let that = this;
    qqmapsdk.reverseGeocoder({  //經(jīng)緯度解析出實際地理位置
      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，主要用于相同或相似列表渲染，復(fù)用

//使用方式示例：商品列表
//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> //控制寬度，高度自適應(yīng)
    </view>
    <view class='listName'>{{item.name}}</view>
    <view class='listDesc'>{{item.desc}}</view>
  </view>
</template>

//頁面引用，index.wxml
  <view> //view里面is填寫要使用的上面的模板名字，data傳入模板要渲染的數(shù)據(jù)，與上面模板渲染for循環(huán)的數(shù)據(jù)同名
    <template is="lists" data="{{datas}}"/> 
  </view>

//頁面底部導(dǎo)入template模板文件
<import src="../template/template.wxml"/>  

//js中定義商品列表數(shù)據(jù)
Page({
  data: {
      datas:[]
  },
  onLoad: function () {},
})

5、小程序?qū)崿F(xiàn)分享

  // 小程序分享商品到小程序，wechat =>  wechat
  // js文件自定義分享內(nèi)容
  onShareAppMessage: function (options) {
    var that = this;
    var shareObj = {
      title: '這里是分享標(biāo)題',
      path: '/pages/login/login?a=1&b=2', //這里是分享的路徑，可以帶參數(shù)
      imageUrl: '這里是分享自定義圖片地址',
      success: function (res) {
        if (res.errMsg == 'shareAppMessage:ok') {
        }
      },
      fail: function () {
        if (res.errMsg == 'shareAppMessage:fail cancel') {
          // 用戶取消轉(zhuǎn)發(fā)
        } else if (res.errMsg == 'shareAppMessage:fail') {
          // 轉(zhuǎn)發(fā)失敗，其中 detail message 為詳細(xì)失敗信息
        }
      },
      complete: function () {
      }
    }
    // 來自頁面內(nèi)的按鈕的轉(zhuǎn)發(fā)
    if (options.from == 'button') {
      var eData = options.target.dataset;
      shareObj.title = '這里是分享的標(biāo)題',
      shareObj.path = '/pages/login/login?a=1&b=2';
    }
    return shareObj;
  },

  // app調(diào)用小程序，并分享商品，app => wechat
  // app端需要在騰訊開放平臺關(guān)聯(lián)小程序，然后調(diào)用小程序的路徑和參數(shù)同上，
 //req.miniprogramType=0,1,2  分別代表拉起正式版，開發(fā)版，體驗版

其他

//1、圖片高度自適應(yīng)：
<image src='' mode="widthFix"></image> //width:100%，高度自適應(yīng)

//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