您的位置:首页 > 移动开发 > 微信开发

微信小程序常见问题解决

2017-09-30 11:31 211 查看
居中

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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  小程序
相关文章推荐