網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)

駕考寶典heyushuo發表於2018-08-29
全棧VueMySql

2018 年 9 月 13 日 : 新增了VUEX的引入,在store資料夾裡 並且在首頁的城市獲取,和自己選擇城市的頁面中使用了VUEX,大家可以參考mpvue中如何引入和使用vuex的

2018年9月6日 : 在首頁頂部新增搜尋以及引入高德地圖api

1.使用者同意獲取授權和使用者不同意獲取授權兩種情況

網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)

2018年9月5日 : 在商品詳情頁面新增了商品分享(轉發功能);

網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)

2018年8月30日 : 好多人反映登入無法登入,因為這個需要自己配置後臺才可以,為了可以讓大家體驗登入後的一些操作,在這裡我新增了預設使用者,大家可以體驗其他功能! 這裡可能會遇到問題:大家都是使用的這一個賬號,新增購物車,收藏還有一些收貨地址之類的可能會顯示很多人新增的,我會定期刪除線上預設使用者的這些資訊, 現在clone最新的程式碼可以體驗.

 大家也可以在App.vue設定自己的預設賬戶資訊(這樣就不會和其他人衝突了)  var userInfo = {"openId":"oQmbb4sNZdxaUQZ0sfYgvtOP2S7c","nickName":"何玉碩","gender":1,"language":"zh_CN","city":"Changping","province":"Beijing","country":"China","avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132","watermark":{"timestamp":1535513485,"appid":"wx601ce71bde7b9add"
  }
  };
  var openId = userInfo.openId;
  wx.setStorageSync("userInfo", userInfo);
  wx.setStorageSync("openId", openId);
複製程式碼

前言

一直打算自己寫介面,寫一個上線的小程式,資料方面總是無從下手，無意中發現一個網友爬取的網易嚴選商城的一些資料大概一共有20張左右的表,算是相當詳細了(對其中部分表的欄位和部分資料進行了修改,)平時寫專案大部分用的vue,所以直接選擇了mpvue開發,後端一開始打算用php但是學了半個月感覺需要學的東西太多,短時間裡寫不出這個線上小程式,最後決定用node來開發提供介面。

小程式原始碼地址

小程式服務端原始碼地址 

喜歡的希望大家點個star鼓勵一下,謝謝大家的支援!!!!

技術站

前端：小程式、mpvue、async、await

後端：Node、koa2、mysql、knex.js運算元據庫,視覺化工具使用的Navicat

目前上線狀態

由於域名備案小程式暫時無法上線,但是小程式的服務端已經上線,介面都是訪問的線上介面,你只需要把原始碼克隆到本地,直接在微信開發者工具中,就能請求到資料,看到效果 ,備案通過後會把二維碼新增進來

小程式原始碼地址

小程式服務端原始碼地址 

喜歡的希望大家點個start鼓勵一下,謝謝大家的支援!!!!

商城主要實現的功能

  • 首頁、專題、分類、購物車、我的
  • 小程式授權登陸獲取使用者資訊
  • 首頁包含品牌製造頁、品牌製造詳情頁面、新品首發頁面、人氣推薦頁面、各分類列表
  • 商品詳情頁面，包含常見問題、大家都在看商品列表、加入購物車、收藏商品、立即購買、下訂單、選擇收貨地址
  • 搜尋功能，包含歷史記錄、熱門搜尋、搜尋後列表展示、模糊搜尋提示
  • 商品列表部分包含綜合、價格高低進行排序
  • 專題功能，包含專題詳情、專題推薦列表
  • 分類，包含左邊大分類和右邊詳細分類
  • 購物車，包含商品單選全選、左滑刪除商品、下訂單等功能
  • 地址管理，包含新建地址和匯入微信地址，地址編輯、左滑刪除、設定預設地址
  • 我的頁，包含我的收藏、地址管理、意見反饋

部分效果展示

1.首頁展示和專題頁效果

網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)

2、分類頁面，分類子頁面以及搜尋功能、搜尋列表、歷史記錄、模糊搜尋提示

網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)

3、購物車功能新增購物車,單選多選,刪除和商品收藏功能

網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)

4、地址管理

網易嚴選商城小程式全棧開發,域名備案中近期上線(mpvue+koa2+mysql)

專案總結和遇到的一些問題

1.新增頁面

只要新增了頁面,必須手動執行 npm run dev 才能生效

2.created生命週期需要注意的問題

不要在vue的created生命週期裡獲取資料,只要小程式開啟,整個專案的所有頁面裡created生命週期裡的方法都會執行一遍,所以不要使用這個生命週期,一般可以寫在mounted生命週期裡,或者原生的onLoad生命週期裡

3.共用頁面或者有輸入資料的頁面需要注意的問題(例如:詳情頁,新增地址,搜尋頁)

在這些頁面都有一個共同問題,就是他會保留上次你所有的操作,例如:詳情頁面雖然會獲取新的資料,但是他會先閃一下以前的資料然後在變成新的資料,例如:搜尋頁面,當你退出後,再次進入的時候上次搜尋輸入的內容還儲存在裡邊,我們需要做的就是在頁面剛載入的時候,需要吧vue中data裡定義的初始資料都要重新初始化一遍

//載入頁面之前先初始化這些資料,這樣可以解決上邊帶來的問題 onLoad() { 
 this.initData();
 
  },//定義一個方法 需要初始化的資料   initData() { 
  this.listData = []   this.productList = []
  }複製程式碼

3.onShow方法的使用

正常mounted生命週期裡獲取資料執行一次,當你再次進入的時候不會重新請求資料,如果你需要重新請求資料,可以把獲取資料的方法寫在onShow生命週期裡邊,只要展示這個頁面就會執行裡邊的方法

onShow() { 
 this.getListData();

  },複製程式碼

4.mpvue-loader版本的控制(鎖定版本,以免官方升級導致出現問題)

鎖定版本,原本專案開發的很好,換了太電腦同樣專案重新下載依賴結果各種報錯,在github中issue中發現,mpvue-loader進行了升級,不支援以前main.js裡寫配置小程式的app.json,鎖定版本只需要如下兩個地方,不鎖定版本,預設會下載最新版本的

//把前面的^這個符號去掉即可鎖定版本"mpvue-loader": "1.0.13","webpack-mpvue-asset-plugin": "0.0.2" 
複製程式碼

5.scroll-view原生元件設定橫向滾動

<
scroll-view scroll-x="true" :scroll-left="scrollLeft" class="head">
   <
div @click="changeTab(index,item.id)" :class="[nowIndex==index ?'active':'']" v-for="(item, index) in navData" :key="index">
                {{item.name
  }
  }          <
/div>
<
/scroll-view>
//對子元素設定浮動都沒用,父元素使用flex佈局也是不行的//需要如下設定//父元素.head{ 
 white-space: nowrap;

  }//子元素如下設定,這樣設定後就可以橫向滾動了.item{ 
 display: inline-block;

  }複製程式碼

6.使用mpvue-wxParse富文字編輯器外掛

如果需要使用這個外掛,那你必須使用我這個package.json還有相應的配置檔案,我對mpvue-loader等配置版本鎖定,在開發中我遇到了這個坑,預設安裝最新版本,導致解析mpvue-wxparse外掛出現錯誤效果不出來.

最後

後續還會陸續新增新的功能

小程式原始碼地址

小程式服務端原始碼地址

喜歡的希望大家點個star鼓勵一下,謝謝大家的支援!!!!

來源：https://juejin.im/post/5b6323baf265da0f5511533a#comment

相關文章