小程序跳转app-微信小程序页面跳转

示例简介

本文主要介绍项目中常用的一些功能，供大家参考：

1、小程序跳转到其它小程序，并传参和获取参数数据；

2、计算定位位置和目标位置的距离；

3、地图上标记所有位置，并实现点击跳转到导航系统页面。

Tips：为了演示的方便，代码都会尽量缩减，样式随意。

实现过程

一、小程序跳转到其它小程序，并传参和获取参数数据

1、wxml代码如下：

跳转小程序

2、跳转小程序的js代码如下：

appId：要打开的小程序 appId；

path：打开的页面路径，如果为空则打开首页；

extraData：需要传递给目标小程序的数据，目标小程序可在App.onLaunch、App.onShow中获取到这份数据（本文介绍的是在App.onShow获取）；

envVersion：要打开的小程序版本（本文使用'develop'）。

// 跳转小程序
  goMiniProgram: function () {
    wx.navigateToMiniProgram({
      appId: '要打开的小程序 appId',
      path: 'pages/index/index',
      extraData: {
        from: 'miniProgram',
        appName: '程序名',
        responseType: 'code'
      },
      envVersion: 'develop',
      success(res) {
        console.log(res)
      }
    })
  }

3、目标小程序获取传参的数据：

// app.js使用下面写法获取extraData的数据
  onShow: function(options) {
    console.log(options)
    if (options.referrerInfo.extraData) {
      this.globalData.extraData = options.referrerInfo.extraData;
    }    
  }

二、计算定位位置和目标位置的距离

1、app.json增加代码，用于授权定位的提示信息（点击“确定”）：

"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }

2、wxml代码如下：

跟目标地址距离为：{{distance}}

3、计算距离的js代码如下：

1）计算距离函数，单位km；

  // 计算距离函数（单位km）
  Rad(d) {
    //根据经纬度判断距离
    return d * Math.PI / 180.0;
  },
  getDistance(lat1, lng1, lat2, lng2) {
    // lat1用户的纬度
    // lng1用户的经度
    // lat2目标的纬度
    // lng2目标的经度
    var radLat1 = this.Rad(lat1);
    var radLat2 = this.Rad(lat2);
    var a = radLat1 - radLat2;
    var b = this.Rad(lng1) - this.Rad(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137; // 6378.137为地球半径
    s = Math.round(s * 10000) / 10000;
    s = s.toFixed(2) + 'km'; // 保留两位小数
    return s;
  }
})

2）页面加载时，获取定位坐标并计算距离（latitude2和longitude2为设置的目标坐标）；

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取当前位置
    wx.getLocation({
      type: 'gcj02',
      // altitude: true, // 较高精确度
      success: (res) => {
        console.log('当前位置：', res);
        // 113.418123,22.505415
        let distance = this.getDistance(res.latitude, res.longitude, this.data.latitude2, this.data.longitude2);
        this.setData({
          distance: distance
        });
      }
    })
  }

三、地图上标记所有位置，并实现点击跳转到导航系统页面

1、wxml代码如下（宽高单位使用px小程序跳转app，如用rpx在ipone5屏幕下会导致显示不完全）：

2、js代码如下：

1）data数据设置；

  /**
   * 页面的初始数据
   */
  data: {
    latitude: 22.495393,
    longitude: 113.376004,
    markers: [{
        id: 0,
        latitude: 22.502508,
        longitude: 113.39271,
        iconPath: '../../images/mark_icon.png',
        width: '40',
        height: '40',
      },
      {
        id: 1,
        latitude: 22.489619,
        longitude: 113.391488,
        iconPath: '../../images/mark_icon.png',
        width: '40',
        height: '40',
      },
      {
        id: 2,
        latitude: 22.523008,
        longitude: 113.369713,
        iconPath: '../../images/mark_icon.png',
        width: '40',
        height: '40',
      },
      {
        id: 3,
        latitude: 22.494695,
        longitude: 113.452789,
        iconPath: '../../images/mark_icon.png',
        width: '40',
        height: '40',
      },
      {
        id: 4,
        latitude: 22.535693,
        longitude: 113.379631,
        iconPath: '../../images/mark_icon.png',
        width: '40',
        height: '40',
      },
      {
        id: 5,
        latitude: 22.506448,
        longitude: 113.418437,
        iconPath: '../../images/mark_icon.png',
        width: '40',
        height: '40',
      },
    ],
    addressMes: [{
        name: '孙文纪念公园',
        address: '中山市兴中道'
      },
      {
        name: '金钟湖公园',
        address: '中山市新安路南'
      },
      {
        name: '岐江公园',
        address: '中山一路与西堤路交叉口'
      },
      {
        name: '长江水世界',
        address: '火炬高技术开发区景观路1号'
      },
      {
        name: '逸仙湖公园',
        address: '广东省中山市湖滨路'
      },
      {
        name: '中环广场',
        address: '广东省中山市兴政路1号'
      },
    ],
    mapWidth: '',
    mapHeight: ''
  }

2）页面加载时，计算手机屏幕宽高，并赋值给地图；

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let sy = wx.getSystemInfoSync(),
      mapWidth = sy.windowWidth,
      mapHeight = sy.windowHeight;
    this.setData({
      mapWidth: mapWidth,
      mapHeight: mapHeight
    })
  }

3）点击标记点小程序跳转app，跳转到导航系统；

  // 点击标记点
  openOmnirange: function (e) {
    let id = e.markerId;
    wx.openLocation({
      latitude: this.data.markers[id].latitude,
      longitude: this.data.markers[id].longitude,
      name: this.data.addressMes[id].name,
      address: this.data.addressMes[id].address
    })
  }