introduction
I have used small programs developed natively and I know that there are not many other functional contents besides api. It is more difficult to start for large-scale projects, so I recommended the wepy recommended by my friends. . .
Such a framework is similar to Vue's development method, but similar to Vue, but it's really not that simple to use. API development still has some discrepancies with some vues, so the following records, the tutorials started will not be issued but only stepped on the pit.
Official documents
The official documentation of the
applet Wepy official documentation
Here are the pits that have been stepped on
wepy problem search
https://github.com/Tencent/we...It
is recommended to find the problems encountered here after asking questions.After all, here is a complete collection
Shorthand instructions in the label
Similar to Vue
- For dynamically assigned attributes you can use: attr = "value"
- For the binding event, you can use @ click = "fn"
Points to note when using data
For the data that needs to be used in the view, you should define it in data in advance, even if there is no data at this time, you should also define a null value
Use of methods in WePY
- Only the bind and catch events of the page can be declared, and no custom methods can be declared
- Custom methods should be level with methods
this application
Modifying the attributes or assignments in data in the applet requires the use of this.setdata () and wepy basically uses the this. Attribute. If it returns asynchronously or updates the dom, this. $ Apply () is needed to trigger dirty value detection
Page jump
The difference between navigateTo () and redirectTo ().
navigateTo () keeps the current page and jumps to a page in the application (ie: displays the return button in the upper left corner of the top navigation bar, which can have a return path)
redirectTo () closes the current page and jumps to a page in the application ( That is, the return button in the upper left corner is not displayed. If you need to return to add the button writing path in the page yourself or use wx.navigateBack () and getCurrentPages () to get the current page stack, decide how many layers need to be returned.
- Simply put, if you need to return the tabbar, use navigateTo, or redirectTo if you do n’t need it.
- You can only use switchTab () to jump to the tabbar page
File Upload
There is no file field (<input type = "file" />) in traditional html for uploading files. To upload files, you can only use the API: uploadFile ()
Update DOM $ apply
If you need to update the DOM, you should call the $ apply method of the component instance later to update to the page
this.name="abc";
this.$apply()
- PS: For applications with high performance requirements, do not frequently call $ apply () to update the DOM. You can update the parent component to transfer data to the child component according to the actual situation, and pass the props
- If you need to transfer dynamic data, you can solve it by adding the .sync modifier (: prop.snyc = 'item')
- If you need to synchronize the data of the child component to the parent component, you need to set twoWay: true when defining props
- (All asynchronous data transfer must use $ apply, only use Sync if it is synchronized)
mixin
Wepy's mixin, in reverse order of the mixin in vue
- In wepy, the component itself will be executed first, and then the mixin
- For the hook function in vue, the mixin will be executed first, and then the component itself will be executed; if the methods in vue have the same name as the mixin, then only their own methods will be executed
About canvas and base64
Canvas related operations can be performed in the applet, but it is different from the canvas in the pure html (api difference), the use of canvas should refer to: the canvas in the applet
ArrayBuffer and base64 conversion
The content of this paragraph is not searchable in the documentation, but it is indeed supported. The following two methods are used:
wx.arrayBufferToBase64(arrayBuffer)
wx.base64ToArrayBuffer(base64)
Naming conventions
The instance APIs defined inside the applet all start with $, so we cannot start with $ when defining instance properties and methods to distinguish
Components with the same name share the same instance and data
When rendering components in a loop, component data is susceptible to contamination. You can use the outermost component to listen to the event to bubble up to modify the data, while the component that triggered the event is wrapped with setTimeout to ensure the order of execution.
Loop rendering components:
Wepy's loop rendering component must use the <repeat> tag, or the WeChat official <block> tag (both of these tags will not be rendered to dom) otherwise it will not render successfully.
The component component does not have onLoad and other page events
- Set this. $ Broadcast ('someEvent', option) in the page;
- Component monitoring events can be resolved
page
The page class, inherited from wepy.component, has all the properties and methods of the page.
All properties are inherited from wepy.component. And wepy.component does not have onLoad and other methods
To be continued -----------------