1、新建项目，安装sass，打开微信开发者工具
2、在manifest.json中找到mp-weixin=setting，添加checkSiteMap:false去除微信开发者工具报错，添加appid，微信开发者工具将服务端口号打开，新建.gitignore文件忽略上传文件，在unpackge目录新建.gitkeep文件占位让git追踪上传，将文件上传到码云（配置ssh公钥）
//.gitignore文件
/node_modules
/unpackge/dist
3、新建tabar页面，git新建tabbar分支，实现tabbar功能，将tabbar分支合并到main分支，删除tabbar分支
//git 命令
git checkout -b tabbar 创建分支
git checkout tabbar 切换分支
git branch 查看分支
git status 查看暂存区状态
git push -u origin tabbar 将本地仓库推送到远程仓库
git merge tabbar 合并分支
git push 推送到远程
git branch -d tabbar 删除本地分支（远程分支还存在）
home首页页面
1、新建home分支，初始化package.json包资源管理文件，npm安装escook网络请求包，根据npm介绍配置网络请求包，请求轮播图接口数据渲染数据
//在项目根路径打开cmd窗口初始化package.json文件,下载网络请求包（pink老师开发的）
npm init -y
npm install @escook/request-miniprogram
2、创建分包页面，在根目录新建subpkg目录，pages.json文件中指定分包位置，在subpkg目录下创建good_tail分包页面，新增点击图片跳转到good_tail中并将id值传递到页面上，在main.js中封装请求失败方法
3、home页面请求分类导航数据，完成页面布局渲染导航数据，点击导航实现跳转到tabbar页面
//pages.json指定分包位置
"subPackage":[
{
'root':'subpkg',
'pages':[]
}
]
//传参
<navigator :url="'/subpkg/good_detail/good_detail?id='+swiper.goods_id">
//封装请求失败方法 mian.js文件
uni.$showFail = function(title="数据加载失败",duration=1500){
title,
duration,
icon:'none'
}
return uni.$showFail()
4、home页面请求楼层数据，完成页面布局，渲染请求数据
5、新建good_list分包页面，点击楼层图片进行页面跳转并传递地址信息，将home分支与main分支进行合并
遇到的问题：无
分类页面
1、新建category分支，切换编译模式
2、完成分类页面布局，使用scrollview完成左右滚动，使用uni api的系统信息uni.getWindowInfo()获取可用页面高度，获取渲染接口数据
3、添加点击左侧栏点击切换样式效果，优化scrolltop点击两次后滚动不到顶部效果，添加点击三级分类跳转到商品列表并传递三级id
4、整理分支
遇到的问题：
1、图片渲染时微信开发者报错undefined，显示正常
已解决：请求的数据为三级分分类数据对象，当渲染第三级数据的时候，因为开始数据没有返回来，所以会报错，解决方法是将第二级分类数据保存到另一个data中，使用该data渲染数据，就不会产生三级数据渲染问题，不要用三级变量数据渲染页面
2、使用scrolltop为0切换滚动不到顶部
已解决：scrolltop需要动态绑定，初始值为0时，当点击后将它改为1，使用三元表达示切换数值
搜索组件
1、创建搜索组件分支，创建my-search组件（不用import）,完善搜索组件布局，使用导入uniicon插件，实现组件吸顶效果
2、创建search分包页面，点击search组件跳转到分包页面
3、使用unisearch组件，更改样式结构，添加自动获取焦点功能(组件属性中有)，添加输入节流功能
4、输入后获取搜索建议请求数据，渲染搜素建议布局结构，点击搜索建议跳转到搜索详情页并传递id
5、完成搜索历史布局，添加搜索历史关键字功能，用push追加历史，用reverse实现数组的反转（push将新关键字排序到数组后面），用set实现去除重复关键字，用setStoragesync
6、添加清空搜索历史，分支合并
// set搜索历史去重
let mySet = new Set(this.history);
mySet.delete(res)
mySet.add(res)
this.history = Array.from(mySet)
//数组反转
return [...this.history].reverse()
//搜索建议保存
onLoad() {
var str = uni.getStorageSync('history')
this.history = JSON.parse(str)
},
onUnload() {
uni.setStorageSync('history',JSON.stringify(this.history))
}
商品列表页面
1、更改编译模式添加参数，创建shoplist分支
2、添加接收请求接口对象参数（一共4个参数），请求商品列表数据，完成渲染列表布局
3、封装使用good组件，使用filter过滤器为价格添加两位小数
4、添加上拉加载下拉刷新功能，上拉加载利用页面的onReachBottom，pages.json的onReachBottomDistance监听实现，使用节流阀防止频繁触底请求，数据加载完毕时return并提示加载完毕
5、点击商品例表跳转到商品详情，分支合并提交
//添加小数
￥ {{item.goods_price | priceDecimal}}
filters:{
priceDecimal(num){
return Number(num).toFixed(2)
}
},
//浅拷贝拼接，不会影响页面结构
this.goodlist = [...data.message.goods,...this.goodlist]
//节流阀
onReachBottom(){
if(this.goodlist.length >= this.total) return uni.$showFail("没有更多了")
if(this.isLoding) return //初始值为false
this.reqParame.pagenum++
this.getGoodlist()
},
async getGoodlist(stopPull){
this.isLoding = true
const {data} = await uni.$http.get('/api/public/v1/goods/search',this.reqParame)
this.isLoding = false
//下拉刷新的关闭
this.getGoodlist(()=>{
uni.stopPullDownRefresh()
//数据请求成功后
stopPull && stopPull()
})
商品详情页面
1、创建gooddetail分支，获取商品详情数据
2、完成轮播图布局与数据渲染，使用uni.previewImage完成点击图片预览效果
3、完成商品详情页面布局，使用rich-text完成布局，使用正则替换解决布局图片留白空隙问题，使用v-if解决价格显示闪烁问题
4、使用uni组件完成底部购物栏，添加点击购物车跳转到购物车页面，完成分支的合并
//图片点击后预览
preview(i){
uni.previewImage({
current:i,
urls: this.swiperUrl.map(x => x.pics_big)
})
}
//富文本使用正则修改图片留白
data.message.goods_introduce = data.message.goods_introduce.replace(/<img/g,'<img style="display:block;"')
商品详情页购物车功能的实现
1、新建购物车分支，新建store文件夹，搭建配置vuex模块，新建car.jsvuex模块文件
2、使用vuex数据方法，点击加购物车实现向store中添加数据，使用find判断如果商品存在只加数量，不存在加商品
3、点击加入购物车实现购物车数量动态变化，在vuex中将购物车数据存储到本地
4、点击购物车跳转到购物车，显示购物车徽标（此时点击首页购物车徽标不显示），使用mixins完成点击首页时同样显示购物车徽标
//vuex使用
import {
mapState,
mapMutations
} from 'vuex'
computed: {
...mapState('m_car', ['shopCar'])
},
methods: {
...mapMutations('m_car', ['addToCar']),
//点击加入购物车，添加商品到购物车，如果存在数量+1，不存在则添加
mutations:{
addToCar(state,goods){
const res = state.shopCar.find((item)=>{
return goods.goods_id == item.goods_id
})
if(!res){
state.shopCar.push(goods)
}else{
res.goods_count++
}
//watch立即调用
immediate:true
//显示Tabbar
uni.setTabBarBadge
购物车页面
1、完成购物车页面布局，渲染vuex购物车数据
2、动态渲染商品勾选状态，通过vuex持久化保存商品勾选状态
3、使用uni-number-box封装购物车计数器，进行动态渲染，选择不同页面是否展示
4、点击计数器时触发自定义事件，通过vuex保存商品数量到本地
5、使用uni.swiper.action添加左滑删除功能
6、新建收货地址组件完成收获地址的页面布局，动态展示未有收货人与已有收货人的两种展示效果，使用uni.chooseAddress选择收货地址，动态渲染收货地址，保存收获信息到vuex和本地种实现持久化数据存储
7、将收获地址编写于vuex的getters中，利于复用，解决授权问题（没写，好像官方更新了），添加点击收获地址重新获取更改收获信息页面
8、添加结算功能组件，完成组件结构样式，动态计算结算总数量、商品总价格与全选按钮的切换功能 全选功能：点击全选为true时将所有商品的状态标记选择，否则标记取消，遍历所有商品的选择选择状态，全为true将全选勾选，否则取消
9、添加动态显示购物车徽标功能，添加购物车为空布局，整理分支
问题：
1、同时接收自定义参数跟event参数
使用@click($event,item)
2、判断对象是否存在属性 Object.keys(object).length
登录与支付
1、点击结算，进行逻辑判断（是否有收件人，商品，登录token）
2、新建分支，新建登录组件与个人信息组件，完成登录组件布局，使用button中的登录方法进行登录获取用户信息，将用户信息存储到vuex中
3、获取调用uni.login方法获取token，准备用户信息参数及token值参数，将参数用于登录接口调用，登录成功后将token存储到vuex中（接口失效）
4、完成用户个人信息页面布局，渲染用户信息页面(假数据部分渲染)，实现点击退出登录功能
5、点击结算，如果没有登录的情况下实现倒计时跳转到登录页面效果，实现跳转登录后自动跳转回上一页面效果
6、实现为支付相关页面添加header请求头（在请求拦截器中添加，添加内容为token），token请求回来的数据为无效token，所以用了老师的token值在token获取接口文档中，成功请求订单编号
7、点击结算发起创建订单请求获取订单编号（准备创建订单参数），当订单编号返回成功后发起预支付订单请求获取pay对象（获取失败跳过无解token的问题），获取pay对象成功后调用uni.requestPayment接口将pay对象作为参数唤起支付窗口，监听支付窗口支付成功提示成功，取消提示失败（跳过）
8、整理分支
遇到的问题：
1、JSON.parse使用报错
我对''字符传使用了JSON.parse所以引起连串反应报错，{}可以用，''不要用
小程序打包与APP打包
因为没有进行多端适配，所以APP打包无法获取地址、登录的功能
gitee地址：gitee.com/yezhengqi/x…
