EA&UML日拱一卒-0基础学习微信小程序(14)-最简单的指南针

介绍完了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​​

写在文章的最后

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

以上就是今天的文章，欢迎点赞并推荐给您的朋友！

阅读更多更新文章，请扫描下面二维码，关注微信公众号【面向对象思考】