微信小程序——商城篇
前言
随着wepy和mpvue的出现及流行，开发小程序变的愈来愈便捷和强大，做为基佬社区的一份子，咱们都须要把本身遇到的问题以及如何解决的方式相互分享，这样才能帮助到更多的朋（ji）友（lao）。若有写的不足的地方，请各位提出宝贵的建议哈。css
简单介绍微信小程序
众所周知，小程序是一种不须要下载安装便可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下便可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题，所以它的开发程度也较为简单。
html
- 开发技术： WXML（HTML5）、WXSS（CSS）、JavaScript
- 开发工具： vscode(可使用下列几种框架来进行开发)，微信开发者工具
- 开发思路： MVVM，简单来讲，这就是一门把前端开发者从操做DOM的繁琐步骤中解脱出来，让数据自动更新界面的技术。
- 开发流程： 这个你们能够看官方的文档，下载安装开发工具之后使用appid就能够进行开发了。小程序简易教程
- 开发单位： rpx,pt,rem等，具体在这里就不介绍了
- 开发框架： 这里介绍几种小程序的框架，有weui,wepy,mpvue等，有兴趣的同窗能够自主去了解一下
做为一枚前端战场的工兵，天然少不了踩雷，并且不用框架组件式开发来手动切页面有点当心酸~~在这里我分享几个本身用原生微信小程序开发遇到的坑，
1. 微信小程序之wx.showModal
给confirm/cancel属性设置字体颜色的时候会有一个小坑, mode代码：前端
<view bindtap="test">
<text>测试</text>
</view>
js代码：
test(e) {
wx.showModal({
content: '测试',
cancelColor: 'red',
confirmColor: 'rgb(255,0,0)'
})
}
复制代码
这样的代码在模拟器上显示一切正常，两个按钮也的确变颜色了。但是在手机上一看，傻眼了
vue
js代码：
test(e) {
wx.showModal({
content: '测试',
cancelColor: '#FF0000',
confirmColor: '#FF0000'
})
}
复制代码
这样两个按钮就在手机上也能出来了，而且颜色获得了改变。git
2. 微信小程序之navigator跳转
wxml代码：
<navigator hover-class="none" url="/pages/index/index">
<image src="/libs/images/home.png"></image>
</navigator>
复制代码
仔细查看了路径无误和字母没打错之后，这个问题卡了我半个小时之后终于发现这里有一个不够细心就会踩的坑，
github
经常使用wx.switchTab 接口的同窗可能没碰到过这种状况。navigator组件里有一个属性是open-type，默认值是navigate,对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能。
聪明的同窗应该已经看出问题所在了，是的，这里要跳转的首页就是一个tabBar页面，按照默认的跳转方式是不能实现的。
解决方法:web
<navigator hover-class="none" open-type="switchTab" url="/pages/index/index">
<image src="/libs/images/home.png"></image>
</navigator>
复制代码
加一个open-type="switchTab" 或者绑定一个点击事件用wx.switchTab接口来实现。小程序
3. 微信小程序之scroll-x
可是对于相似我这样的新手来讲，设置scroll-x的时候，会把要滑动的内容给挤成多行。
在这里直接给出一个解决方法：
- 给scroll-x设置一个宽度，并设置white-space: nowrap属性 //内容不换行
- 把内容view盒子设置为行内块元素 display: inline-block
便可解决横向滑动内容不在一行的问题，在下面我简单贴一下项目中我这块内容的代码。
4. swiper组件和input组件一块儿用
问题：若是把一个input组件绝对定位到swiper组件上，swiper仍是会覆盖input组件,而input组件内的placeholder属性则会透出来，虽然不影响input的功能，可是会影响到input属性的显示效果，也就是影响了视觉上的效果。
模拟器上的效果： 微信小程序
手机上的效果：
<view class="hd">
<input class="input" placeholder="搜索商品，共9803款好物" bindtap="entrySearch" disabled />
<swiper class="receive">
<swiper-item >
<navigator url="/pages/index/receive/receive" hover-class="none">
<image class="receive_img" src="/libs/images/index.jpg" mode="aspectFill"></image>
</navigator>
</swiper-item>
</swiper>
</view>
复制代码
.input {
position: absolute;
left: 30rpx;
top: 10rpx;
box-sizing: border-box;
width: 690rpx;
height: 56rpx;
border-radius: 45rpx;
border: 1rpx solid #000; //证实本身的猜想
background-color: #fff;
box-shadow: 0 0 1rpx #ccc;
text-indent: 185rpx;
font-size: 0.8rem;
}
.receive {
height: 380rpx;
}
.receive_img {
width: 750rpx;
height: 380rpx;
}
复制代码
咱们能够看到模拟器上显示正常，可是在手机上就成了方型的框，我开始排查问题，我猜想是被覆盖了？因而我就添加了border: 1rpx solid #000;这行代码，进行刷新之后发现黑线边框出来了一下立刻就消失了，果真！用了绝对定位都被覆盖了。
bash
解决方法： 给input组件加个z-index:2 。 固然，建议给input组件再套一个view盒子。
代码：
<view class="hd">
<view class="inputSearch">
<input class="input" placeholder="搜索商品，共9803款好物" bindtap="entrySearch" disabled />
</view>
<swiper class="receive">
<swiper-item >
<navigator url="/pages/index/receive/receive" hover-class="none">
<image class="receive_img" src="/libs/images/index.jpg" mode="aspectFill"></image>
</navigator>
</swiper-item>
</swiper>
</view>
.inputSearch {
position: absolute;
left: 30rpx;
top: 10rpx;
box-sizing: border-box;
width: 690rpx;
height: 56rpx;
border-radius: 45rpx;
z-index: 2;
background-color: #fff;
box-shadow: 0 0 1rpx #ccc;
}
.input {
text-indent: 185rpx;
font-size: 0.8rem;
}
.receive {
height: 380rpx;
}
.receive_img {
width: 750rpx;
height: 380rpx;
}
复制代码
5. 微信小程序之scroll-into-view
我在这里就一种能实现的方法，假数据能够经过easymock造一下再wx.request引入，也能够直接放到一个js文件里import引入，这里不详细讲解。
一开始我觉得是用两个scroll-view来作，经过scroll-into-view这个属性来实现左右关联进行滚动的效果
代码：
<view class="main">
<scroll-view class="menu-left" scroll-y scroll-with-animation="{{true}}">
<view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{menu}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
<text>{{item.name}}</text>
</view>
</scroll-view>
<scroll-view scroll-y class="menu-right" scroll-into-view="{{toView}}">
<block wx:for="{{detail}}" wx:key="{{item.id}}">
<scroll-view class="cate-box" id="{{item.id}}" scroll-y>
<view class="cate-banner" bindtap="bannerDetails">
<image src="{{item.banner}}"></image>
</view>
<view class="cate-title">
<text>{{item.title}}</text>
</view>
<view class="cate-product">
<view class="product-list" bindtap="productDetails" wx:for="{{item.productList}}" wx:key="{{index}}" wx:for-item="product">
<image src="{{product.thumb}}"></image>
<view class="product-list-name">
<text>{{product.name}}</text>
</view>
</view>
</view>
</scroll-view>
</block>
</scroll-view>
</view>
//css代码就不放了，手动撸的有点多，若有须要能够去github里拿
//js相关代码
switchCategory(e) {
console.log(e)
this.setData({
toView:e.currentTarget.dataset.id
})
},
复制代码
看完这个效果之后我就以为好low啊。。最蛋疼的是右边居然能够上下滚动，这样一来，右边的商品内容多的时候就会造成两个scroll-view的嵌套，致使用户体验极不友好。
<view class="main">
<scroll-view class="menu-left" scroll-y scroll-with-animation="{{true}}">
<view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{menu}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
<text>{{item.name}}</text>
</view>
</scroll-view>
<swiper vertical="true" class="menu-right" current="{{toView}}" >
<swiper-item wx:for="{{detail}}" wx:key="{{item.id}}">
<scroll-view class="cate-box" id="{{item.id}}" scroll-y>
<view class="cate-banner" bindtap="bannerDetails">
<image src="{{item.banner}}"></image>
</view>
<view class="cate-title">
<text>{{item.title}}</text>
</view>
<view class="cate-product">
<view class="product-list" bindtap="productDetails" wx:for="{{item.productList}}" wx:key="{{index}}" wx:for-item="product">
<image src="{{product.thumb}}"></image>
<view class="product-list-name">
<text>{{product.name}}</text>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
//js相关代码
switchCategory(e) {
console.log(e)
this.setData({
curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index:0,
toView:e.currentTarget.dataset.index,
})
},
复制代码
6. 微信小程序购物车商品左滑删除功能
在这里我给出一种实现购物车商品左滑删除的方法，给你们参考，直接放代码吧 demo代码：
wxml:
<view class="{{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{lists}}" wx:key="{{index}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
<view class="content">{{item.tt}}</view>
<view class="del" catchtap="del">删除</view>
</view>
wxss:
.del {
background-color: #b4282d;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(90px);
transform: translateX(90px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.content {
float: left;
width: 100%;
margin-right:0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(90px);
transform: translateX(90px);
margin-left: -90px;
display: flex;
}
.touch-move-active .content,
.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
复制代码
js部分
data: {
lists: [
{
tt:'测试',
isTouchMove: false
},
{
tt: '测试',
isTouchMove: false
},
{
tt: '测试',
isTouchMove: false
},
{
tt: '测试',
isTouchMove: false
},
]
},
// 计算手滑动角度函数
angle: function (start, end) {
var _X = end.X - start.X,
_Y = end.Y - start.Y
//返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
touchstart(e) {
//开始触摸时 重置全部删除
this.data.lists.forEach(function (v, i) {
if (v.isTouchMove)//只操做为true的
v.isTouchMove = false;
})
this.setData({
startX: e.touches[0].clientX,
startY: e.touches[0].clientY,
lists: this.data.lists
})
},
//滑动事件处理
touchmove(e) {
let index = e.currentTarget.dataset.index;//当前索引
let startX = this.data.startX;//开始X坐标
let startY = this.data.startY;//开始Y坐标
let touchMoveX = e.touches[0].clientX;//滑动变化坐标
let touchMoveY = e.touches[0].clientY;//滑动变化坐标
//获取滑动角度
let angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
this.data.lists.forEach((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
}
})
//更新数据
this.setData({
lists: this.data.lists
})
},
//删除事件
del(e) {
this.data.lists.splice(e.currentTarget.dataset.index, 1)
this.setData({
lists: this.data.lists,
})
},
复制代码
你们能够根据本身的需求作相应的修改。放下效果图
7. 微信小程序购物车
购物车页面逻辑的话，要按业务需求来。我这里简单提供一个购物车逻辑的demo，新手能够看下 购物车功能。
结语
商城类微信小程序项目学习github传送门
笔者踩了很多的坑，这里只写出了几个，若是用框架的话会更方便，做为一枚前端的工兵，仍是得常常踩坑，才能获得进阶的机会～
第一次写文章，请给新手多一点鼓励，给工兵多一点关爱，点个赞－留下您的建议再走吧~
相关文章
- 1. 微信小程序商城（前端篇）
- 2. 微信小程序——商城篇
- 3. 微信小程序商城
- 4. 【程序源代码】微信小程序商城，微信小程序微店
- 5. 微信小程序商城（后台Java）
- 6. 微信小程序商城源码
- 7. uni-app微信小程序——商城（1）
- 8. NideShop：Node.js微信小程序商城
- 9. 微信小程序的零食商城
- 10. 微信商城小程序（一）
- 更多相关文章...
- • W3C 程序 - W3C 教程
- • ASP 子程序 - ASP 教程
- • 算法总结-归并排序
- • Spring Cloud 微服务实战(三) - 服务注册与发现
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 微信小程序商城（前端篇）
- 2. 微信小程序——商城篇
- 3. 微信小程序商城
- 4. 【程序源代码】微信小程序商城，微信小程序微店
- 5. 微信小程序商城（后台Java）
- 6. 微信小程序商城源码
- 7. uni-app微信小程序——商城（1）
- 8. NideShop：Node.js微信小程序商城
- 9. 微信小程序的零食商城
- 10. 微信商城小程序（一）