EDITORIAL, but the focus in the back
This is a tutorial, not a tutorial.
Demo can look at the operation of moving map and see what stuff, GitHub address (https://github.com/dunizb/wxapp-sCalc)
Since the micro-channel small closed beta program, my network information it is almost scraper, the moment, do not know what happened. Especially in the evening was a tutorial stay up all night vomiting blood, I go to Le, such a fight, do not feel immediately learn such a moment will be trampled to death by others in the industry. Fear of fear over a few days, until the National Day can finally stay up late to follow suit studied.
Well, come on, so that the rookie will write calculator. . . . Ah, yes, I can not think of any good ideas. Here's what this simple calculator, as well as some pit development process step on it.
First of all, what Web developer tools and the like, documents and the like, and more online is that I will not repeat, you do not need any cracked, micro-channel official verification mechanism has been modified, no APPID can play, but some functions limited.
Secondly, small micro-channel application development is not difficult, not to master before I feel Li is unknown, seemingly tall. In fact, he was a relative of our traditional wording simpler, highly encapsulates, in accordance with their rules and specifications, write up the experience is still very good.
But because there is no authority, there's a small micro-channel programs are running in developer tools in the simulators do not know what the real situation on the micro letter.
xxx.wxml files and file xxx.wxss
wxml is a micro-channel to develop their own set of markup language, you can just be seen as an HTML file no problem, because we build interfaces are written in this file, but no HTML tags, only wxml label, while wxml label the number is small. wxss is a micro-channel to develop their own set of style file format, equivalent to our CSS file, the wording is the same, just changed the file extension, before we write the CSS how we are still in the micro letter how to write a small program.
wxml plus wxss we can build what we want the UI interface.
xxx.js and xxx.json file
xxx.js place JS file is to write, each xxx.js corresponds to a file with the same name xxx.wxml, xxx.js file must have the Page object, even if the page does not have any business logic. Micro-channel input Page Web developer tool automatically generates a series empty method to be you realize, of course, you can not achieve, you just put the skeleton set the stage only.
xxx.josn file is the configuration file, usually only use the global configuration, such as the root directory app.josn, the definition of what constitutes a small program pages, applets Bar style navigation and other properties see the name to know what it means.
pagesProperties configuration page is the first page is started, all pages must be configured here, if you build a page forget to add here, then you will be very depressed, should be the time when the page jump onLoadmethod It does not perform, I was wasting a lot of time to catch the ear cheek curious Rao continued.
the whole frame
Consider the following project structure diagram, a page is a folder, a surface usually have js, wxml, wxss, wxml and js files is necessary, there can be no style.
calc (calculator page), history (history), index (applet page, start page), logs (log information), utils (js tools), logs and utils is built, there can be no.
Source code analysis
This simple calculator interface layout is still the continuation of the ancestors, the use of CSS Flexbox layout, seemingly official micro letter is so recommended (official document is to use Flexbox).
Calculator keys are used <text>labels do, plus wxss style can, of course, can be directly used button assembly.
wxml:
<view class="btnGroup">
<view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>
<view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>
<view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>
<view class="item orange" bindtap="clickBtn" id="{{idj}}">－</view>
</view>Here bindtap, look at the name to know is used to bind the event, with us in the HTML in onclicka sense. id={{id9}}The same name as the attribute value from the double braces data attribute definition file js
wxss:
.btnGroup {
display: flex;
flex-direction: row;
flex: 1;
width: 100%;
background-color: #fff;
}
.item {
width:25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 1px;
margin-right: 1px;
}
.item:active {
background-color: #ff0000;
}css nothing to say, only caveat is that micro-channel dimensions to provide a unit rpx, responsive pixel, may be adaptive according to the screen width, the official website document has a detailed analysis . I also have to use the calculator page in history:
Mainly related components
view, text, most of the pages are Talia buddies.
Button (button), index page button "Easy Calculator"
Icon (icon), the history of computer use is the icon of the quiet that comes with one of the icons.
Adjusted mark page (navigator)
Pictures (Image), Home Avatar
for circulation, history shows the page used, have to read data from Storage showcase, rather Storage is stored in an array
<block wx:for="{{logs}}" wx:for-item="log">
<view class="item">{{log}}</view>
</block>Mainly related API
wx.navigateTo, navigation, jump, open a new page in the current page
Storage, local storage, save the calculation history to use it
has setStorage, getStorage, as well as with the asynchronous method at the end of Sync
Precautions
Each page must remember to create a new property pages to app.josn added, otherwise use
navigateTothe jump to a new page, a new pageonLoadwill not execute method.Micro letter applet no window and other JavaScript objects, so before writing JS like a good alternative, such as a calculator was this big hole, and had to use
evalfunctions can easily evaluate the expression, the result can not use, around the big bend.Micro letter applet JS are not really JS, wxss also not true CSS, so the time to write or pay attention to it.
This calculator is imperfect and there is bug, because the focus is not to achieve full functionality, but figuring out a small micro-channel program development methodology, so the non-focus do not care.
Overall, small micro-channel program is not difficult, the official documentation is very well written, carefully read the official document like.
Finally, welcomed the junior partner star or fork [micro letter simple calculator applet version] conduct reference and learning, due to my limited level, program, or if not, or blog, please leave a message at the wrong point out, thank you!
In addition, there is my github [Micro letter applet - IMDb] project, welcomed the study
This article is reproduced in: ape ▶ 2048 https://www.mk2048.com/blog/blog.php?id=hh2h2jik1ab