Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to define and use the frame in WeChat Mini Programs". In daily operation, I believe many people have doubts about how to define and use the frame in WeChat Mini Programs. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to define and use the framework in WeChat Mini Programs". Next, please follow the editor to study!

The functional demonstration of todo app in this article:

Note: you need to press the text of todo to edit directly. Because it is on the mobile side, you cannot use the double-click event to edit it, but instead the long-press event. Mini Program's platform also does not provide binding for double-click events.

If you want to run the project locally, you need to install the developer tools first and build a project as described in the simple tutorial in the document

After the construction, the developer tool will open the project.

Then on the disk, find the folder of the built project, delete all the contents, and paste all the files under the source folder above.

Then reopen the developer tool, first go to the edit tab, then click the compile button, and you will go directly to the debugging interface to view the functions of app:

Here are the main points of this app development:

1. The directory structure and configuration of this app are not described in detail, which are described in detail in the document-framework section. There are no html and css in this platform, but wxml and wxss instead. There is little difference between wxss and css, except that it is not as powerful as css and supports a limited number of selectors. But the advantage is that since there is only one platform on Wechat, there are few compatibility issues and can use standard, newer css technology. Wxml can only use the tags of those components provided by the platform, and the tags of html cannot be used directly. Examples of how each component is used in wxml can be found in the documentation-components section. So in fact, there is no difficulty in writing wxml and wxss.

2. Wxml supports the following features:

In todo app, except for templates and references, everything else is used, but the details of each feature are not used, only the appropriate functions are selected according to the needs of app. A few days ago, I saw an article saying that WeChat Mini Programs may be based on the vue framework, so I took a look at the vue document. For data binding, conditional rendering, list rendering, and events, we all take a closer look at the use of vue. By comparison, the features provided by wxml are quite similar to those of vue, but there are not so many functions, so you can't easily use the features of vue framework directly into Mini Program. Best practice is based on the instructions provided in the official documentation, and it certainly won't work if you use a guesswork for features that are not mentioned in the official documentation. I looked at the prototypes of some objects by printing, and did not find more instance methods than the official documents, indicating that the framework function of Mini Program is indeed limited.

3. Wxss can actually be written in less or sass, as long as the selector meets the requirements of the framework. Due to time reasons, I didn't try it in this app.

4. There is no two-way binding. In vue, a vue instance is an update to the data in the view-model;view layer, which will be fed back to both model;model and view in real time. In Mini Program, there is no two-way binding, and the updates of view will not be synchronized directly to the model;. You need to get the data directly from the view layer in the callback of related events, and then update the model through setData. The internal Mini Program will render the page again after the setData. For example, for a single todo item, the operation of toggle:

ToggleTodo: function (e) {var id = this.getTodoId (e, 'todo-item-chk-'); var value = e.detail.value [0]; var complete =!! value; var todo = this.getTodo (id); todo.complete = complete; this.updateData (true); this.updateStorage ();}

In the above code, the value of checkbox in a single todo item is obtained through e.detail.value [0], and the complete status of todo is determined by this value. Finally, inside the updateData, the contents of the model are refreshed through the setData method. Only in this way will the statistics at the bottom of the toggle be updated after the app operation.

5. When event binding, parameters cannot be passed, only one event can be passed. For example, for the operation of the toggle above, I actually want to transfer the id of the current todo to this callback in the callback, but I can't do it any way. In the end, I can only deal with it in the way of id: that is, add an id to the component that binds the event in wxml, and the full page of this id cannot be repeated, so id has to be prefixed, and then add the id value of todo at the end of the id. When the event is triggered, you can get the id of the component through e.currentTarget.id, remove the corresponding id prefix, and get the id value of todo. This is a method currently used, which I don't think is very elegant. I hope we can find a better way to achieve it later.

6. The effect of loading is taken into account in app, which is realized by using the loading attribute of the button component. But loading is only a style control, it does not control whether the button can be clicked repeatedly. So use the disabled attribute of buttong to prevent repeated clicks.

The remaining implementation details are in the source code of the following two files, you are welcome to point out the problems.

Source code of index.wxml:

+ Add {{todo.text}} Clear {{todosOfUncomplted.length}} left. Clear {{todosOfComplted.length}} of done. {{loadingText}} {{toastText}}

Source code of index.js:

Var app = getApp (); Page ({data: {todos: [], todosOfUncomplted: [], todosOfComplted: [], newTodoText:'', addOneLoading: false, loadingHidden: true, loadingText:'', toastHidden: true, toastText:', clearAllLoading: false}, updateData: function (resetTodos) {var data = {}; if (resetTodos) {data.todos = this.data.todos) } data.todosOfUncomplted = this.data.todos.filter (function (t) {return! t.complete;}); data.todosOfComplted = this.data.todos.filter (function (t) {return t.complete;}); this.setData (data);}, updateStorage: function () {var storage = [] This.data.todos.forEach (function (t) {storage.push ({id: t.id, text: t.text, complete: t.complete})); wx.setStorageSync ('todos', storage);}, onLoad: function () {this.setData ({todos: wx.getStorageSync (' todos') | | []}); this.updateData (false) }, getTodo: function (id) {return this.data.todos.filter (function (t) {return id = = t.id;}) [0];}, getTodoId: function (e, prefix) {return e.currentTarget.id.substring (prefix.length);}, toggleTodo: function (e) {var id = this.getTodoId (e, 'todo-item-chk-'); var value = e.detail.value [0]; var complete =! value Var todo = this.getTodo (id); todo.complete = complete; this.updateData (true); this.updateStorage ();}, toggleAll: function (e) {var value = e.detail.value [0]; var complete =! value; this.data.todos.forEach (function (t) {t.complete = complete;}); this.updateData (true); this.updateStorage ();}, clearTodo: function (id) {var targetIndex This.data.todos.forEach (function (t, I) {if (targetIndex! = = undefined) return; if (t.id = = id) {targetIndex = I;}}); this.data.todos.splice (targetIndex, 1);}, clearSingle: function (e) {var id = this.getTodoId (e, 'btn-del-item-'); var todo = this.getTodo (id); todo.loading = true; this.updateData (true); var that = this SetTimeout (function () {that.clearTodo (id); that.updateData (true); that.updateStorage ();}, 500);}, clearAll: function () {this.setData ({clearAllLoading: true}); var that = this; setTimeout (function () {that.data.todosOfComplted.forEach (function (t) {that.clearTodo (t.id);}); that.setData ({clearAllLoading: false}); that.updateData (true) That.updateStorage (); that.setData ({toastHidden: false, toastText: 'Success'});}, startEdit: function (e) {var id = this.getTodoId (e,' todo-item-txt-'); var todo = this.getTodo (id); todo.editing = true; this.updateData (true); this.updateStorage () }, newTodoTextInput: function (e) {this.setData ({newTodoText: e.detail.value});}, endEditTodo: function (e) {var id = this.getTodoId (e, 'todo-item-edit-'); var todo = this.getTodo (id); todo.editing = false; todo.text = e.detail.value; this.updateData (true); this.updateStorage ();}, addOne: function (e) {if (! this.data.newTodoText) return This.setData ({addOneLoading: true}); / / open loading this.setData ({loadingHidden: false, loadingText: 'Waiting...'}); var that = this; setTimeout (function () {/ / close loading and toggle button loading status that.setData ({loadingHidden: true, addOneLoading: false, loadingText:'}) That.data.todos.push ({id: app.getId (), text: that.data.newTodoText, compelte: false}); that.setData ({newTodoText:'}); that.updateData (true); that.updateStorage ();}, loadingChange: function () {this.setData ({loadingHidden: true, loadingText:''}) }, toastChange: function () {this.setData ({toastHidden: true, toastText:''});}}); at this point, the study on "how to define the use of the framework in WeChat Mini Programs" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.