Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.