小程序商场类项目流程

一，项目搭建
1.量尺寸,750可用.英文目录下的命令行输入:vue create -p dcloudio/uni-preset-vue my-project,选择默认模板.再npm run dev:mp-weixin
2.打开dist下的mp-weixin,就是小程序原生结构.
3.在pages.json里globalstyle配置导航文字和颜色.配置tabbar里的list,
3.1:注意list下的分发路径配置完还要到pages里配置.text,pagePath,iconPath,selectedIconPath,activeiconpath上下基本配置完成.
4.在page下面的index.vue开始写内容.
二，首页
5.分析页面结构,分成几大盒子楼层.布局.
6.安装less,less-loader.使用less.
7.封装搜索组件,导入组件.
8.加载页面,在onload(),发请求获取商品数据.
9.封装uni.request.
10.在封装的request.js里添加加载框 uni.showLoading({title:‘加载中’})和关闭加载框uni.hideLoading()
11.给pages.json需要下拉刷新的页面配置enablePullDownRefresh下拉刷新.和下拉的背景颜色backgroundColor
12.监听下拉事件,onPullDownRefresh(),注意是异步,前面加async,下拉后重新发loadding里的请求.再调用 uni.stopPullDownRefresh();终止下拉.
13.自定义图标，给图标固定位置，v-if判断当滚动距离大于0才显示图标，用 onPageScroll(e) 监听页面滚动。点击图标，用goTop() {uni.pageScrollTo({ scrollTop: 0 }) }回到顶部。
14. 移动设备中overflow:scroll是有问题的，容易引起与页面滚动起冲突，小程序中提供了专门的滚动区域组件（scroll-view）
三，分类页
1.分析分类页的结构，左边是scroll-view滚动视图，右边是楼层，初次加载页面，发请求获取一级分类，并渲染在侧边栏，分析数据，再渲染到右边main区，为二级子类。
2.此时右边展现的是第一个分类的死数据，定义计算属性，用索引返回一级分类，渲染右边main，此时依然是死数据。
3.设置点击事件，点击时获取index,将index定义后丢给计算属性，此时数据变活。左右完成联动。
四，搜索组件建议
1.给input搜索框添加双向绑定v-model到keyword关键字，添加@input事件，当触发@input事件，发起搜索建议请求，参数包含keyword,将返回的列表添加到 data新建列表里，v-for渲染到搜索结果页面。
2.点击取消时，重新赋值清空list和关键字。有个小细节，点击搜索调用 uni.hideTabBar()隐藏下边栏，防止跳转。取消搜索再调用 uni.showTabBar()显示下边栏;
3.搜索框按回车，调用uni.setStorageSync(key,history),定义history,向history里加keyword数据.把history列表渲染到搜索记录盒子里,数组去重，点击清空，调用uni.removeStorageSync清除数组数据
4.搜索框按回车，调用小程序 uni.navigateTo({url: “/pages/list/index？query=”+this.keyword}),?后面接参数，跳转到搜索结果组件。
五，路由导航。
1.小程序里的路由有四种。如果要跳转到tabBar,需设置open_type为switchTab，其余的直接通过navigator 里的url路径跳转
六，搜索的商品列表
1.onload(params)里的参数可以获取url路径和参数。进来发请求获取商品列表，请求参数包含onload里获取的前台参数，将响应数据渲染。重点是处理onLoad从前页获取的参数。
2.分页：监听滚动到底部事件，@scrolltolower，触发getmore，调用获取商品的函数，传入pagesize和pagenum，让pagenum加1，发请求，获得的列表与原来的商品列表拼接。当商品总tatol和商品列表长度相等，reurn请求。
七。商品详情
1.前页点击商品，通过 uni.navigateTo({url: “/pages/list/index？query=”+this.keyword}),api,传递商品数据，进入详情组件，依然是onLoad()接受数据，发送请求，将请求的信息渲染出来。
2.点击客服，弹出客服聊天框，这里用按钮设置open-type="contact"即可。
3.点击购物车正常思路：1：未登陆就跳到登陆。2：未登陆就将数据存到本地，到登陆时从本地读取。
4.点击加入购物车，从当前商品信息解构出商品的信息，商品id.for循环判断购物车数组是否存在该商品id.存在则商品数量加一，而且自定义状态为选择goods—checked=true， uni.setStorageSync(“carts”, this.carts);不存在就将商品信息添加进购物车数组并数量设置为1.说白了就是本地存储前判断有无该商品。
5.点击购物车，跳转到购物车页面，用uni.getStorageSync取出本地存储的商品，循环本地存储的商品列表。渲染到购物车页面，点击增减，传递购物车列表的index和step.直接改变数量，用 @blur="changecount($event, index)"监听解决。
6.并重新给商品列表索引为index的项的goods-number赋值；点击选择框，状态改变,选中框颜色也改变。通过计算属性过滤出选中的商品。
7.计算属性判断选中的和购物车列表数组长度是否相等，如果相等，则全选按钮的：color颜色为选中,全选控制单选：for循环，将商品的按钮设置为true;
8.金额计算通过计算属性，数量乘以单价。数据持久化：数量变化或者选中状态变化时，更新本地存储，重新将购物车列表存一次。
9.收货地址调用api, uni.chooseAddress({ success: (info) => {this.address = info;}, });如果成功，赋值该地址给data里的地址。渲染到地址上。
八。我的
1.点击我的，跳转到我的页面，有组件获取头像和名字，开放能力里的open-type标签，设置类名，直接调用头像或者地址和个人信息。
2.点击联系客服，触发绑定事件调用api： uni.makePhoneCall({ phoneNumber: “10086”, });
3.点击反馈，调用api,open-type=“feedback”
4.监听分享转发： onShareAppMessage()
九。结算
1，结算前，判断地址有无，购物车列表选中状态的数组长度不为0，登陆的token，三者缺一不可，未登陆跳到登陆页面
十.登陆
1.加载登陆页面,出现登陆按钮，按钮加open-type:getuserinfo授权获取登陆信息,onload里面直接调用asyni await uni.getuserinfo(),打印用户信息。
2.也可以通过@getuserinfo监听用户授权，如果点击按钮选中授权，则获取其信息，如果不授权，获取信息为空，
3.检测如果用户已经授权过，则使用getUserInfo Api.检测如果未授权则使用按钮的@getuserinfo事件
4.进入登陆页，onLoad调用uni.getSetting，从响应数据看是否授权，如无授权，需点击登陆按钮，
5.点击登陆按钮，@getuserinfo监听了用户点击授权的接收或者拒绝，如果拒绝，不用操作了。点击接受，从@getuserinfo事件解构出后台需要的参数。
6.解构出参数，在@getuserinfo事件里发请登陆请求。（如果请求需要code，调用uni.login()解构出code,再发送请求），登陆请求发送后，调用uni.setStorageSync保存后台响应的token。并返回上一步。
7.如果进来时已经授权，判断是否授权用 const [error, res] = await uni.getSetting();if (res.authSetting[“scope.userInfo”]) ；调用uni.getUserInfo();解构出登陆需要的参数，调用登陆函数。登陆请求发送成功，保存返回的token，并调用 uni.navigateBack()返回上一步操作。
十一，订单
1.点击支付，三个条件满足，跳到订单页面去支付，onload里调用请求获取当前用户的订单列表。渲染订单列表的商品和支付状态。点击支付
十二，支付：
1.点击支付，1.发送支付请求，响应后，2.打印分析响应结果，3调用 uni.requestPayment(message.pay)就弹出支付二维码。该api里的参数从支付请求获得
2.网页中调用支付用a标签跳转。