第一次接触微信小程序，不管接触什么新东西，个人觉得只要写好数组的增删改查，就会了解大部分东西了（个人爱好），新手写的东西，代码可能会很胖。
大概就是这么样子，本文只是记录自己摸索微信小程序的过程，可能并无实际作用
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
})
}
})