微信小程序常见问题解决

• 居中

display: flex;flex-direction: row;justify-content: center;align-items: center;

• input

<!--通过value控制input的值，placeholder控制输入提示--><!--通过page的setData()方法，动态改变input的值--><!--通过bindconfirm监听处理键盘确定按键事件--><!--通过bindblur方法监听失去焦点事件--><input type="number" confirm-type="done"  value="{{car_price}}" placeholder-style="color:#FF6000;margin-right:10rpx;font-size:28rpx;" placeholder="请输入" class="car-price" bindconfirm="changeCarPrice" bindblur="changeCarPrice"/>

• 从子页面返回数据给父页面

wx.navigateBack()   //返回上一页var pages = getCurrentPages();var currPage = pages[pages.length - 1];   //当前页面var prevPage = pages[pages.length - 2];  //上一个页面<!--直接通过prevPage调用上一页的方法或是直接赋值-->prevPage.setCarInfo({   "car_model": e.currentTarget.dataset.car,   "car_price": 289000})

• 切换tab页

wx.switchTab({  url: '../CMSpecialCar/CMSpecialCar',})

• 动态改变样式，如字体颜色等

<text style="color:{{text_color}}">推荐车型</text><!--Js文件离直接通过赋值改变-->this.setData({    color: '#ffffff'})

• 设置整个页面的背景

<!--对应的wxss文件中-->/* 整个页面背景 */page {  display: block;    min-height: 100%;    background-color: #EFEFF4;}

• 设置背景图片

<!--设置本地图片为背景图片需要将图片转成Base64编码；或是直接用图片地址；background-size: contain;用于解决可能的图片显示不全--><view style="background-image:url(图片的Base64编码);background-size: contain;"<!--background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满--><!--background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。--><!--background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。-->

• 利用模板

<!--wxss 文件-->@import "../CMTemplate/CMTTip.wxss";<!--wxml 文件--><import src="../CMTemplate/CMTCalculateTop"/><template is="calculateTop" data="{{...top_item}}"></template>

• 更新模板数据

data: {    loan_item: {      radio_index: 0,      ratio_array: ['10%', '20%', '30%'],      period_index: 2,      period_array: ['1年', '2年', '3年'],      tail_index: 1,      tail_array: ['0%', '30%'],    }, }bindRatioChange: function (e) {    var that = this    console.log('首付比例:', e.detail.value)    that.setData({      'loan_item.radio_index': e.detail.value,    })  },

• 简单的动画

<!--view中设置animation属性--><view animation="{{carListAnimation}}" class="car_box" wx:if="{{showCarStatus}}"><!--Js文件中生成动画-->showCarModel: function () {    <!--生成动画-->    var animation = wx.createAnimation({      duration: 200,      timingFunction: "linear",      delay: 0    })    var that = this    that.animation = animation    <!--设置动画的方向-->    animation.translateX(300).step()    <!--将动画传到对应的view上，通过控制showModelStatus来控制view的显示和隐藏-->    that.setData({      carListAnimation: animation.export(),      showModelStatus: true    })    setTimeout(function () {      animation.translateX(0).step()      that.setData({        carListAnimation: animation.export()      })    }.bind(that), 200)},

• 页面间传递对象数据

<!--先把对象转为字符串-->let str=JSON.stringify(that.data.car);<!--通过navigate url传递-->wx.navigateTo({    url: '../CMpreferenceCommit/CMpreferenceCommit' + "?car=" + str,})<!--onLoad里面通过options获取参数，然后转成对象-->onLoad:function(options){    // 生命周期函数--监听页面加载    var car = JSON.parse(options.car)  },

• post请求

wx.request({  url:url  method: 'POST',  header: {    'content-type': 'application/x-www-form-urlencoded'  },//这样POST 请求会将data的值放在Query String Parameters里面。  data: {    'userName': that.userName,    'userPhone': that.userPhone,    'whichPage': that.data.whichPage  },  complete:function(res) {    console.log('complete',res.data)    if(res.data.success) {      wx.showToast({        title: '提交成功',      })    }  }})

• 控制小数点位数

toFixed(2)

• 判断是否是合法的数字

if (isNaN(new Number(monthlyAmount))) {  wx.showToast({    title: '输入有误',  })  return false;}