在逆战中学习小程序的一些api使用方法

在逆战中学习小程序的一些api使用方法

wx.request网络请求的封装

//
const baseUrl = '设置成自己的基础的接口地址'

export function request (options) {
  const { url, data, method, header } = options
  wx.showLoading({
    title: '加载中'
  })
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      data: data || {},
      method: method || 'GET',
      header: header || {},
      success: res => {
        resolve(res)
      },
      fail: err => {
        reject(err)
      },
      complete: () => {
        wx.hideLoading()
      }
    })
  })
}

本地存储

//同步存储
wx.setStorage({
  key:"key",
  data:"value"
})

//异步存储
try {
  wx.setStorageSync('key', 'value')
} catch (e) { }

路由方式及路由传参

声明式路由

<navigator open-type='你需要的方式' url='/pages/···/···?id=' + id></navigator>

编程式路由

//通过点击事件触发wx.navgatorTo()方法
handlePush() {
  wx.navgatorTo({
    url= '/pages/···/···?id=' + id //通过此方法传参
  })
}

上拉加载功能

onReachBottom: function () {
    let num = this.data.pageCode;
    let prolist = this.data.prolist
    num++;
    request('***', {
      pageCode: num
    }).then(data => {
      // 此处注意临界值的变化 --  没有数据
      this.setData({
        prolist: [...prolist, ...data.data],
        pageCode: num
      })
    })
  }
})

地图的使用

// 在wxml文件中写：
<map 
  class="map" 
  longitude="{{longitude}}" 
  latitude="{{latitude}}"
  scale="20"
  markers="{{markers}}"
  controls="{{controls}}"
  bindcontroltap="controlshandler"
  ></map>

// js文件

// pages/map/map.js
const app = getApp();
console.log(app.globalData)
// const { screenWidth, screenHeight } = app.globalData.deviceinfo
const { globalData: { deviceinfo: { screenWidth, screenHeight }}} = app
Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: 116.3974700000, // 经度
    latitude: 39.9088230000, // 维度
    markers: [{
      id: 1, // marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。
      longitude: 116.3974700000, // 经度
      latitude: 39.9088230000, // 维度
      title: '我爱北京天安门，天安门上太阳升', // 点击marker提示信息
      iconPath: '/resources/map/flag.png', // 图标 -支持网络路径
      // rotate: 15 // 此处坚决不旋转
      width: 40,
      height: 40,
      callout: {
        content: '我爱北京天安门，天安门上太阳升',
        color: '#f66',
        fontSize: 14,
        borderRadius: 10,
        borderWidth: 5,
        bgColor: 'white',
        padding: 10,
        display: 'BYCLICK', //  'BYCLICK': 点击显示; 'ALWAYS': 常显
        textAlign: 'center'
      }
    }],
    controls: [{
      id: 1,
      position: { // x, y   /  left,top
        left: 30,  // 获取设备的宽度以及高度 ---  获取设备的基本信息
        top: screenHeight - 100,
        // top: "75%",
        width: 30,
        height: 30
      },
      iconPath: '/resources/map/position.png',
      clickable: true // 控制默认不可以点击
    }]
  },
  /**
   * 自定义事件
   */
  controlshandler (event) {
    console.log(event)
    // 如果是定位的小图标
    if (event.controlId === 1) {
      // 获取本认所在地的经纬度 ---- 调用微信的定位功能
      // api-位置 https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.stopLocationUpdate.html
      wx.getLocation({
        success: (res) => {
          console.log(res)
          const { longitude, latitude } = res
          this.setData({
            longitude, latitude,
            markers: [{
              id: 1, // marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。
              longitude, latitude,
              iconPath: '/resources/map/flag.png', // 图标 -支持网络路径
              // rotate: 15 // 此处坚决不旋转
              width: 40,
              height: 40,
              callout: {
                content: '内容',
                color: '#f66',
                fontSize: 14,
                borderRadius: 10,
                borderWidth: 5,
                bgColor: 'white',
                padding: 10,
                display: 'BYCLICK', //  'BYCLICK': 点击显示; 'ALWAYS': 常显
                textAlign: 'center'
              }
            }]
          })
        }
      })
    }
  }