The new company gets started with small programs.
30 days, from entry to the present, has not given up. . .
Although the mini program was released almost a year ago, most of the brothers who climbed the pit have stepped on the pit. And I have been stuck in the learning phase of "Hello World".
First, there is no project, only the project is the basis of practical learning;
second, just came out, there are always many pits. Climbing is always painful and happy.
No matter how many excuses, the product project needs to be surrendered at the table.
Don't counsel your sleeves, just do it.
New Applet
WeChat launches a small program that wants to achieve a user experience that is ready to use and ready to use. Eliminate the tedious process of APP download and installation. It sounds like Google's PWA, but it will be a while before PWA becomes popular in China. With the help of WeChat user groups, applets have low implantation costs and are easily accepted by users.
The code style of the applet is actually very similar to Vue. For students who are used to the Vue development model, there is not much problem with getting started.
The applet does not support mainstream front-end frameworks, such as Vue, Angular, React, jQuery, etc., and the applet has its own set of view container (Dom) writing, which is different from the usual HTML we write on the web. But CSS3 hasn't changed much. Although the file name was changed to (.wxss)
This project uses webpack as a packaging tool, compiles the code into a code catalog specification that complies with small programs, and uses the wechat-mina-loader plug-in. The actual development is the same as the development habits under Vue.
Babel completed ES6 to ES5, sass compilation, compression and transformation, etc. all put it in webpack.
Does not support dom operation
Window and document objects cannot be used in applet scripts, so dom cannot be operated. If you want to operate the node, availablewx.createSelectorQuery()
In addition, the data-driven development model is the same as Vue, but the writing is changed (vue: v-if, applet: wx: if)
rpx layout
rpx (responsive pixel): Can be adaptive according to the screen width. The screen width is 750rpx. For example, on the iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px = 1 physical pixel.
Designers can use iPhone6 as the basis for the design draft. Basically, you can replace px with rpx. However, in some forms or prompt pages, using rpx on the design draft will make the small screen mobile phone look smaller. Refer to weui to use px to achieve
Routing hierarchy
wx.navigateTo(OBJECT)
Keep the current page, jump to a page in the application, use wx.navigateBack to return to the original page
wx.redirctTo(OBJECT)
Close the current page and jump to a page in the app
wx.switchTab(OBJECT)
Jump to the tabBar page and close all other non-tabBar pages
wx.reLaunch(OBJECT)
Close all pages and open to a page in the app
The applet can only open and open 5 pages at the same time. When 5 pages are opened, wx.navigateTo cannot open a new page normally. Please avoid multiple levels of interaction or use wx.redirctTo to redirect
tabBar bottom navigation bar
tabBar is an array. Configure a minimum of 2 and a maximum of 5, tab arrays are sorted in order
Page scroll to top
Basic library 1.4.0 support
wx.pageScrollTo({
scrollTop: 0 //滚动到页面的目标位置（单位px）
})Image resources, background images in CSS
The CSS cannot use the image of local resources (in the development directory) as the background-image. You can use network image resources, or base64, or use the image tag. TabBar icon resources can use local resources
The difference between unionid and openid
Each user has a unique openid in each applet. If you want to share user information in multiple public accounts and applets to identify the user uniformly, you need to use the unionid. In order to obtain uniond, you need to register the WeChat open platform, and you need to bind the small program and public account to bind (no more than 10, more than 10 must apply for certification called the third platform).
textarea bug in scrolling pages
Textarea, map and other components are native components created by the client, and its level is the highest. If you encounter positioning elements. Always on top, can't cover it.
- Do not use textarea components in scroll-view, swiper, picker-view, movable-view
- CSS animation is invalid for textarea
Project scenario: A button (position: fixed) is fixed at the bottom of the page. When the page scrolls, the textarea is always on the button. Click the button to click the textarea
You can set the timeout for network requests
configuration in app.js
"networkTimeout": {
"request": 10000 // 10秒
}window configuration
navigationBarTextStyle navigation bar title color only supports black / white
status bar, navigation bar, title, window background color supports solid color, does not support gradient color
Parameter problem
- Add parameters in the url, such as
url?a=1&b=2,onLoad(options) options.query.a, options.query.bcan be obtained - Scan the applet code into the page, if you want to get the parameters contained in the applet code url, you can get it through options.scene, but you need to convert the scene value in the QR code decodeURIComponent (options.scene), you can use it in the debugging stage The conditional compilation of the development tool compiles the custom parameter scene = xxxx for simulation. The parameter value of the scene during the simulation of the development tool needs to be urlencode (startup parameter: scene = n% 3D1001) The actual scene = n = 1001, parameter n = 1001
image tag image
Image default width: 300px, height: 225px, lazy-load is only effective for images under page and scroll-view.
Mode zoom mode, mode = "widthFix" is more commonly used (the width is unchanged, the height changes automatically, and the original image width is maintained (High ratio unchanged)
The applet can monitor after the applet is closed, but cannot be blocked
Scenario: I want to pop up a prompt box when the applet exits and prevent it from closing (it is temporarily impossible to achieve)
Applet code
There are several ways for the applet code (sunflower code), and the applet code can be displayed normally only after the applet is released
The review time for the first submission of the applet is longer than the latter
The first submission review is usually 1 day to 2 days. So in order to be able to go online on time, it is recommended to go to the temporary version first (you can put a prompt page), after the first review release. Daily review, 2-3 hours is enough.
Frequent setData will cause performance problems
Frequent setData operations can cause stalls, serious feedback delays, and may even crash.
Scenario: Originally planned to use countUp for digital animation, the principle is to change the digital value frequently, setData operation, and render to the template.
ES6 to ES5, applet detects js files in the directory (very few)
In the project, webpack was used to convert ES6 to ES5, so the ES6 to ES5 function of WeChat applet was turned off. This pit is more concealed. During the test, a js error was reported on the 5S real machine. It was found that a js (ES6 was used, not ES5) file was not used. The WeChat applet will detect the js file in the directory. WeChat comes with ES6 to ES5, and detects that the js file in the directory is not compatible with ES5, and reports an error. This bug only appeared in 5S real machine, 5C is normal. If you turn on ES6 to ES5 in the WeChat development tool, it will automatically help you complete the conversion work, and there will be no similar problems.
Share some commonly used third-party libraries for small program development
- weui-wxss (weui style library of applet version) Github: https://github.com/Tencent/weui-wxss
- wepy (small program componentization framework) Github: https://github.com/Tencent/wepy
- skyvow / vux (little program component library) Github: https://github.com/skyvow/wux
- xiaolin3303 / wx-charts (small program icon) Github: https://github.com/xiaolin3303/wx-charts
Author: Mingle with the
paper original, place undue welcome that. Please indicate the source.