第一次接觸微信小程式，不管接觸什麼新東西，個人覺得隻要寫好數組的增删改查，就會了解大部分東西了（個人愛好），新手寫的東西，代碼可能會很胖。
大概就是這麼樣子，本文隻是記錄自己摸索微信小程式的過程，可能并無實際作用
wxml：
< view > < view class= "{{showView?'show':'hide'}}" > < input bindinput = "userNameInput" placeholder= "請輸入修改内容" ></ input > < button bindtap= "queding" >确定 </ button > < button bindtap= "quxiao" >取消 </ button > </ view > < view class= 'v1' > < view wx:for= "{{array1}}" wx:for-index= "index" wx:for-item= "item" > < view class= 'line-main' > < view class= 'line-buck' >{{index+1}}、{{item}} </ view > < view class= "line-buck line-img" bindtap= "addarray" id= "{{index}}" > < image class= 'button-add ub-img1 ' src= "../../image/icon-add.png" ></ image > </ view > < view class= "line-buck line-img" bindtap= "selectarray" id= "{{index}}" > < image class= 'button-add ub-img1 ' src= "../../image/icon-edit.png" ></ image > </ view > </ view > </ view > </ view > < view class= 'v2' > < view wx:for= "{{array2}}" wx:for-index= "index" wx:for-item= "item" > < view class= 'line-main' > < view class= 'line-buck' >{{index+1}}、{{item}} </ view > < view class= "line-buck line-img" bindtap= "delarray" id= "{{index}}" > < image class= 'button-add ub-img1 ' src= "../../image/icon-close.png" ></ image > </ view > </ view > </ view > </ view > </ view >
css：（本來可以更好看，但是懶得弄了）
.line-main { font-size: 1em ; vertical-align: middle ; } .line-buck { display: inline-block ; line-height: 50px ; text-align: center ; } .line-img { display: inline-block ; position: relative ; float: right ; } .v0 { width: 100% ; } .v1 { float: left ; width: 45% ; } .v2 { float: right ; width: 45% ; } .button-add { border-radius: 15px ; vertical-align: middle ; background-color: black ; text-align: center ; height: 30px ; width: 30px ; }
.ub-img { -webkit-background-size: contain ; background-size: contain ; background-repeat: no-repeat ; background-position: center ; } .ub-img1 { -webkit-background-size: cover ; background-size: cover ; background-repeat: no-repeat ; background-position: center ; } .ub { display: -webkit-box !important ; display: box !important ; position: relative ; } .ub-rev { -webkit-box-direction: reverse ; box-direction: reverse ; } .text-input {
} .text-button {
} .text-main {
} .hide { display: none ; } .show { display: block ; }
js：
//index.js //擷取應用執行個體 const app = getApp ()
Page ({ data : { motto : 'Hello World' , userInfo : {}, hasUserInfo : false , canIUse : wx .canIUse ( 'button.open-type.getUserInfo' ), i : 0 , array1 :[ "UZI" , "MLXG" , "小虎" , "卡莎" , "Letme" , "Ming" ], array2 :[], showView : false , userName : "" , index : 0 }, //事件處理函數 bindViewTap : function () { wx .navigateTo ({ url : '../logs/logs' }) }, add : function (e ) { var that = this ; var i = Number (that .data .i ) + Number ( 1 ); console .log ( "加完" ,i ); that .setData ({ i : i , motto : 'Hello World+' + i }) }, addarray : function (index ){ console .log (index ); var id = index .currentTarget .id ; var value = this .data .array1 [id ]; console .log ( "value" ,value ); var array2 = this .data .array2 ; array2 .push (value ); console .log ( "array2" ,array2 ); var array1 = this .data .array1 ; array1 .splice (id , 1 ); console .log ( "array1" , array1 ); this .setData ({ array2 : array2 , array1 : array1 }) }, delarray : function (index ) { console .log (index ); var id = index .currentTarget .id ; var value = this .data .array2 [id ]; console .log ( "value" , value ); var array1 = this .data .array1 ; array1 .push (value ); console .log ( "array1" , array1 ); var array2 = this .data .array2 ; array2 .splice (id , 1 ); console .log ( "array1" , array2 ); this .setData ({ array2 : array2 , array1 : array1 })
}, selectarray : function (index ){ var id = index .currentTarget .id ; this .setData ({ showView : true , index : Number (id ) })
}, quxiao : function (){ this .setData ({ showView : false })
}, queding : function (){ this .setData ({ userName : "" })
this .setData ({ showView : false })
}, userNameInput : function (e ){ this .setData ({ userName : e .detail .value }) var array1 = this .data .array1 ; array1 [ this .data .index ] = this .data .userName ; this .setData ({ array1 : array1 }) }, onLoad : function () { if (app .globalData .userInfo ) { this .setData ({ userInfo : app .globalData .userInfo , hasUserInfo : true }) } else if ( this .data .canIUse ){ // 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之後才傳回 // 是以此處加入 callback 以防止這種情況 app .userInfoReadyCallback = res => { this .setData ({ userInfo : res .userInfo , hasUserInfo : true }) } } else { // 在沒有 open-type=getUserInfo 版本的相容處理 wx .getUserInfo ({ success : res => { app .globalData .userInfo = res .userInfo this .setData ({ userInfo : res .userInfo , hasUserInfo : true }) } }) } }, getUserInfo : function (e ) { console .log (e ) app .globalData .userInfo = e .detail .userInfo this .setData ({ userInfo : e .detail .userInfo , hasUserInfo : true }) } })
完成代碼差不多就這樣，OK（中間的曲折離奇，個中滋味得自己體會）