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

This article mainly explains "how to use the map component of Mini Program", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to use the map component of Mini Program.

1. Preparatory work

WeChat Mini Programs certainly belongs to the boss of Tencent (handing tea to the boss): download WeChat Mini Programs developer tools, Tencent has opened the personal development platform of Mini Program, and only needs a WeChat account to become a Mini Program developer.

two。 Mini Program page

Open the Mini Program developer tool, log in by scanning the code with Wechat, and create a default Mini Program.

All the business pages of Mini Program are stored in the pages folder

The index folder is a page, and index.wxml is the structure file of the page, similar to html.

Index.wxss is the style of the page, in fact, css;index.js is the logic of the page, data request and rendering are completed on this page.

The logs folder holds Mini Program development logs, which are not available for the time being.

Utils.js can write its own JavaScript plug-ins or introduce third-party plug-ins.

App.js handles some global logic, such as defining global variables to hold the obtained user information, so that each page can get the user information.

App.json is a global configuration file, such as setting the background color of the title bar, and so on.

App.wxss stores the common style of the page. If multiple pages need to use the same style, you can write it here.

The debug button is used for debugging and is similar to the chrome dev debugging tool.

The project button displays a preview QR code for real machine debugging. You have to debug the test code on a real machine, and your own debugging tools sometimes produce bug.

3. Create a page structure

Now that we've analyzed the default file structures and their functions in the previous section, we're going to create the pages needed by ofo Mini Program.

Delete the default index folder under pages. The logs/utils folder can be deleted selectively.

Create an images folder in the same directory as pages, store the icons needed for the page, and download icons

This Mini Program does not need to be written in app.js. You can comment on the code first.

In app.json, delete the default code and write the following code (Note: there can be no comments in the app.json file, here to describe the page's function more intuitively):

{

"pages": [

"pages/index/index", / / Map Page

"pages/warn/index", / / vehicle failure page

"pages/scanresult/index", / / scan success page

"pages/billing/index", / / start billing page

"pages/my/index", / / account page

"pages/wallet/index", / / purse page

"pages/charge/index", / / recharge page

"pages/logs/logs" / / Log Page

]

"window": {

"backgroundTextStyle": "light"

"navigationBarBackgroundColor": "# b9dd08", / / title bar background color

"navigationBarTitleText": "ofo shared bike", / / title block text

"navigationBarTextStyle": "black" / / title block text style

}

}

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.