How does WeChat Mini Programs realize the simplest compass?
This article mainly introduces the relevant knowledge of WeChat Mini Programs how to achieve the simplest compass, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe everyone will gain something after reading this WeChat Mini Programs article on how to achieve the simplest compass. Let's take a look.
Index.wxml
{{angle}}
A text display area is specified and the page data is angle.
Index.js
Page ({
Data: {
Angle:'- -'
}
/ / event handling function
OnLoad: function () {
Var that = this
Wx.onCompassChange (function (res) {
/ / keep 1 decimal place
Var directions = res.direction.toFixed (1) +'°'
That.setData ({
Angle: directions
})
});
}
})
Wx.onCompassChange is used to listen to compass data at a frequency of 5 times per second. When the API is called, it will start listening automatically. In the specified function, the direction information is converted into a 1-digit decimal string and set to the page data angle.
It couldn't be simpler.
Index.wxss
/ * * index.wxss**/
.usermotto {
Margin-top: 100px
}
.angle _ text {
Color: blue
Font-size:25mm
}
Angle_text is used to specify the color and font size of the direction display.
And a flower to silk.
Display the results
This is the end of the article on "how to achieve the simplest compass for WeChat Mini Programs". Thank you for your reading. I believe that everyone has a certain understanding of the knowledge of "how to achieve the simplest compass of WeChat Mini Programs". If you want to learn more knowledge, you are welcome to follow the industry information channel.
