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

2018 年 9 月 13 日 : 新增了VUEX的引入,在store文件夾裏 而且在首頁的城市獲取,和本身選擇城市的頁面中使用了VUEX,你們能夠參考mpvue中如何引入和使用vuex的

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

1.用戶贊成獲取受權和用戶不一樣意獲取受權兩種狀況

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

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、koa二、mysql、knex.js操做數據庫,可視化工具使用的Navicat

目前上線狀態

因爲域名備案小程序暫時沒法上線,可是小程序的服務端已經上線,接口都是訪問的線上接口,你只須要把源碼克隆到本地,直接在微信開發者工具中,就能請求到數據,看到效果 ,備案經過後會把二維碼添加進來

小程序源碼地址

小程序服務端源碼地址 

喜歡的但願你們點個start鼓勵一下,謝謝你們的支持!!!!

商城主要實現的功能

• 首頁、專題、分類、購物車、個人
• 小程序受權登錄獲取用戶信息
• 首頁包含品牌製造頁、品牌製造詳情頁面、新品首發頁面、人氣推薦頁面、各分類列表
• 商品詳情頁面，包含常見問題、你們都在看商品列表、加入購物車、收藏商品、當即購買、下訂單、選擇收貨地址
• 搜索功能，包含歷史記錄、熱門搜索、搜索後列表展現、模糊搜索提示
• 商品列表部分包含綜合、價格高低進行排序
• 專題功能，包含專題詳情、專題推薦列表
• 分類，包含左邊大分類和右邊詳細分類
• 購物車，包含商品單選全選、左滑刪除商品、下訂單等功能
• 地址管理，包含新建地址和導入微信地址，地址編輯、左滑刪除、設置默認地址
• 個人頁，包含個人收藏、地址管理、意見反饋

部分效果展現

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

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

三、購物車功能添加購物車,單選多選,刪除和商品收藏功能

四、地址管理

項目總結和遇到的一些問題

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鼓勵一下,謝謝你們的支持!!!!