送給正在學小程序或將開發小程序的你
聲明：多粉商城小程序，不是官方的，此項目僅供學習參考,不用於商用。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. 小程序·雲開發——正在悄悄改變小程序開發的模式
- 2. [小程序]_ELVE_小程序開發（1）
- 3. 小程序開發-小程序介紹
- 4. 【小程序】小程序開發大大小小的坑
- 5. 小程序開發小結
- 6. 小程序開發小tips
- 7. 小程序開發
- 8. 【微信小程序】小程序發送訂閱消息教程
- 9. 小程序開發 | 小程序密鑰在哪獲取？
- 10. 小程序開發流程