网易严选商城小程序全栈开发,域名备案中近期上线(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鼓励一下,谢谢你们的支持!!!!