With a jump a small game and brain king of brainwashing style popular, small program seems to announce to the masses of users, it is going to force. The company also has more and more small program needs, so I also slowly developed several small program projects. Below I put my own in the process of development encountered some pits to record, to prevent the future step on pits.
1. Differences between the simulator and the real machine
In the course of development, there are numerous examples of things that work well on the simulator but fail on the real machine. For example, the use of animation, the use of positioning on cover-view, good in the simulator, but not in the real machine, and so on and so on. The main reason for this confusion is the different kernels on PC and mobile. Avoid pitfalls: During development, use the real machine every now and then to see how it works.
2. View references to local images
When we write pages, we often use a tag, and then write the image to the tag, and directly refer to it, such as the following example:
<view class="icon"></view>
Copy the code.icon{
color: #1d1d1d; background-image: url(.. /image/doll_user_bg.png); Width: 50 the RPX; height:50rpx; }Copy the codeAt first glance it looks fine, but in fact when you’re in the simulator or on the real thing, the pictures don’t come out. The reason is the reference to the relative path. Ways to avoid the pit: (1) Directly add the path of the picture to the attribute of the tag
<view class='icon' style="background-image: url('.. /image/doll_user_bg.png');"></view>
Copy the code(2) Use the absolute path
.icon{
color: #1d1d1d; background-image: url(https://webtest.yystatic.com/project/yyDoll/mobile/image/doll_user_bg.png); Width: 50 the RPX; height:50rpx; }Copy the code(3) Use the image tag instead of the View tag directly
<image src='.. /image/doll_user_bg.png'></image>
Copy the code3. The cover – the view style
Because the level of the video tag in the applet is the highest, it cannot be overridden. So cvoer-view came into being. It is used to cover the video label above, on the video label to be decorated around the sharp weapon. However, while I was happily thinking the tag was working, I encountered a lot of weird pits. For example, using relative positioning on a cover-view, when the size of the video tag changes, the elements on the cover-view become messy. For example, rounded corners do not work and so on. For more details, see the developer community. Developers.weixin.qq.com/search?acti… Avoid pit method: try not to use location on cover-view, other bugs can only wait for official optimization, everyone use caution.
4. Develop the authorized login of small programs and the interconnection of company accounts
It’s easy for a general authorized login, but if you want to connect your company’s account system to wechat, the process is not easy.
Let me tell you what my process is. First, I need to apply for the appID of account interconnection from the company, and then I need to be bound and reviewed by multiple departments, and then I need to bind the appID of small program under the developer account of the company. Then wait for the account colleague to get through the account, and then realize the account interconnection authorized login. The process may vary from company to company, but it is written here as a record of the steps so that you don’t have to tread in the sand in the future.
5. Surround yourself with text
When you have a cover-view with mixed text around it, you’ll find that some of the usual methods don’t work.
<cover-view><cover-image src="img.gif" / > text around the text around the text around the words around the text around the words around the words around the text around the words surrounding the text around the text around the words around the text around the words around the words around the text around the words around the words around the text around the words around the words around the text around the words around the words around the text around the words around the words around the text around the words around the text Around < / cover - view >Copy the code
The most commonly used image float has no effect. Use positioning, use indentation, use CSS3 properties, etc., to get the effect on the real machine can not normally display text mixed around. At present, no solution has been found, there are tried in the cover-view implementation of children’s shoes, for code.
6. Webview and applet communication
At first, I was very excited to see a small program embedded with a WebView. Because some small programs are difficult to achieve or some pages need to change frequently dynamic, you can achieve the desired effect through the WebView embedded. But when I used it, I found it was a mistake. Webview and applet actually have no more perfect communication mechanism. Communication between applets and WebViews, such as parameter passing, currently only supports parameter passing for URLS. Such as:
< web - view SRC = "https://mp.weixin.qq.com? password=12212&name=sasa&ticket=215328736dsadaadasdadaswuqsahkshakskahskahsakhsakshkasha327428749827487284729847382dsakh dlahdlahskjhdlkhlkadhldkhal"></web-view>Copy the codeIf you have an embedded WebView that requires login, you can only pass the account password, ticket, etc. to the parameters in the URL. That’s right. I wonder if one day I want to send a complex form data that sour. I hope the children’s shoes of wechat can improve the communication mechanism.
7. Input text center problem
The input component uses the percentage width, and the placeholder text is set to text-align: canter, so the text will not be centered. Text-align is not supported for the input percentage, but for the placeholder to be centered, the input length should be dead.
8. Restrictions on sending template messages
If the user does something in your mini program, such as pay or consume your virtual product, you may need to send a message to remind the user or inform the user. This is where the template message comes in. When you want to send a message, you will find that there are only two situations in which you can send a message. When the user completes the payment behavior in the mini program, the developer can be allowed to push a limited number of template messages to the user within 7 days (3 messages can be delivered for one payment, and the number of messages can be delivered independently for multiple payments, without mutual influence) 2. Submit the form Happened when a user within the small application form is submitted behavior and the form of statement to send message template, developers need to provide customers with services, allowing developers to push to the user in the 7 days news article limited the number of template (1 submission form can be issued 1, article submitted issued several independent for many times, do not affect each other) note: At present, only these two situations can be sent messages, and there is a limit on the number of messages, keep in mind.
9. Other occasional bugs and tips
When developing small programs, there will be some small bugs, for example: 1. Longpress sometimes works, sometimes fails 2. Card… Meal… 3. Sometimes the getUserInfo method fails to obtain user information. You are advised to use polling to obtain the user information and then stop 4. Small programs that want to use special fonts can convert them to Base64 and then introduce use 5. If you want to do the demand related to live broadcasting, do not use the video tag, please use live-player, which can achieve better low latency 6. Before developing the applet, you need to check whether the applet has opened the category, otherwise it will be blocked later (don’t ask me why I know =_=!!).
Alone
2018-05-27