微信小程序常见问题解决

居中

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,
})
},

- 简单的动画

showCarModel: function () {

var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
var that = this
that.animation = animation

animation.translateX(300).step()

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);

wx.navigateTo({
url: '../CMpreferenceCommit/CMpreferenceCommit' + "?car=" + str,
})

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;
}
```