How to develop a calculator applet

This article introduces how to use WeChat applet to develop a calculator applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to friends who are learning WeChat applet development!

Abstract: WeChat applet development is actually not difficult. Before I mastered it, I didn’t realize how powerful it was, and it seemed to be superior. In fact, it is simpler than our traditional writing method and highly encapsulated. According to their rules and specifications, the writing experience is still very good.

Let’s introduce this simple calculator and some pitfalls encountered during the development process. First of all, there are a lot of web developer tools, documents, etc. on the Internet, so I won’t repeat them. There is no need to crack anymore. WeChat has officially modified the verification mechanism, and you can play without APPID. But Some functions are limited. Developing WeChat mini programs is actually not difficult, even though it seems very advanced. In fact, it is simpler than our traditional writing method and highly encapsulated. According to their rules and specifications, the writing experience is still very good.

But because there is no permission, the current WeChat applets are run in the emulator of the developer tools. I don’t know what the actual situation is on WeChat.

xxx.wxml file and xxx.wxss file

wxml is a set of markup languages ​​developed by WeChat itself. You can view it directly as an HTML file, because our interface construction is all It is written in this file, but there are no HTML tags, only wxml tags, and the number of wxml tags is also very small.

wxss is a set of style file formats developed by WeChat. It is equivalent to our CSS file. The writing method is the same, but the file suffix is ​​changed. How did we write it before? How do we still write CSS in WeChat mini programs?

wxml plus wxss we can build the interface UI we want.

xxx.js and xxx.json files

The xxx.js file is where JS is written. Each xxx.js corresponds to a xxx.wxml file with the same name. The xxx.js file must have Page object, even if the page does not have any business logic. Enter Page WeChat Web Developer Tool will automatically generate a series of empty methods for you to implement. Of course, you don’t have to implement them. It just sets up the skeleton for you.

xxx.josn file is the configuration file, which is generally used for global configuration. For example, app.josn in the root directory defines which pages the mini program consists of, and the mini program navigation. Bar style, etc. You can know what the attributes mean by looking at their names.

The pages attribute configures the page. The first one is the startup page. All pages must be configured here. If you create a page and forget to add it here, then You will be very depressed, because the onLoad method will not be executed when the page jumps. I wasted a lot of time scratching my head and curious about this.

Overall structure

Look at the project structure diagram below. A page is a folder, and a page usually has js, wxml, and wxss. wxml and js files are necessary and can be There is no style.

calc (calculator page), history (history record), index (mini program home page, startup page), logs (log information), utils (js tool class) , logs and utils are built-in and can be used or not.

Source code analysis

The interface layout of this simple calculator still continues the original system, using CSS Flexbox layout, which seems to be recommended by WeChat officials (Flexbox is used in the official documentation).

The buttons of the calculator are all made with labels, just add the wxss style. Of course, you can also use the button component directly.

The bindtap here, as you can see from the name, is used to bind events, just like we use onclick in HTML. id={{id9}} The value in double curly brackets comes from the attribute of the same name defined by the data attribute in the js file

#There is nothing to say about css. The only thing that needs attention is WeChat provides a size unit rpx, responsive pixel, which can be adapted according to the screen width. It is also used on the history page of the calculator:

mainly involves the components

view and text, and most of the pages are composed of these two buddies.

Button, the button "Simple Calculator" on the index page

Icon (icon), the computer history record quietly uses one of the icons that comes with icon.

Marking method adjustment page (navigator)

Mainly involves API

wx.navigateTo, Navigation, jump, open a new page in the current page

Storage, local storage, saving calculation history uses setStorage, getStorage, and also ends with Sync Asynchronous method

Rendering:

##Notes

Every When creating a new page, you must remember to add it to the pages attribute of app.josn. Otherwise, the onLoad method of the new page will not be executed after using navigateTo to jump to the new page.

There are no JavaScript objects such as window in the WeChat applet, so think of alternatives before writing JS. For example, this calculator was greatly fooled. Originally, the eval function could be used to conveniently calculate expressions, but it failed. It's a big detour.

The JS in the WeChat applet is not real JS, and wxss is not real CSS, so you still need to pay attention when writing.

Generally speaking, the WeChat mini program is not difficult, and the official documentation is also very well written. Just read the official documentation carefully.

This article is reproduced from: http://zixun.jisuapp.cn/xcxkfjc/4488.html

Recommended: "

小program development tutorial"

The above is the detailed content of How to develop a calculator applet. For more information, please follow other related articles on the PHP Chinese website!