On February 8, 2017, he released his first small program: "Record Basal Body Temperature". The demand stems from his wife's habit of recording basic body temperature. I made a webapp before. After the applet was officially released, I wanted to familiarize myself with the development process of the applet. The procedure is very simple, the function is very simple, for the purpose of experience development. Of course, now that it's finished, I paid the certification fee and released it. The following is a summary of the experience
development tools
I do n’t understand why, the official development tool has not yet been version 1 of the small program that has been officially released. The latest update was made a few days ago, and the version number is 0.13.140600.
Initially, I planned to use mac to develop, but the development tools have been suspended in the state of mac. I tried to uninstall and reinstall, and it took a few times to enter the development interface normally. But the back is not smooth. When saving the code, the high frequency will be stuck, and there is no problem with the preview interface. I also tried a third-party development tool, Egret Wing. But in the end, I still found windows for development.
In addition, I feel that the official development tools are a bit crude. The debugging interface has a high probability of telling me to reconnect; there is a big gap between the font of the preview interface and the real machine debugging; the Chinese input experience during coding is poor; the "compile" and the icon above, I still don't understand what it is doing Used; after configuring the request legal domain name on the platform, click "Refresh" on the development tool to take effect; and I am used to using dark theme ...
Official documents
For a officially released commercial project, can your official documents be commercialized!
wx.drawCanvas()Not recommended, can you update the canvas instance code:
wx.drawCanvas({
canvasId: 'firstCanvas',
actions: context.getActions() // 获取绘图动作数组
})The page route acquisition parameter wx.navigateTo({url: 'test?id=1'})document says:
Page({
onLoad: function(option){
console.log(option.query)
}
})Should option.query.idI get the id parameter ? Actually it is option.id.
frame
Cannot use npm package
Can't use the npm package, it feels like going back to liberation overnight.
In order to easily operate the time, I copied a copy of moment.js to use. I did not expect moment().format()it to return normally. The returned function string is not the date string. Not sure if it is a problem of moment or a small program.
In order to show changes in body temperature in the program, it is intended to use a graph form. The first thing I thought of was the highcharts used in the web version before, but I think that svg must not be used, and the canvas interface is also inconsistent with H5, so I gave up. I have seen chart libraries written by other people for small programs, but I thought about downloading and copying, and it is not exactly the effect I want, forget it.
Communication between pages
Officials do not seem to provide a solution for communication between pages. So simply wrote an EventBus to use. This way is very obscure, there is no good way to name the event, and often forget where this event came from.
Custom component
Without a chart library, I plan to write a simple histogram component myself. Is this how I realized that applets can customize components? There are templates and styles (wxss), but there is no place to write logic. After reading this article at that time , I put the packaged component first and thought about it after finishing the program.
WXML has no filter
I have always used Vue, and there is no filter for binding data in the view layer of the applet, which is somewhat inconvenient. Be sure to format the display data, and then put it as a variable in data, and then bind it, so that the code is somewhat redundant.
canvas is always the top layer
The canvas component is a native component created by the client, and its level is the highest
The lower part of the first page is a two-level wave animation, drawn using canvas. Originally intended to add a button in the middle of the wave area, but because of the top layer of the canvas, the button will be covered. Covered, but still clickable. If you draw a button with another canvas and put it there, it can be placed above the wavy canvas layer.
The built-in debugging buttons and interface will also be covered by canvas:
Another thing about canvas is that large-scale canvas animation is drawn, and the power consumption is considerable.
About animation
I am used to it requestAnimationFrameand feel a little uncomfortable to re-use the timer.
compatibility
I thought that as a native, there should be no compatibility issues between ios and Android. But the transparency of canvas does not seem to take effect in Android. Other compatibility issues have not yet been encountered.
At last
Although the entire development experience is not pleasant, I am still optimistic about the prospects of small programs at this stage. Before doing development, I also specifically spent more than an hour reading Zhang Xiaolong's speech, agreeing with his vision of small programs. Although the H5 that the applet can do can also be done, the experience in WeChat has improved a lot: without the nasty title bar, without the slow authorization jump, and various H5 compatibility issues should be less Quite a lot.
Taking an applet to make such a tool program is purely for practice, and the application of the applet is not here. In addition, the applets I have experienced should not be made applets in terms of purpose. The small program store is also a silly idea.