第乙個微信小程式

2022-01-18 02:36:24 字數 2468 閱讀 6455

官方文件:

相關原始碼:

2. wxml支援以下這些特性:

4. 沒有雙向繫結。在vue裡面,乙個vue例項就是乙個view-model;view層對資料的更新,會實時反饋到model;model的更新,也會實時反饋的到view。在小程式裡面,沒有雙向繫結,view的更新不會直接同步到model;需要在相關事件**裡面,直接從view層拿到資料,然後通過setdata的方式,更新model,小程式內部會在setdata之後重新渲染page。比如單個todo項,toggle的操作:

- hide code

toggletodo: function( e ) ,
5. 事件繫結的時候,無法傳遞引數,只能傳遞乙個event。比如上面那個toggle的操作,我其實很想在**裡面把當前todo的id傳到這個**裡面,但是想盡辦法都做不到,最後只能通過id的方式來處理:就是在wxml中繫結事件的元件上面,加乙個id,這個id全page也不能重複,所以id得加字首,然後在id最後加上todo的id值;當事件觸發的時候,通過e.currenttarget.id就能拿到該元件的id,去掉相應的id字首,就得到todo的id值了。這是目前用到的乙個方法,我認為不是很優雅,希望後面能發現更好的辦法來實現。

index.wxml的原始碼:

- hide code

+ add

} clear

} left.

0}}">

clear } of done.

}

}

index.js的原始碼:

- hide code

page( ,

updatedata: function( resettodos ) ;

if( resettodos )

data.todosofuncomplted = this.data.todos.filter( function( t ) );

data.todosofcomplted = this.data.todos.filter( function( t ) );

this.setdata( data );

},updatestorage: function() )

});wx.setstoragesync( 'todos', storage );

},onload: function() );

this.updatedata( false );

},gettodo: function( id ) )[ 0 ];

},gettodoid: function( e, prefix ) ,

toggletodo: function( e ) ,

toggleall: function( e ) );

this.updatedata( true );

this.updatestorage();

},cleartodo: function( id )

});this.data.todos.splice( targetindex, 1 );

},clearsingle: function( e ) , 500 );

},clearall: function() );

var that = this;

settimeout( function() );

that.setdata( );

that.updatedata( true );

that.updatestorage();

that.setdata( );

}, 500 );

},startedit: function( e ) ,

newtodotextinput: function( e ) );

},endedittodo: function( e ) ,

addone: function( e ) );

//open loading

this.setdata( );

var that = this;

settimeout( function() );

that.data.todos.push( );

that.setdata( );

that.updatedata( true );

that.updatestorage();

}, 500 );

},loadingchange: function() );

},toastchange: function() );

}});

微信小程式開發 第乙個小程式

實現結果 實際上就是切換的功能 專案目錄 images是我自己建立的,新增需要在專案檔案目錄中新增 其他都是自動生成的,很容易理解,index.wxml就是主頁面,index.js和index.wxss是其附屬的 分析 index.js page button function e if this....

我的第乙個微信小程式

同理,我是為了備份,我準備拿它來做實驗,來解決我檔案老是被清空的問題 pages demo demo.wxml wrap view view view view view view view view demo.wxss pages demo index.wxss page new v1.v1 vi...

微信小程式 第乙個新手專案

三個元件 文字 按鈕 分別是 名稱不可更改 用來放各個頁面的 給頁面起名字,並且建立4個檔案 js 頁面邏輯實現 json 負責標題欄和狀態列 wxml 管理頁面有什麼 wxss 頁面排布 樣式設計 寫法 內容 用class的方法對view內容樣式進行布局 class可以對其他元件樣式布局也有效,c...