Applet waterfall flow, upload pictures, simple use of maps

Image upload ：

First of all wxml Define the upload button in , Next, write pictures in a circle to show

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

js in ：

//  To upload pictures 
  img(){
    var that=this
      //  Open select Picture 
      wx.chooseImage({
        count: 9,// Number of optional pictures 
        sizeType: ['original','compressed'],
        sourceType: ['album','camera'],
        success: (result)=>{
          // console.log(result);
          var url=result.tempFilePaths //  Receive the name of the selected picture 
          url.forEach(element => {  // loop 
            //  Send the picture to the back end 
            wx.uploadFile({
              url:'http://www.test.com/api/api/img',
              filePath:element ,
              name:'file' ,
              formData: {}, // Extra parameters 
              success: (result)=>{
                //  Receive the returned data （ Image name ）, And transform the format 
                var data=JSON.parse(result.data)
               if(data.code==200){
                 var src=data.data
                 var url=that.data.url
                //   Put the name of the picture （ Connect ） Put it in url Array 
                  url.push(src)
                  //  Return the array display 
                 that.setData({
                 data:url
                 })
               }
              },
              fail: ()=>{},
              complete: ()=>{}
            });
          });
         
        },
        fail: ()=>{},
        complete: ()=>{}
      });
  },
  big(env){
    //  Enlarge picture 
    var url=this.data.url
    wx.previewImage({
      current: '', //  The  http  link 
      urls: url //  Pictures that need to be previewed  http  Link list 
    })
  },

Back end ：

   Receive picture information 
        $file = $_FILES['file'];
//         Get image path 
        $tmp_name = $file['tmp_name'];
//         Get the picture name 
        $name = $file['name'];
//         Get the format of the picture 
        $jpg = strtolower(substr($name, strrpos($name, '.')));
//         Rename the picture 
        $name = time() . $jpg;
// Seven cattle cloud upload    ak  sk
        $accessKey = 'EUWqaRdAvIWk3KFq9eAME3rx1L-2QA9kuvAycPKx';
        $secretKey = 'b9NbVnxphkmHaAurrVLZIHPpuJDsziVzISyPkwZQ';
        $auth = new Auth($accessKey, $secretKey);
        $bucket = 'linning';
//  Generate upload Token
        $token = $auth->uploadToken($bucket);
//  structure  UploadManager  object 
        $uploadMgr = new UploadManager();
//         Perform upload 
        list($res, $err) = $uploadMgr->putFile($token, $name, $tmp_name);
//         Judge whether the upload is successful 
        if ($err != null) {
            return ['code' => 2001, 'msg' => ' Failure ', 'data' => ''];
        }
//         Return to the front-end file connection 
        $url = "http://rdzesqr5b.hn-bkt.clouddn.com/" . $name;
        return ['code' => 200, 'msg' => 'ok', 'data' => $url];

The waterfall flow ：

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>

Be careful , Need to be

wxss Middle feeding scroll-view A fixed height , At the same time open y Direction pull down

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)=>{
      //  Receive the returned data 
      var data=result.data.data
      //  Judge page number 
      if(pag>data.total){
        wx.showToast({
          title: ' In the end ',
          icon: 'none'
        });
        return false
      }
        //  Set variables to receive new data 
        var  newartivle=data.res
        //  Append the new variable to the old variable and assign a value to the above defined more, The name should be consistent 
        var more=old.concat(newartivle)
        //  Return the data , Keep the names the same 
        that.setData({
        more:more,pag:pag
      })
     


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

Attention needs to be paid again data In the definition of pag=1;more=【】;

Get the data of the first page obtained during the first load in the drop-down event , Put it into old data

  onReachBottom() {
    //  Call waterfall flow 
    var pag=this.data.pag + 1
    var old=this.data.more
   this.more(old,pag)
  },

Back end ： Applets belong to api, The back end needs some native paging methods ;

    Receive current page 
        $page = request()->get('page') ?? 1;
//         Calculate total quantity 
        $count = article::count();
//         Set the number of pages 
        $size = 10;
//        Total number of pages 
        $total = ceil($count / $size);
//         Offset 
        $limit = ($page - 1) * $size;
//         Inquire about 
        $res = article::offset($limit)->limit($size)->get();
//         Return value 
        $data = [
            'total' => $total,
            'res' => $res,
        ];
        return ['code' => 200, 'msg' => 'ok', 'data' => $data];

Map ：

wxml：

First load the static page , Open the current position  show-location="{ {true}}"      Then set the longitude and latitude to the null value defined at the back end , When the map is loaded, the longitude and latitude are returned to the front end to display its position

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

js：

onLandMap(evt){
    //  Get the current position of the point when the map is loaded 
   wx.getLocation({
     type: 'wgs84',
     altitude: false,
     success: (result)=>{
      //   Receive latitude and longitude 
      var latitude=result.latitude
      var longitude=result.longitude
      //  Return to latitude and longitude 
      this.setData({
        latitude,longitude
      })
     },
     fail: ()=>{},
     complete: ()=>{}
   });
  },
map(){
 
  //  Click the map to jump to the map page 
    wx.chooseLocation({
      success: (result)=>{
         Return to latitude and longitude 
        var latitude=result.latitude
        var longitude=result.longitude
        //  Return to the longitude and latitude of the map 
        this.setData({
          latitude,longitude
        })
      },
      fail: ()=>{},
      complete: ()=>{}
    });
},

This is the time data The longitude and latitude defined in have numerical values , Submit it to the background with the form .