这是我的第一个小程序项目，以下为效果图
这个gif图是先通过FSCapture录屏工具录屏，然后再通过convertio.co 网站转换 gif 格式生成，网址： https://convertio.co/zh/
项目使用微信开发者工具开发，一起分5个页面，4个tab页，项目虽小，代码不少，所以再这里就不一一总结，只总结自己觉得重要的几点
一、先说首页：
1. tabbar 配置：
这里是再app.json里面配置全局tabbar
2.轮播组件：
轮播, 直接使用官方提供的 swiper 组件，属性详情参考：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
3.产品列表：
这里需要提的是，这些商品的信息都是定义再全局app.js 文件里面的，这主页的js 中调用时 通过 getApp()来取
实例代码如下
二、分类页：
1.滚动侧标栏
使用scroll-view 组件，组件详细参数参考：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html，
这里的重点是吗，需要再初始化时得到屏幕的高度，再通过查询得到上面搜索框的高度，两者相减的得到改滚动视图得高度并渲染
实现代码：
三、我的页面
1.获取用户信息
获取头像 只要写open-data 标签，type="userAvatarUrl"
获取昵称, open-data type="userNickName"
js 不用自己写，在创建模板的时候自己自动生成了
2.状态列表
这里使用flex 布局，给父级容器加上 display:flex; justify-content: space-around;/*间距均匀分布 */ ,就很容易实现了
四、购物车页面
自己感觉购物车页，最难的就是上面商品列表这个滑动的效果，做了好久把布局做好了，结果发现js不会写。
最后百度的。我现在也是还没清楚怎么出来的。。。。。。,代码如下
//手指触摸动作开始 记录起点X坐标
touchstart: function (e) {
//开始触摸时 重置所有删除
this.data.items.forEach(function (v, i) {
if (v.isTouchMove)//只操作为true的
v.isTouchMove = false;
})
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY,
items: this.data.items
})
},
//滑动事件处理
touchmove: function (e) {
var that = this,
index = e.currentTarget.dataset.index,//当前索引
startX = that.data.startX,//开始X坐标
startY = that.data.startY,//开始Y坐标
touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
//获取滑动角度
angle = that.angl({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
that.data.items.forEach(function (v, i) {
v.isTouchMove = false
//滑动超过30度角 return
if (Math.abs(angle) > 30) return;
if (i == index) {
if (touchMoveX > startX) //右滑
v.isTouchMove = false
else //左滑
v.isTouchMove = true
}
})
//更新数据
that.setData({
items: that.data.items
})
},
/**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
angl(start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
}
布局是用weui 里的
.wxml 的事件调用
