项目总结之微信小程序
微信小程序项目总结
一. 关于wxs方面
对于wxs语法不做过多的总结,我试过对JSON格式数据的处理,但是处理的结果并不理想转化出来为object,但是对于保留两位小数的处理还是非常好用,我对时间,保留两位小数进行了处理,效果非常可观
实现的步骤
对月份的过滤(此方法须写在wxs文件中)
一.方法写在wxs中
对日期过滤
var timer = function (timestamp) {
var date = getDate(parseInt(timestamp));
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = function () {
if (date.getHours() < 10) {
return '0' + date.getHours()
}
return date.getHours();
}
var minute = function () {
if (date.getMinutes() < 10) {
return '0' + date.getMinutes()
}
return date.getMinutes();
}
var second = function () {
if (date.getSeconds() < 10) {
return '0' + date.getSeconds()
}
return date.getSeconds();
}
return year + '-' + month + '-' + day + ' ' + hour() + ':' + minute() + ":" + second();
}
###
对结算数字的过滤
var tofix =function(value){
return value.toFixed(2)
}
二.在wxs文件中导出
module.exports = {
timer: timer,
tofix: tofix
}
三.在wxml文件中引入方法
<wxs src='../../utils/filter/filter.wxs' module='filter' />
四.在文件中的使用
filter.tofix(totalprice)
二.关于使用小程序自带的tabbar的tab切换栏
在app.json文件中配置tab切换栏
配置如下:
"tabBar": {
"color": "#fff",
"backgroundColor": "#258CD9",
"selectedColor":"#fff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "images/icon/index.png",
"selectedIconPath": "images/icon/index1.png",
"text": "首页"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "images/icon/cart.png",
"selectedIconPath": "images/icon/cart1.png",
"text": "购物车"
},
{
"pagePath": "pages/my/my",
"iconPath": "images/icon/my.png",
"selectedIconPath": "images/icon/my1.png",
"text": "我的"
}
]
}
在这app.json配置中tabbar特别注意图片,图片文档中为81*81的,以81 为例,须留出10px不等的白边这样的图片才不会出现图片太大情况,10px是为了让图片向里面挤压!
三.关于url传值
存值:
wx.navigateTo({
url: '../check/check?query=' + parse,
})
// query是我的所传的值,我这里把数组进行了json.stringfy(),然后传给了确认订单页面
取值:
在onload生命周期中进行取值,然后进行json.parse进行解析,这样就能得到你想要的值
onload(options){
options.query
}
四. 关于数据解析(因为之前做数据解析时有中文,准备用过滤wxs过滤,但是没有成功)
这里我是解析得到它的值,通过wxs过滤的方法没有得到解决!
解决方法:
1.在这条对象中添加一个属性specificationName;
2.对这个对象进行赋值intemallProductSkuPO.specificationName:intemallProductSkuPO.specification ;
当时想的太复杂,所以错过这个方法
关于tabbar切换添加的部分问题
1.在进行页面跳转的时候,tabbar栏切换部分是不能通过navigate跳转,只能通过switchTab跳转
wx.navigateTo({
url: '../check/check?query=' + parse,
})
wx.switchTab({
url: '../my/my'
})
注:这是切换指的是自己在app.json文件中定义的tabbar,如上图tabbar部分;引入的框架于此不同
2.在进行回退的时候刷新数据的问题( 注:在app.json中定义tabbar的情况下)
我们一般返回时候都会读取缓存,从而页面没有得到刷新,这样就有Bug的存在!
所以这里就会用onshow()生命周期,我们定义onload的方法就不会执行,
所以要刷新的数据需要定义在onshow()中!