小程序依然採用mpvue+雲開發實現!本文只介紹功能,若是有問題歡迎留言,樂意解答。vue
小程序由來
前幾天我舅跟我說,他買的小程序提示長時間未使用可能會被凍結,簡單看了下他小程序的功能,就是產品的展現,沒其餘功能,舅還說花了2萬塊,我說你這錢徹底是打了水漂,等我有時間給你從新作一個。數據庫
界面展現
首頁
產品詳情頁
我的中心頁
在線留言頁
關於咱們頁
留言列表頁
功能介紹
首頁
- 輪播圖不用過多介紹,輪播圖右下角的數字是本身手寫的;
- 搜索框,沒有另起一頁,直接輸入可實現動態搜索產品;
- 產品列表頁,默認一頁加載6條;
- 每一個產品右上角可能會出現hot標誌,這裏是否顯示hot的條件是瀏覽量大於5,後面能夠適當增大這個數字;
產品詳情頁
因爲我舅提供的資料確實太少,因此詳情作的不免有點粗糙,後面若是他有心想好好介紹他的產品我再好好改改小程序
- 詳情頁banner圖,可預覽;
- 這裏有個瀏覽量,即當進入詳情走一遍針對這個產品瀏覽量+1的雲函數,雲函數實現了兩個功能,先count數+1;後返回當前產品的詳情內容;
- 底部fixed一個按鈕,方便用戶去聯繫我舅諮詢購買;
我的中心頁
爲了好看,這裏仍是放一下用戶頭像和姓名 數組
- 默認進我的中心頁,用戶未受權,一旦用戶受權後查看用戶權限是否能查看留言列表功能,這裏經過判斷openId,這裏的作法是當openId是我舅本人的時候,才展現留言列表欄,方便他進入留言列表頁與客戶聯繫;
- 留言列表欄有個計數紅點,紅點個數經過雲函數去讀取數據庫留言列表中read爲false的項數之和;
- 之因此要作這個留言列表欄,是爲了方便我舅管理,不至於要我去爲他提供一個後臺管理吧;
- 聯繫咱們欄就是一個打電話功能;
- 聯繫地址直接使用微信內置地圖查看位置;
在線留言頁
爲了凸顯簡單明瞭,這裏要填的都是必填項 微信
- 姓名,手機號,想要買的設備名稱;
- 手機號作了簡單的校驗,正則:/^1[3456789]\d{9}$/
- 提交成功後給個提交成功的提示返回到我的中心頁;
關於咱們頁
因爲能利用的資源實在匱乏,全部內容都是本身網上查找;函數
符合本身的審美就先湊合用;cdn
留言列表頁
- 默認每一項當管理員第一次看到的時候,右上角會有一個小紅點;
- 一旦管理員撥打了某項客戶的電話,咱們這裏走一下update相關的雲函數,將這一項的read置爲true,從新讀取列表數組,則紅點消失;
- 當返回我的中心頁時,建議使用onShow讓數據從新渲染,能夠動態更新計數小紅點;
歡迎體驗: