├
一个程序，需要的HTTP请求会很多，如果我们每个请求都去写一个wx.request，这样写出来的代码，看起来会很冗长，他人看我们的代码时也会很累，也不利于我们之后的修改。因此为了代码的整洁，和之后的修改方便。我就把所有的API请求请求封装在wxapi文件目录下。
API封装完了，该怎么调用呢？我就以首页的banners数据为例
//index.jsconstWXAPI=require('../../wxapi/main')onLoad:function(options){WXAPI.showLoading()this.getBanners()},getBanners(){WXAPI.getBanners().then(res=>{wx.hideLoading()this.setData({banners:res.data})})},记住，如果想要发送HTTP请求数据的页面，都必须加上这一句constWXAPI=require('../../wxapi/main')
开始准备OK,现在开始写页面。第一步要写的是tabBar部分。
看起来是不是有点奇怪，为什么有点透明的感觉？因为这个tabBar组件是我自己写的。
一般来将，直接在把tabBar组件写在app.json中，就可以了。
但是我觉得不是那么好看，所以就自己撸了一个tabBar组件出来。
写完这个组件后我总解了一下,需要注意的问题.
所以我在app.js中存入了一个page属性，来存储当前页面，然后在点击事件goToPage()方法中加入判断去解决。
比如index页面
如何使用？
这个组件很简单，定义出来就可以直接使用，并且修改颜色和大小.
在首页中存在很多这样的商品列表，一个一个写，这样写出来的代码会导致首页的代码显得很多，并且不好维护，所以我就封装成了一个组件.
初学者，可能会说，0.5px边框，不就是border:0.5px吗，其实这是错的。
浏览器会把任何小于1px的边框都解析成1px,所以你写0.5px其实浏览器会解析成1px,这样就实现不了效果。
其实也很简单，使用伪类去画。
例如，goodList组件的右部边框.
在index页面的html中,我在包裹goodList的view标签的class中加上了rightBorder这个类来表示画出上边框。
其它还有一些细节问题就按照所需写就行。
只是我的页面中的一个列表信息，这个很简单
我这里引入的是weui组件的搜索样式。如何用
swiper和swiper-item组合起来就可以实现,一些配置信息，请查看官方文档
具体代码
功能要求:
功能要求并不难，但是对于初学者而言，可能会有些问题。我就直接说功能该怎么做
先贴出data中需要的数据
data:{categroy:[],//商品信息curIndex:'A',//当前的选中的标签toView:'A',//去到的标签//存入每个list的高度叠加heightArr:[],//最后一个list,就是最后一个标签的idendActive:'A'},点击左边右边滑动这一功能很简单就能实现
只需要在右边scroll-view组件中添加事件scroll-into-view="{{toView}}",toView就是商品显示的id
注意，右边每个商品信息，页面渲染时必须加上id属性
然后左边的scroll-view组件只需添加一个点击事件去修改toView的值就行了
//点击左边标签要修改的信息switchTab(e){this.setData({curIndex:e.target.dataset.index,toView:e.target.dataset.index})},滑动右边左边高亮对应改变首先需要计算出右边商品每一块占据的高度,并且存入数组中,可以放入onReady生命周期中
//计算出右边每个商品占据的高度getPageMessage(){//console.log(4)letself=thisletheightArr=[]leth=0constquery=wx.createSelectorQuery()query.selectAll('.right-list').boundingClientRect()query.exec(res=>{res[0].forEach(item=>{h+=item.heightheightArr.push(h)})self.setData({heightArr:heightArr})})},在右边的scroll-view组件中加上事件。bindscroll="scrollContent,这是scroll-view提供的事件,在滑动时就会触发.
//页面滑动时触发scrollContent(e){constscrollTop=e.detail.scrollTopconstscrollArr=this.data.heightArrconstlength=scrollArr.length-1letendChar=String.fromCharCode(65+length)letcurChar=this.getCurrentIndex(scrollTop)if(this.data.endActive!=endChar){this.setData({curIndex:curChar})}else{this.setData({endActive:'A'})}},//判断curIndex应该是那个getCurrentIndex(scrollTop){constscrollArr=this.data.heightArrletfind=scrollArr.findIndex(item=>{//提前10rpx触发效果returnscrollTop 但是这样的滑动并不是很完美，右边滑动到最下面，左边高亮却不是最后一个 相对完美效果就是这样 想要完美一点就要在，右边scroll-view添加一个事件：bindscrolltolower="scrollEnd" 想要实现这样的效果并不困难。 逻辑顺序:首页点击商品信息->商品详情页面显示对应的商品详情信息->购物车页面显示商品购买的商品信息.->修改之后，商品详情页面显示修改的信息。 想要实现这样的功能，必须有一个id在页面跳转时，传入给跳转的页面，跳转的页面再通过id值获取页面所需的数据 例如：首页->商品详情页 这是一条商品的列表的信息,通过点击事件bindtap="goDetails"，跳到对应的页面. 传入的id值可以再onLoad生命周期的options参数上获取 onLoad:function(options){WXAPI.showLoading()//获取用户的地址信息constaddress=wx.getStorageSync('Address');this.setData({id:options.id,address})this.getGoodDetail()},数据的存储逻辑我是把数据直接存在本地缓存中(也可以直接存入到云数据库中)，使用的是wx.setStorage() 在本地存入了两个数据，一个是所有购买的商品信息，一个是总的商品购买数量 对比一下上面两张图的区别. 在购物页面中选的商品数量和具体的商品信息，之后跳转回商品详情页面中,对应的数据会修改 在购物页面点击确认之后，我默认就把商品添加到购物车中，并且位于数据的最后一条 返回商品详情页面时，会重新触发onShow生命周期的函数。 所以我只需要，在onShow中触发修改方法就行. 这一个三角形是使用CSS画出来的，并不是图标。 使用CSS画出一个三角形，也不是那么困难。使用的是伪类和border属性 想要获取用户的经纬度信息，可以使用wx.getLocation()，就可以获取用户的经纬度信息了.