Detailed explanation of the WeChat applet framework and instance applications

This article mainly introduces the detailed explanation of the mini-program framework and related information about the instance application. if you need more information, refer Quickly understand the use of small programs, a todos app developed based on the small program framework

Official documentation and developer tools for applets have been opened. Two days ago, I was reading the relevant news to learn how to develop small programs. after the official documents of these two days came out, I quickly looked at them, I focused on the two parts of the framework and components in the document, and then made a general todo app according to the simple tutorial. This app is based on a small program platform and implements the general functions of the todo app. in order to make it closer to the actual work scenario, the loading and toast components are also used to complete the interaction and feedback of some operations. This platform gives me the intuitive feeling that, at the technical level, it is similar to vue, but far from vue powerful; the idea during development is not like vue, but rather like backbone. If you have used backbone, vue, and other mvc and mvvm frameworks, you will find this platform easy to use. This article mainly introduces some key points of the todo app implementation.

Add the following documents:

Official documents: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

Official developer tool download: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

The function of the todo app in this article is as follows:

In the todo app, except templates and references are not used, but the details of each feature are not used. you can only select the appropriate function based on the app's needs. A few days ago I saw an article saying that small programs may be implemented based on the vue framework, so I read the vue documentation. Vue usage is detailed for data binding, conditional rendering, list rendering, and events. In comparison, the features provided by wxml are similar to those related to vue, but there are not so many features, therefore, it is not easy to use the features of the vue framework in small programs. The best practice is based on the instructions provided in the official documentation. if the functions not mentioned in the official documentation are used by speculation, it will certainly not work. I checked the prototype of some objects through the print method, and did not find some more instance methods than the official documentation. This shows that the framework function of the applet is indeed limited.

3. wxss can be written using less or sass, as long as the selector meets the requirements of the framework. Because of the time, I did not try it in this app.

4. there is no bidirectional binding. In a vue, a vue instance is a view-model. The view layer updates the data, and the model is updated in real time. There is no two-way binding in the applet, and the update of the view will not be synchronized directly to the model. you need to get the data directly from the view layer in the event callback, and then use the setData method, update the model. the applet will re-render the page after setData. For example, the toggle operation for a single todo item:

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, use e. detail. value [0] to get the checkbox value in a single todo item, and use this value to determine the todo complete status. Finally, the content of the model will be refreshed through the setData method within updateData. Only in this way will the statistics at the bottom of the app be updated after the toggle operation.

5. When an event is bound, only one event can be passed because the parameter cannot be passed. For example, in the above toggle operation, I really want to upload the current todo id to this callback in the callback, but I cannot do anything I can, and I can only handle it by id: add an id to the component bound to the event in wxml, and the whole page of the id cannot be repeated. Therefore, the id must be prefixed and the id value of todo should be added at the end of the id; when an event is triggered. currentTarget. id to get the id of the component, remove the corresponding id prefix, and get the id value of todo. This is a method currently used. I don't think it is very elegant. I hope we can find a better way to achieve it later.

 
  
    
      
       
     
      + 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'   });  }, 500 ); }, 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();  }, 500 ); }, loadingChange: function() {  this.setData( {   loadingHidden: true,   loadingText: ''  }); }, toastChange: function() {  this.setData( {   toastHidden: true,   toastText: ''  }); }});

The last thing to add is that this app was developed based on the official documentation within a limited period of time, so it is not clear whether the implementation method here is reasonable. I only use this app to understand the usage of the mini-app platform. We hope the official team can launch some more comprehensive and project-oriented demos to provide these developers with a best practice specification at the code level. If you have other development ideas, please help me to point out the problems in the above implementation.

Through this article, I hope you can understand the small program framework. thank you for your support for this site!

For more details about the small program framework and related articles on instance applications, please follow the PHP Chinese network!