一般的电商类小程序项目都大致分为四个模块：首页，分类，购物车，我的 页面四个模块。
文件目录清晰，组件化开发，接口数据封装是做一个项目的必要操作。
文件目录大致就是这样，目录一定要建好，要不然后期很乱：
关于组件化开发，可以看看我的文章：
小程序组件封装链接
接口数据封装：
在http文件夹下新建三个js子文件： env.js文件，搭建环境：
module.exports={
//开发环境
dev:{
baseUrl:'http://127.0.0.1:8080'
},
//生产环境
prod:{
baseUrl:'https://api.it120.cc'
},
//测试环境
test:{
baseUrl:'https://api.1909A.com'
}
}
request.js文件，promise封装：
const {
baseUrl
} = require('./env.js').prod
const vipUrl = "xps"
module.exports = {
// request是一个函数，封装了request，其中的参数不填的话就会有默认值
request: function (url, data = {}, method = "GET", isSubDomain = true) {
//把正确的请求地址拼接起来
let fullurl = `${baseUrl}/${isSubDomain ? vipUrl : ""}/${url}`
//Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.
return new Promise((resolve, reject) => {
wx.showLoading({
title: '加载中',
})
wx.request({
url: fullurl,
method,
data,
header: {
//此处的头部信息要注意接口文档
"content-type": "application/x-www-form-urlencoded"
},
//成功回调
success(res) {
//返回的数据
resolve(res.data)
wx.hideLoading()
},
//失败回调
fail() {
console.log("接口问题")
}
})
})
}
}
api.js文件（我们是团队开发，所以分别封装）：
const {xhy_api} = require('./xhy_api/xhy_api.js')
const {sbq_api} = require('./sbq_api/sbq_api.js')
const {dly_api} = require('./dly_api/dly_api.js')
const {xps_api} = require('./xps_api/xps_api.js')
const {zj_api} = require('./zj_api/zj_api.js')
const {yyq_api} = require('./yyq_api/yyq_api.js')
module.exports={
xhy_api,
sbq_api,
dly_api,
xps_api,
zj_api,
yyq_api
}
封装大概就是这样，用的时候也很简单：
以轮播图为例：
js代码
// components/component/swiper.js
const {xps_api} = require("../../http/api");
Component({
// 组件的生命周期
lifetimes:{
created(){
this.getBannerList()
}
},
/**
* 组件的初始数据
*/
data: {
bannerList: [], //我获取轮播图的数据
showList:[],//存数据的轮播图
indicatorDots: true, //是否显示面板指示点
vertical: false, //滑动方向是否为纵向
autoplay: true, //是否自动切换
interval: 2000, //自动切换时间间隔
duration: 500, //滑动动画时长
},
/**
* 组件的方法列表
*/
methods: {
getBannerList() {
xps_api("indexSwiper").then(res=>{
this.data.bannerList = [];
// console.log(res)
res.data.forEach(ele=>{
if(ele.type == "index"){
this.data.bannerList.push(ele)
}
})
this.setData({
bannerList: this.data.bannerList,
showList:res,
})
})
},
}
})
直接引入api，在方法里面直接调用接口就可以得到接口数据，然后渲染到页面就可以了。
wxml代码：
<!--components/component/swiper.wxml-->
<view class="bannerSwiper">
<!-- 轮播图 -->
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper indicator-dots="{{indicatorDots}}" indicator-active-color="white" circular="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<swiper-item wx:for="{{bannerList}}" wx:key="index" class="swiper_item">
<image src="{{item.picUrl}}"></image>
</swiper-item>
</swiper>
</view>
</view>
</view>
这个页面好多地方都用到了跳转，就说一下小程序常用的页面跳转的方法（编程式触发和标签式触发）：
编程式：
wx.navigateTo() 这是最普遍的一种跳转方式，其官方解释为：“保留当前页面，跳转到应用内的某个页面”
例如：
实际效果如下：左上角有一个返回箭头，可以返回上一个页面。
wx.redirectTo() 不保留历史，跳转到另一个页面，不能返回到上一页面 。
wx.switchTab() 只跳转到tabBar页面，不带回退。
wx.reLaunch() 即能跳转到tabBar页面，也能跳转到非tabBar页面，不带历史回退。
标签式：
接收：通过另一个页面在onload生命周期中接收。
还有一个重要的就是css的动态样式（tab切换）
这里推荐一个链接：
基础的大概就是这些
然后小程序最主要的就是登陆功能，登录功能可以看我的博客链接：
登陆实现之后，开发小程序就容易多了。
我们这个项目是小组团队开发完成的，代码都在码云上合成
在git上遇到了一个非常恶心的问题，就是项目可以正常从远程分支上拉取下来，但是我写的代码提交不上去，一直报错403，翻译过来就是没有权限。很纳闷，在组长那里看仓库，分支还是在小程序后台，我都在组织里面，没有任何问题，但是我的代码就是提交不上去。
后来在我自己的码云上创建了远程分支，发现自己的可以提交上去。经过仔细摸索和分析报错问题，发现是本地路径和远程路径不匹配。解决方案在下面：
