先创建整体页面
"pages":[
"pages/index/index",
"pages/category/index",
"pages/goods_list/index",
"pages/goods_detail/index",
"pages/cart/index",
"pages/collect/index",
"pages/order/index",
"pages/search/index",
"pages/user/index",
"pages/feedback/index",
"pages/login/index",
"pages/auth/index",
"pages/pay/index"
]
创建部分文件夹
components
icons
lib
request
styles
获取iconfont
小图标
在阿里巴巴矢量图标库获得图标
从网页上把在线链接的css
复制到微信小程序的styles里的wxss
文件里
搭建tabbar
从阿里巴巴矢量图标库下载几个导航栏的图
在app.json
里设置tabBar
:
"tabBar": {
"color":"#999",
"selectedColor": "#d81e06",
"backgroundColor": "#ffffff",
"position":"bottom",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/homeb.png",
"selectedIconPath": "icons/homer.png"
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "icons/sortb.png",
"selectedIconPath": "icons/sortr.png"
},
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "icons/shoppingb.png",
"selectedIconPath": "icons/shoppingr.png"
},
{
"pagePath": "pages/cart/index",
"text": "我的",
"iconPath": "icons/userb.png",
"selectedIconPath": "icons/userr.png"
}]
}
主题颜色通过变量来实现
//app.wxss
page{
/* 定义主题颜色 */
--themeColor: #eb4450;
}
/* index.wxss */
view{
/* 使用主题颜色 */
color:var(--themeColor);
}
设置导航栏和全局外观
在app.json
中设置导航栏和标题栏字体颜色,如下:
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ff2d4a",
"navigationBarTitleText": "黑马优购",
"navigationBarTextStyle": "white"
}
这里整体框架就搭建好了
封装http
首先在根目录下创建一个文件夹,用的是http,然后在这个文件夹下创建一个js文件。这个js文件中写入
export default (url,data,method)=>{ // 导出一个函数 函数中的 url是请求接口地址 data 是发送的参数 method 是请求方式
return new Promise((resolve,rejects)=>{ // 返回一个 promise
wx.request({
url, //请求地址
data, // 请求时携带的参数
method, // 请求方式
success(res){ // 请求成功指定的函数
resolve(res); // 请求成功执行成功的回调,执行的是 then
},
fail(err){ // 请求失败执行的函数
rejects() // 请求失败执行的回调,执行的是 catch
},
})
})
}