微信小程序实践：数据获取，回到顶部，下拉刷新，上拉加载等

看着文档拿做过的项目的接口实践了一下
效果图：

程序主页
装车单

划重点：
1.语法
2.提供的组件，自定义组件，模版以及样式文件
3.界面之间数据的传递
4.路由
5.后台数据的获取
使用中很惊喜的是微信开发者工具在创建项目之后的整个环境搭建和视图的展示都很清晰人性化，整个自己去体会了。
1.语法：语法上来说风格和vue很像，支持es6，用起来还算顺手。
2.提供的组件主要是<view> <text> <button> <image> 最为常用，用过react-native的就觉得眼熟了，但是这里都是小写哟。自己写的模版用<template>包住，<import src="../template/template.wxml"/>的形式引入<template is="name"/>的形式使用，模版里的事件都需要在使用模版的模块下写好。
组件相对复杂，有自己的js，json等全套，引入的时候需要在写进使用模块的json文件里，写好路径。以下是官方例子：

组件的使用

使用的时候

<my-component>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view> 
</my-component>

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>//<my-component>内的内容会在这里面显示
</view>

样式就写在对于名称的wxss文件中，和css文件写法一致
4.路由：
一般来说，开发者工具在你选择新建page的时候，就会给你自动配置好路由，人性化吧。

新建页面

在最外层的app.json里就多了一些代码：
如果你自己只加一个wxml文件又想加入路由就自己在这个页面里加入相对的位置路径。
路由跳转：navigateTo

{
  "pages": [
    "pages/index/index",  //这里都是路由哟，在微信里翻译应该叫页面？这个理解就好吧，没有正规答案
    "pages/logs/logs",
    "pages/too/too",
    "example/index",
  ],
 "window": {
    "backgroundTextStyle": "dark",//黑色的下啦显示
    "navigationBarBackgroundColor": "#21a",//蓝色的底色
    "navigationBarTitleText": "你诗爷的小程序",
    "navigationBarTextStyle": "white",//白色的顶部文字
    "enablePullDownRefresh": true//允许下拉，这个基本用得到的。
  }
}

wx.navigateTo({
      url: '../too/too',
    })

配置文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
为了看的清晰，我用了颜色分明的做例子，效果：

image.png
5.很重要的一点，数据的获取：
首先：
关掉微信验证
接口没有通过微信是不能用的，我们不是正式上线就把这个勾掉进行数据获取，这里还有一个惊喜的地方，就是竟然没有跨域问题，vue和react都是要进行跨域操作的。（不知道是不是之前用过这个接口nginx已经代理了，这个没有来得及去验证）
然后在外层的app.js 里的globalData中写下你的接口通用地址：
我的地址
再然后：我这里写了两个接口作作为实践，第一个是登录，第二个是获取一个装车单列表。
登录写在进入后的第一个页面组合的onLoad中。

wx.request({
      url: app.globalData.api + '/auth/auth/login', //接口详细地址
      data: {
        password: '123456',//发送的数据
        login: '199199199199'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      method: 'POST',//类型
      success: (res) => {
        console.log(res.data.result)//得到数据
        app.globalData.info = res.data.result || {}
        this.setData({
          info: res.data.result || {},   //成功之后保存在globalData和这个页面的data中，globalData不直接在页面中使用，负值给本页面的data来使用全局数据。
        })
      }
      //还可以写一个error 。
    })

这里是我获取到的数据

装车单页面数据获取：

知识点：循环数据，回到顶部，下拉刷新，上拉加载。

// pages/too/too.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    },
    info: {},
    top: 0,
    dataItems: [],
    has_next: false,
    parmas: {
      offset: 0,
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(this.data.parmas)
    if (app.globalData.info) {
      this.setData({
        info: app.globalData.info,
      })
      this.getItem()
    }
  },
  getItem: function(type) {
    wx.request({
      url: app.globalData.api + '/tms/delivery/search',
      data: this.data.parmas,
      header: {
        'content-type': 'application/json',
        'token': app.globalData.info.token,
      },
      method: 'GET',
      success: (res) => {
        type === 'up' ? wx.stopPullDownRefresh() : null
        console.log(res.data)
        this.setData({
          dataItems: this.data.parmas.offset === 0 ? res.data.result && res.data.result.items 
          : [
              ...this.data.dataItems,
              ...res.data.result && res.data.result.items
            ],
          has_next: res.data.result && res.data.result.has_next || false,
        })
      }
    })
  },
  tapMove: function() {
    this.setData({
      parmas: {
        offset: 0
      }
    },() => {
      wx.pageScrollTo({ 
        scrollTop: 0, //回到顶部
        duration: 500, //过程耗时
      })
      wx.startPullDownRefresh()
    })
  },
  down: function() {
    if (this.data.has_next) {
      this.setData({
        parmas: {
          offset: this.data.parmas.offset + 20
        }
      }, () => {
        this.getItem()
      })
    }
    console.log('down')
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('--->up')
    this.getItem('up')
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('---->down')
    this.down()
  },

})

这里我把数据获取写在了一个函数之中，方便页面刷新时公用。还有数据的处理，我相信有代码经验的人都是看得懂的。
这里微信提供了很多api，下拉刷新，上拉加载都很方便，个人觉得比提供的<scroll-view>好用。
装车单页面：

<!--pages/too/too.wxml-->
<view class='box'>  
  <view wx:for="{{dataItems}}" class='orders-box' wx:for-item="i" wx:key="{{i.id}}" >
    <text style='font-size: 16px; color: blue'>{{i.serial_no}}</text>
    <view class='orders'>
      <view wx:for="{{i.order_list}}" wx:for-item="j" wx:key="{{j.id}}" class='order-item'>
        <text>{{j.order_code}}</text>
      </view>
    </view> 
  </view> 
  <button size="mini" class='to-top' bindtap="tapMove">回到顶部</button>
</view>

一个小程序出炉了，记录以下我的第一个小程序实践。

还有一个关于图片上传的问题，微信会把你需要上传的图片托管在自己的平台给你一个临时地址。我只得到这个临时地址，当下就可以使用在小程序中，没有提供base64，这个需要后台拿这个临时地址于微信交互获取更需要的信息。这个是目前唯一觉得不是很理想的地方，如果提供不同的方式，可以临时也可以选择base64就好啦。总的来说，微信提供的拍照和上传，提示等等的api使得开发很方便呢。
我看到有人把数据获取包装了，可我倒是觉得这样的获取已经很简便了，公共的一些配置都放在全局里调用也够用了。话说我在react项目中使用一个写好的action也几近那么多行代码了。