如何用uni-app做一個領優惠券H5、小程式商城(一)

淘寶客指路人發表於2020-03-06

一、為什麼要選擇uni-app

多端氾濫、精力有限,是很多前端開發者每日的夢魘。 uni-app遵循Vue.js語法規範,一套程式碼,多端發行,切實解決了眾多開發者的痛點。 如果對uni-app不熟悉的,可以瞭解一下曾老師的文章: uni-app小程式手把手專案實戰

不廢話,先看看小程式的效果

小程式的效果

1. 掃描二維碼體驗小程式

如何用uni-app做一個領優惠券H5、小程式商城(一)

2. 小程式介面截圖

首頁
如何用uni-app做一個領優惠券H5、小程式商城(一)

搜尋頁
如何用uni-app做一個領優惠券H5、小程式商城(一)

分類導航
如何用uni-app做一個領優惠券H5、小程式商城(一)

明細頁面
如何用uni-app做一個領優惠券H5、小程式商城(一)

H5頁面的效果

1. 掃描公眾號二維碼體驗H5效果

如何用uni-app做一個領優惠券H5、小程式商城(一)

2. H5介面截圖

首頁
如何用uni-app做一個領優惠券H5、小程式商城(一)

搜尋頁
如何用uni-app做一個領優惠券H5、小程式商城(一)

分類導航

如何用uni-app做一個領優惠券H5、小程式商城(一)

商品明細頁面
如何用uni-app做一個領優惠券H5、小程式商城(一)

如何用uni-app做一個領優惠券H5、小程式商城(一)

結論

用uni-app開發的小程式與H5頁面的效果一致,體驗良好,還原度非常高, 最重要的,我只寫了一遍程式碼

二、如何開發這樣的商城

看了上面的效果,是不是覺得挺不錯的。

我猜,現在的你,腦海裡一定有許多疑問吧?

我整理了一些可能會問到的問題:

序號 問題 解決辦法
1 如何找到這麼好看的介面?有沒有什麼前端資源? DCloud外掛市場下載介面
2 後端資料怎麼獲得?哪裡能找到這麼多的商品資訊? 從淘寶聯盟獲得介面
3 H5頁面如何與公眾號繫結?是選訂閱號還是服務號? 建議先註冊訂閱號

前端資源

好看的前端資源

三、關於原始碼

uni-app 發券兒妹 原始碼下載

組織聯絡方式

四、關於作者

勸退架構師,喜歡做最不擅長的前端

個人公眾號(jun的部落格),每天分享技術乾貨

如何用uni-app做一個領優惠券H5、小程式商城(一)

相關文章