0基础学习微信小程序(14)-最简单的指南针

面向对象思考2019-03-13 15:24:21

点击上方【面向对象思考】可快速关注本公众号!


介绍完了HelloWorld之后,就开始进入练习阶段。第一个练习就是指南针小程序。


index.wxml


<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="angle_text">{{angle}}</text>
  </view>
</view>


指定了一个文本显示区域,页面数据为angle。


index.js


Page({
  data: {
    angle: '--',   
  },
  //事件处理函数
  onLoad: function () {
    var that = this;
    wx.onCompassChange(function (res) {
      //保留1位小数
      var directions = res.direction.toFixed(1) + '°';
        that.setData({
          angle: directions,      
      })
    });
  },
})


wx.onCompassChange用于监听罗盘数据,频率:5次/秒,接口调用后会自动开始监听。在指定的函数中,将方向信息转换成1位小数字符串并设定到页面数据angle上。


不能再简单了。


index.wxss


/**index.wxss**/
.usermotto {
  margin-top: 100px;
}

.angle_text {
  color: blue;
  font-size:25mm
}


angle_text用于指定方向显示的颜色,字体大小。


锦上添花。


显示结果



参考资料


罗盘API:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/compass.html


写在文章的最后


既然已经读到这里了,拜托大家再用一分钟时间,将文章转发到各位的朋友圈,微信群中。本公众号的成长需要您的支持!


本日关注数:555 好数字!