小程序瀑布流，上传图片，地图 的简单使用

图片上传：

首先再wxml中定义上传的按钮，下面循环写图片展示

<button bind:tap="img">上传</button>
<block wx:for="{{data}}">
    <image class="img" src="{{item}}" data-src="{{item}}" bind:tap="big" />
</block>

js中：

// 上传图片
  img(){
    var that=this
      // 开启选择图片
      wx.chooseImage({
        count: 9,//可选图片的数量
        sizeType: ['original','compressed'],
        sourceType: ['album','camera'],
        success: (result)=>{
          // console.log(result);
          var url=result.tempFilePaths // 接收选择图片的名称
          url.forEach(element => {  //循环
            // 把图片传到后端
            wx.uploadFile({
              url:'http://www.test.com/api/api/img',
              filePath:element ,
              name:'file' ,
              formData: {}, //额外参数
              success: (result)=>{
                // 接收返回的数据（图片名称），并转化格式
                var data=JSON.parse(result.data)
               if(data.code==200){
                 var src=data.data
                 var url=that.data.url
                //  把图片的名称（连接）放到url数组中
                  url.push(src)
                  // 返回数组展示
                 that.setData({
                 data:url
                 })
               }
              },
              fail: ()=>{},
              complete: ()=>{}
            });
          });
         
        },
        fail: ()=>{},
        complete: ()=>{}
      });
  },
  big(env){
    // 放大图片
    var url=this.data.url
    wx.previewImage({
      current: '', // 当前显示图片的 http 链接
      urls: url // 需要预览的图片 http 链接列表
    })
  },

后端：

  接收图片信息
        $file = $_FILES['file'];
//        获取图片路径
        $tmp_name = $file['tmp_name'];
//        获取图片名称
        $name = $file['name'];
//        获取图片的格式
        $jpg = strtolower(substr($name, strrpos($name, '.')));
//        重新命名图片
        $name = time() . $jpg;
//七牛云上传   ak  sk
        $accessKey = 'EUWqaRdAvIWk3KFq9eAME3rx1L-2QA9kuvAycPKx';
        $secretKey = 'b9NbVnxphkmHaAurrVLZIHPpuJDsziVzISyPkwZQ';
        $auth = new Auth($accessKey, $secretKey);
        $bucket = 'linning';
// 生成上传Token
        $token = $auth->uploadToken($bucket);
// 构建 UploadManager 对象
        $uploadMgr = new UploadManager();
//        执行上传
        list($res, $err) = $uploadMgr->putFile($token, $name, $tmp_name);
//        判断是否上传成功
        if ($err != null) {
            return ['code' => 2001, 'msg' => '失败', 'data' => ''];
        }
//        返回前端文件连接
        $url = "http://rdzesqr5b.hn-bkt.clouddn.com/" . $name;
        return ['code' => 200, 'msg' => 'ok', 'data' => $url];

瀑布流：

wxml：

<scroll-view class="scroll"  scroll-y="{{true}}"  bind:scrolltolower="onReachBottom">
  <block wx:for="{{more}}">
    <view>
      {{item.id}}
    </view>
       <view  data-id = "{{item.id}}" bind:tap="show">
      {{item.title}}
    </view>
  </block>
</scroll-view>

注意，需要再

wxss中给scroll-view一个固定的高度，同时开启y方向的下拉

js：

more(old=[],pag){
  var that=this
  
  wx.request({
    url: 'http://www.test.com/api/api/list',
    data: {page:pag},
    header: {'content-type':'application/json'},
    method: 'GET',
    dataType: 'json',
    responseType: 'text',
    success: (result)=>{
      // 接收返回的数据
      var data=result.data.data
      // 判断页码
      if(pag>data.total){
        wx.showToast({
          title: '到底了哦',
          icon: 'none'
        });
        return false
      }
        // 设置变量接收新的数据
        var  newartivle=data.res
        // 把新的变量追加到旧的变量中并赋值给上面定义的more，名称要保持一致
        var more=old.concat(newartivle)
        // 返回数据，名称保持一致
        that.setData({
        more:more,pag:pag
      })
     


    },
    fail: ()=>{},
    complete: ()=>{}
  });
},

注意需再data中定义pag=1；more=【】；

在下拉事件中获取第一次加载时获取的第一页的数据，放进旧数据中

  onReachBottom() {
    // 调用瀑布流
    var pag=this.data.pag + 1
    var old=this.data.more
   this.more(old,pag)
  },

后端：小程序属于api，后端需要些原生的分页方法；

   接收当前页
        $page = request()->get('page') ?? 1;
//        计算总数量
        $count = article::count();
//        设置每页的数量
        $size = 10;
//       总页数
        $total = ceil($count / $size);
//        偏移量
        $limit = ($page - 1) * $size;
//        查询
        $res = article::offset($limit)->limit($size)->get();
//        返回值
        $data = [
            'total' => $total,
            'res' => $res,
        ];
        return ['code' => 200, 'msg' => 'ok', 'data' => $data];

地图：

wxml：

首先加载静态页面，把当前位置定位打开 show-location="{{true}}"     然后设置经纬度为后端定义的空值，再地图加载完成时返回经纬度到前端从而实现显示自身位置

<map  bind:tap="map" latitude="{{latitude}}" 
longitude="{{longitude}}" show-location="{{true}}"  
bindupdated="onLandMap"></map>

js：

onLandMap(evt){
    // 地图加载时获取点当前位置
   wx.getLocation({
     type: 'wgs84',
     altitude: false,
     success: (result)=>{
      //  接收经纬度
      var latitude=result.latitude
      var longitude=result.longitude
      // 返回经纬度
      this.setData({
        latitude,longitude
      })
     },
     fail: ()=>{},
     complete: ()=>{}
   });
  },
map(){
 
  // 点击地图时跳到地图页面
    wx.chooseLocation({
      success: (result)=>{
        返回经纬度
        var latitude=result.latitude
        var longitude=result.longitude
        // 返回地图经纬度
        this.setData({
          latitude,longitude
        })
      },
      fail: ()=>{},
      complete: ()=>{}
    });
},

这个时候data中定义的经纬度就有数值了，随表单一起提交到后台即可。