送给正在学小程序或将开发小程序的你
声明：多粉商城小程序，不是官方的，此项目仅供学习参考,不用于商用。css
微信小程序商城，持续更新。html
项目布局
- components // 小程序公共组件
- font // 小程序字体 wxss 文件
- images //小程序图片
- pages //页面
- utils //小程序的公共方法 如封装请求或接口
- wxParse //微信小程序 富文本框
- config.js //二次封装微信请求方法
商城主要实现的功能
- 小程序受权登录 获取用户的信息
- 首页 包含 活动商品 页面(秒杀商品、团购商品、套装商品、预售商品、周期购商品、批发商品)、首页商品、各分类列表
- 商品详情页,包含 加入购物车、收藏商品、当即购买、批发购买和 各活动商品购买.选择商品的规格和添加商品数量.商品的评论、长按关注公众号。
- 搜索功能,包含历史记录、热门搜索.
- 分类页包含 价格高低排序、时间最新排序、商品销量排序.商品列表大图 和 详情列表显示.动态获取分类菜单的高度，分类菜单大分类和详情分类. 上拉加载、下拉刷新。
- 购物车，包含 商品全选 单选、左滑删除商品、记录勾选商品、下单 功能。
- 地址管理，包含新建地址和导入微信地址，地址编辑、左滑删除、设置默认地址
- 个人页面，包含 查询所有订单、待支付、待收货、待发货、待评价、退款/售后、个人评价、个人收藏、个人秒杀、个人批发、个人团购、
微信小程序-rpx
在实际项目开发中，通常ui小姐姐给的iphone6的设计稿，在iphone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素.android
微信小程序-微信组件讲解
- view 用的最多其实就是div.
- scroll-view 可滚动视图 能够横向和纵向滚动
* 横向滚动 css 设置 否则不能横向滚动
<scroll-view scroll-x style="width:100%;white-space:nowrap;display:flex">
<view style="display:inline-block"></view>
<view style="display:inline-block"></view>
<scroll-view>复制代码
3.cover-image/cover-view 能够覆盖在微信小程序原生组件上 原生组件层级 设置最高 z- index:999 都没有用ios
4. banner 微信小程序轮播组件git
微信小程序-经常使用UI
1. 清除页面布局浮动 github
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both;}
复制代码
2.单行文本溢出省略web
.text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
复制代码
3. 多行文本溢出省略ajax
.text-overflow2{、
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
} 复制代码
4.tab 选项卡小程序
<view class="navbar">
<text wx:for="{{navbar}}"
data-idx="{{index}}"
class="item {{currentTab == index ? 'active' : ''}}"
wx:key="unique" b
bindtap="navbarTap">{{item}}
</text>
</view>
————————————————————————————————————————————————————————————————————————————————————————————————————
.navbar { flex: none; display: flex; background: #fff; margin-top: 20rpx;}
.navbar .item {
position: relative;
flex: auto;
text-align: center;
line-height: 80rpx;
font-size: 30rpx;
}
.navbar .item.active { color: #f23030;}
.navbar .item.active:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
background: #f23030;
}复制代码
微信小程序-新版登录受权
微信小程序2018年 获取受权接口作了改变，须要用button 去调用 (详情>>)微信小程序
微信小程序-请求二次封装
微信小程序-上拉加载
最开始作商城小程序用的scroll-view 里bindscrolltolower 作的下拉加载 可是随着万恶的产品经理一直添加修改需求 scroll-view 不能知足需求 只能改用微信官方的onReachBottom api,通过踩坑发现，在tab 的页面 ，推荐你们仍是用官方的onReachBottom。
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () {
console.log('到底了')
this.curPage++ //当前页
if (this.curPage > this.data.pageCount) {
//当前页与总页数对比 t
is.setData({
is_lower: true
}) //是否加载完到底了
return
}
this.getData() //获取下页数据 },复制代码
微信小程序-微信支付
/*
* 交定金
* 测试用的储蓄卡支付
* 正式转为微信支付（添加微信支付）
*/
addDeposit() {
let url,
data,
res,
_this = this;
url = app.globalData.subDomain + api.addDeposit; // subdomin 请求的地址
let depositParams = wx.getStorageSync('depositParams');
let depositMoney =
_this.data.order.depositPercent.toString().indexOf(',') > -1
? _this.data.order.depositPercent.replace(/,/, '')
: _this.data.order.depositPercent; //把货币的格式“,”去掉
let orderMoney =
_this.data.order.orderPrice.toString().indexOf(',') > -1
? _this.data.order.orderPrice.replace(/,/, '')
: _this.data.order.orderPrice;
data = {
busId: app.globalData.busId, //店铺商家id
appId: wx.getStorageSync('appid'), //小程序appId
browerType: 100, //浏览器类型
memberId: wx.getStorageSync('memberId'),
productId: depositParams.proId, //商品id
presaleId: app.globalData.activityId, //活动商品的id
depositMoney: depositMoney, //预售商品交定金
proName: _this.data.order.product.proName, //商品名称
proImgUrl: _this.data.order.imagelist.imageUrl, // 商品图片地址
payWay: _this.data.order.payWayList[0].id, //支付类型 默认第一个微信支付
orderMoney: orderMoney, //定金
proNum: depositParams.num || 1 //商品数量
}
if (depositParams.proSpecificaIds) {
data["proSpecificaIds"] = depositParams.proSpecificaIds
}
// 请求后台 获取微信支付参数的数据
ajax.request(url, data, 'POST').then(res => {
if (!utils.showMsg(res)) return;
wx.requestPayment({
//调取微信支付的接口
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.prepay_id,
signType: res.data.signType || 'MD5',
paySign: res.data.paySign,
success: () => {
utils.showTipMsg("支付成功", "success", function () {
utils.linkGoodDetail(depositParams.proId)
// 支付成功去商品详情页面
})
},
fail(err) {
utils.showTipMsg("支付失败！")
}
})
}).catch(error => {
utils.showErrMsg(error)
})
}复制代码
微信小程序-图片上传
chooseImage() {
let arr = this.data.imageList
if (arr.length === this.data.limitNum) {
util.showToast({
text: `最多上传${this.data.limitNum}张图片！`
})
return
} // console.log('选择图片')
wx.chooseImage({
count: 3, // 最多能够选择的图片张数，默认9
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认两者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认两者都有
success: (res) => {
// console.log(res)
let arr2 = res.tempFilePaths
let arr3 = res.tempFiles
if (arr.length + arr2.length > this.data.limitNum) {
util.showToast({
text: `最多上传${this.data.limitNum}张图片！`
})
} else {
if (this.data.isCheckBig) {
let isBig = false
arr3.map((item, idx) => {
if (item.size / 1024 > this.data.limitSize * 1024) {
isBig = true
arr2.splice(idx, 1)
}
})
if (isBig) {
util.showToast({
text: `图片大小不能超过${this.data.limitSize}M！`
})
}
}
this.upLoadImg(arr2)
arr = arr.concat(arr2)
this.triggerEvent('change-img', arr)
} // success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},复制代码
微信小程序-商城购物车
data: {
productList: [], //购物车里面没有失效商品
sxProductList: [], //购物车失效商品
checkedGoodsCount: 0, //选中产品的数量
totalPrice: 0, //选中商品总价格
checkAllStatus: false, //是否所有选中
baseImgUrl: app.globalData.picUrl,
memberId: wx.getStorageSync('memberId'),
isAdvert: '',
advertUrl: "",
isLoading: true, //正在加载
noSelectProductIds: [], //购物车id
navType: 0, //购物车导航类型 0: 普通购物车， 1： 批发购物车
goodsNum: '', // 购物车商品数量
wholesaleGoodsNum: '', // 批发购物车商品数量
delBtnWidth: 90, //删除按钮的宽度
},
startY: 0,
endY: 0,
startX: 0, //触摸开始的位置
delBtnWidth: 0, //(删除按钮宽度单位 rpx)
swiperX: true,
swiperY: true,
expansion: null, //是否存在展开的商品
noCartIds: [],
//勾选商品（单选）
checkedItem(e) {
let _this = this,
checked,
item,
data1,
data2,
data3;
item = e.currentTarget.dataset.good;
data1 = this.data.productList.find(x => x.busId == item.busUserId);
data2 = data1 && data1.shopResultList.find(x => x.shopId == item.shopId);
data3 = data2 && data2.productResultList.find(x => x.id == item.id);
checked = data3.checked;
data3.checked = !checked;
if (this.data.navType === 1) {
data3.pifaSpecificaList.map(item => item.checked = !checked)
}
data2.checked = data2.productResultList.every(x => x.checked) ? true : false
this.storageProductIds(data3)
this.setData({
productList: this.data.productList,
checkAllStatus: _this.isCheckedAll(this.data.productList),
})
if (this.data.navType === 1) {
this.calcPfNum()
} else {
this.setData({
checkedGoodsCount: _this.getCheckedGoodsCount(_this.data.productList),
totalPrice: _this.totalPrice(this.data.productList)
}) t
his.setGoodsNum()
}
},
复制代码
项目效果展现
1.首页展现(后台系统编辑的首页)
2.分类页面
3.购物车页面
4.个人页面
5.商品详情页
6.活动商品详情页
7.地址页面
项目总结和遇到的一些问题
1.scrollview动态获取高度计算分类菜单的高度（效果看上面的分页图）
2.小程序视频原生组件层级搞遮挡住下面按钮
解决思路：视频播放开始前用一个视频播放的封面图片，播放时换成真的视频组件
3. 轮播图-动态计算录播图每张图片高度取最大的图片做为录播高度 且图片上下左右居中显示
4.微信小程序识别二维码问题
微信小程序识别图片二维码只能是微信自身生成的
5.长按保存图片到手机相册-android 和 ios 的差别
保存图片到相册 android 保存成功会提示 保存到手机相册（路径）
ios 保存成功不提示
6.微信小程序受权弹框问题
微信小程序提示受权 你取消受权 微信那边将2小时内不会在弹去受权的窗口
最后
版本还在迭代中，后续会继续添加新的功能。
第一次写文，喜欢的但愿你们点个star鼓励一下,更有动力更新更多好的文章
相关文章
- 1. 小程序·云开发——正在悄悄改变小程序开发的模式
- 2. [小程序]_ELVE_小程序开发（1）
- 3. 小程序开发-小程序介绍
- 4. 【小程序】小程序开发大大小小的坑
- 5. 小程序开发小结
- 6. 小程序开发小tips
- 7. 小程序开发
- 8. 【微信小程序】小程序发送订阅消息教程
- 9. 小程序开发 | 小程序密钥在哪获取？
- 10. 小程序开发流程
- 更多相关文章...
- • W3C 程序 - W3C 教程
- • ASP 子程序 - ASP 教程
- • PHP开发工具
- • 算法总结-归并排序
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入门
- 2. Spring WebFlux 源码分析(2)-Netty 服务器启动服务流程 --TBD
- 3. wxpython入门第六步（高级组件）
- 4. CentOS7.5安装SVN和可视化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig对象缺少setMaxIdle、setMaxWaitMillis等方法，问题记录
- 6. 一步一图一代码，一定要让你真正彻底明白红黑树
- 7. 2018-04-12—（重点）源码角度分析Handler运行原理
- 8. Spring AOP源码详细解析
- 9. Spring Cloud（1）
- 10. python简单爬去油价信息发送到公众号
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 小程序·云开发——正在悄悄改变小程序开发的模式
- 2. [小程序]_ELVE_小程序开发（1）
- 3. 小程序开发-小程序介绍
- 4. 【小程序】小程序开发大大小小的坑
- 5. 小程序开发小结
- 6. 小程序开发小tips
- 7. 小程序开发
- 8. 【微信小程序】小程序发送订阅消息教程
- 9. 小程序开发 | 小程序密钥在哪获取？
- 10. 小程序开发流程