微信小程序——商城篇
前言
隨着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)'
})
}
這樣的代碼在模擬器上顯示一切正常，兩個按鈕也的確變顏色了。但是在手機上一看，傻眼了
原來這2個按鈕的顏色值只支持十六進制的。
vue
js代碼：
test(e) {
wx.showModal({
content: '測試',
cancelColor: '#FF0000',
confirmColor: '#FF0000'
})
}
這樣兩個按鈕就在手機上也能出來了，而且顏色獲得了改變。git
2. 微信小程序之navigator跳轉
在進入商品詳情頁之後，點擊左下角的home圖標原應該跳轉到首頁，可是一直點也不跳，並且也不報錯。
wxml代碼：github
<navigator hover-class="none" url="/pages/index/index">
<image src="/libs/images/home.png"></image>
</navigator>
仔細查看了路徑無誤和字母沒打錯之後，這個問題卡了我半個小時之後終於發現這裏有一個不夠細心就會踩的坑，
web
經常使用wx.switchTab 接口的同窗可能沒碰到過這種狀況。navigator組件裏有一個屬性是open-type，默認值是navigate,對應 wx.navigateTo 或 wx.navigateToMiniProgram 的功能。
聰明的同窗應該已經看出問題所在了，是的，這裏要跳轉的首頁就是一個tabBar頁面，按照默認的跳轉方式是不能實現的。
解決方法:小程序
<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-view組件還有一個橫向滑動的屬性：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;這行代碼，進行刷新之後發現黑線邊框出來了一下立刻就消失了，果真！用了絕對定位都被覆蓋了。
解決方法： 給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的嵌套，致使用戶體驗極不友好。
因而無腦的查看了小程序文檔之後，我發現swiper組件和scroll-view同樣還有一個縱向滑動的屬性vertical，並且是有swiper的過渡效果，使得切換的時候不會太僵硬。因而我更改了部分wxml代碼，實現了下圖中右邊不能上下滾動，只能依靠左側的nav來切換的效果
代碼：
<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. 微信商城小程序（一）