EA&UML日拱一卒-0基础学习微信小程序(14)-最简单的指南针
2018-01-22 18:39
686 查看
介绍完了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
写在文章的最后
既然已经读到这里了,拜托大家再用一分钟时间,将文章转发到各位的朋友圈,微信群中。本公众号的成长需要您的支持!
以上就是今天的文章,欢迎点赞并推荐给您的朋友!
阅读更多更新文章,请扫描下面二维码,关注微信公众号【面向对象思考】
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
写在文章的最后
既然已经读到这里了,拜托大家再用一分钟时间,将文章转发到各位的朋友圈,微信群中。本公众号的成长需要您的支持!
以上就是今天的文章,欢迎点赞并推荐给您的朋友!
阅读更多更新文章,请扫描下面二维码,关注微信公众号【面向对象思考】
相关文章推荐
- EA&UML日拱一卒-0基础学习微信小程序(13)-一个都不能少
- EA&UML日拱一卒-0基础学习微信小程序(15)-弄得像真的一样
- EA&UML日拱一卒-0基础学习微信小程序(4)- 安装开发工具
- EA&UML日拱一卒-0基础学习微信小程序(10)-注册页面
- EA&UML日拱一卒-0基础学习微信小程序(2)- 关于小程序
- EA&UML日拱一卒-0基础学习微信小程序(11)-ECMAScript3数组操作方法
- EA&UML日拱一卒-0基础学习微信小程序(7)-WXSS和CSS
- EA&UML日拱一卒-0基础学习微信小程序(1)- 开篇
- EA&UML日拱一卒-0基础学习微信小程序(5)- Hello world!
- EA&UML日拱一卒-0基础学习微信小程序(16)-使用移动平均消除抖动
- EA&UML日拱一卒-0基础学习微信小程序(6)- 配置文件的形式和内容
- EA&UML日拱一卒-0基础学习微信小程序(3)- 创建自己的小程序账号
- EA&UML日拱一卒-0基础学习微信小程序(12)-ECMAScript5数组操作方法
- EA&UML日拱一卒-0基础学习微信小程序(9)-C++程序员眼中的app.js
- EA&UML日拱一卒-0基础学习微信小程序(17)-学到什么程度算行?
- EA&UML日拱一卒-0基础学习微信小程序(8)-事件处理和数据绑定
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (4)-从地图上选点
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (6)-播放音频
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (10)-定时器
- EA&UML日拱一卒-微信小程序实战:位置闹铃 (9)-利用条件渲染实现列表控件