第一次接触微信小程序,不管接触什么新东西,个人觉得只要写好数组的增删改查,就会了解大部分东西了(个人爱好),新手写的东西,代码可能会很胖。
大概就是这么样子,本文只是记录自己摸索微信小程序的过程,可能并无实际作用
wxml:
viewview 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 /viewcss:(本来可以更好看,但是懒得弄了)
.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(中间的曲折离奇,个中滋味得自己体会)













