微信小程序如何把调用api的结果展示到页面上

耗费我好长时间，终于在巴拉了这么多博客，给弄出来了。

干货

主要展示如何把通过微信的getLocation获取到的经纬度展示到页面上。

步骤

1.wxml

  <view class="one">经度："{{jd}}"</view>
  <view>纬度："{{wd}}"</view>
    <!--data动态变化-->
  <view class="one">消息： {{mes}}</view>

2.js

const app = getApp()
Page({
  data:{
    la:'',
    lo:'',
    mes:'ll'
  },
// 获取当前地理位置 授权验证
getCurrentLocal(){
const _self= this;
  wx.getSetting({
    success(res) {
      if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
        wx.openSetting({
          success(res) {}
        })
      }  else { // 第一次授权，或者已授权，直接调用相关api
        _self.getMyLocation()
      }
    }
  })
},
// 获取当前地理位置
getMyLocation(){
  const _self = this
  //获取用户的当前位置
  wx.getLocation({
    type: 'wgs84',
    success(res) {
    //可以获取到经纬度，查看官方文档，
    //可以看到此处该如何展示经纬度
    var latitude = res.latitude
    var longitude = res.longitude
    _self.setData({
      wd: latitude,
      jd: longitude
    })
    }
  })
},
//data动态变化,测试
onLoad:function(){
  const _self=this;
  _self.setData({
    mes:'哈哈哈'
  })
},
 
})

总结

1.获取数据，是通过key获取；
2.页面上展示的数据是通过data定义的，然后在成功授权进行定位的时候进行赋值，主要是通过

 _self.setData({
      wd: latitude,
      jd: longitude
    })

通过key-value进行赋值，在赋值之前一定要进行定义。通过以上步骤即可完成赋值展示到页面上。