小程序一些常用方法和功能总结

本篇总结一些小程序的基本功能，主要包含（手动目录⤵️）：

1. 小程序加载背景图片
2. navigateTo 传对象参数
3. 配置转发实现页面的分享
4. 小程序获取当前页面的 url
5. 小程序获取节点信息及应用
6. 小程序的下拉刷新和上拉加载

小程序加载背景图片

小程序使用背景图片仅支持网络图片和base64图片。 网络图片通过传入云端获得。base64可以在类似 http://imgbase64.duoshitong.com 的在线转换网站上获得。 使用方法：

background-image: url("data:image/jpeg;base64,/9j/4QA...");

建议使用网络图片，因为有的base64字符串实在太长了…

navigateTo 传对象参数

小程序将对象作为参数传递时，可以通过转为字符串的方式实现，接收时再对其进行解析。

// 传递
wx.navigateTo({
     url: `path?object=${JSON.stringify(object)}`
})

// 解析
const data = JSON.parse(options.object)

配置转发实现页面的分享

小程序的分享包括右上角按钮菜单分享和开发者自定义按钮分享，由于一些诱导分享的功也已由官方关停（ 官方文档），使得分享配置来更加单纯@.@

onShareAppMessage(ops) {
    const shareObject = {
      title: '分享的标题（默认为小程序名）',
      path: 'pages/index',
      imageUrl: '封面图路径（默认为页面前半部截图，自定义图片宽高比为 5:4）',
      success: function(res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
      },
      fail: function(res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
    if (ops.from === "button") {
      // 来自页面内转发按钮
      return shareObject;
    } else {
      // 来自导航栏转发按钮
      return shareObject;
    }

其中path 像 navigateTo 一样可以在后面跟参数，也是在目标页面 onLoad 的 options 中获取。

小程序获取当前页面的 url

getCurrentPageUrl(pages) {
  var currentPage = pages[pages.length - 1]
  var url = currentPage.route
  return url
}

getCurrentPageUrlWithArgs(pages) {
    var currentPage = pages[pages.length - 1]
    var url = currentPage.route
    var options = currentPage.options
    // 拼接url的参数
    var urlWithArgs = url + '?'
    for (var key in options) {
      var value = options[key]
      urlWithArgs += key + '=' + value + '&'
    }
    urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
    return urlWithArgs
  }

其中的 pages = getCurrentPages()，即在对应页面这样调用即可：

getCurrentPageUrlWithArgs(getCurrentPages())

小程序获取节点信息及应用

先看官方的示例代码，代码中通过元素的id 获取元素，然后得到了边界坐标和滚动位置，因此我们可以通过这些数据实现类似于 ` 锚点` 这种页面跳转，或者用于对其他预算style的设置。

const query = wx.createSelectorQuery() // 创建节点查询器 query
query.select('#the-id').boundingClientRect() // 获取节点位置信息
query.selectViewport().scrollOffset() // 获取页面滑动位置
query.exec(function (res) {
  res[0].top // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

小程序的下拉刷新和上拉加载

在小程序中，实现下拉刷新和上拉加载有两种方式。一种是通过配置page，另一种是使用`scroll-view`组件，但这种方式的触发条件其实是触顶刷新。综合两者的体验，推荐使用第一种方式。

第一种方式：

这里我就用 wepy 里的语法来表示了，思路是一样的。

// 首先 config里配置下拉距离
config = {
  enablePullDownRefresh: true,
  onReachBottomDistance: 50
}

// data 里定义
data = {
  // 使用 isLoading 来判断加载动画的显示隐藏，组合使用isLoading和noMoreData判断数据为空视图的显示隐藏。
  currentPage: 1,
  noMoreData: false,
  isLoading: true
}

  // 请求数据
loadData() {
  const that = this
  that.isLoading = true
  // 伪代码
  request((res) {
    // 请求成功
    that.isLoading = false
    that.noMoreData = res.data.length < perPage
    that.data = res.data
    that.$apply()
  }) 
}

// 请求更多
loadMoreData() {
  const that = this
  taht.isLoading = true
  that.currentPage += 1
  // 伪代码
  request((res) {
    // 请求成功
    that.isLoading = false
    that.noMoreData = res.data.length < perPage
    that.data = that.data.concat(res.data)
    that.$apply()
  }) 
}

// 下拉刷新
async onPullDownRefresh() {
  await this.loadData()
  wx.stopPullDownRefresh()
}

// 上拉加载
async onReachBottom() {
  if (this.noMoreData || this.isLoading) {
    return
  }
  await this.loadMoreData()
}

使用过程中你可能会遇到以下问题

下拉刷新无法弹回去

解决方法： 在刷新函数了加上 wx.stopPullDownRefresh();

刷新看不到三个小圆点的加载动画

原因是圆点颜色和背景颜色相同，所以解决方法就简单了，当然也可以设置你需要的其他颜色。

{
  "backgroundTextStyle":"drak",
  "backgroundColor": "#fff"
}

第二种方式：

// 视图

scrolltoupper() {
  // 触顶刷新
}

scrolltolower() {
  // 处理上拉加载
}