1. 技术选型
1.1 小程序的第三方框架
腾讯的
wepy类似vue。美团
mpvue类似vue。京东
taro类似react。uni-app类似vue。滴滴
chameleon。原生框架
MINA。
1.2 项目的技术
- 使用原生的框架
MINA。
1.3 后端接口文档
2. 修改appid
修改appid
3. 清除文件中不需要的内容
删除
logs和utils文件夹。清空全局
wxss文件。清空全局
app.js文件，使用wx-app快捷方式创建新的生命周期方法并删除globalData:
//app.js
App({
//onLaunch,onShow: options(path,query,scene,shareTicket,referrerInfo(appId,extraData))
onLaunch: function(options) {
},
onShow: function(options) {
},
onHide: function() {
},
onError: function(msg) {
},
//options(path,query,isEntryPage)
onPageNotFound: function(options) {
}
});
- 在
index.json中配置页面标题头:
"navigationBarTitleText": "优购首页"
4. 创建新的目录结构
4.1 创建新功能的文件夹
| ⽬录名 | 作⽤ |
|---|---|
styles |
存放公共样式 |
components |
存放组件 |
lib |
存放第三⽅库 |
utils |
⾃⼰的帮助库 |
request |
⾃⼰的接⼝帮助库 |
4.2 创建页面文件夹
| ⻚⾯名称 | 名称 |
|---|---|
| ⾸⻚ | index |
| 分类⻚⾯ | category |
| 商品列表⻚⾯ | goods_list |
| 商品详情⻚⾯ | goods_detail |
| 购物⻋⻚⾯ | cart |
| 收藏⻚⾯ | collect |
| 订单⻚⾯ | order |
| 搜索⻚⾯ | search |
| 个⼈中⼼⻚⾯ | user |
| 意⻅反馈⻚⾯ | feedback |
| 登录⻚⾯ | login |
| 授权⻚⾯ | auth |
| 结算⻚⾯ | pay |
"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/index/index"
]
目录结构
5. 引入字体图标
- 这里使用的阿里的图标库
iconfont。
官网链接:
iconfont字体图标库。搜索相关的图标并加入到购物车。
添加完成之后点击购物车图标:
点击购物车图标
- 在展开的侧边栏中新建一个项目用于管理当前图标：
将图标添加到新的项目中
- 选中
font class之后选择查看在线连链接:
查看图标在线链接
- 复制该链接打开，复制打开链接中的内容；
样式文件
- 在
styles文件夹下创建一个iconfont.wxss的文件夹，将刚才的样式代码粘贴到里面。
- 在全局样式文件
app.wxss中引入刚才的样式文件。
@import "./styles/iconfont.wxss";
- 在独立的任意页面中使用刚才的图标:
success!
<text class="iconfont icon-yijianfankui"></text>
6. 搭建 tabbar页面
在根目录下新建
icons目录并导入tabbar需要使用的图标。在
app.json中配置tabbar: 使用快捷方式 输入tab，根据提示编写出结构
"tabBar": {
"color": "#999",
"selectedColor": "#FF2D4A",
"backgroundColor": "#FAFAFA",
"position": "bottom",
"borderStyle": "black",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icons/home.png",
"selectedIconPath": "icons/home-o.png"
},
{
"pagePath": "pages/category/index",
"text": "分类",
"iconPath": "icons/category.png",
"selectedIconPath": "icons/category-o.png"
},
{
"pagePath": "pages/cart/index",
"text": "购物车",
"iconPath": "icons/cart.png",
"selectedIconPath": "icons/cart-o.png"
},
{
"pagePath": "pages/user/index",
"text": "我的",
"iconPath": "icons/my.png",
"selectedIconPath": "icons/my-o.png"
}
]
}
7. 初始化页面样式
- 在
app.wxss全局样式文件中初始化页面样式:在小程序中假如存在一张设计稿的宽度为375px，小程序中1px = 2rpx。
@import "./styles/iconfont.wxss";
page,
view,
text,
swiper,
swiper-item,
image,
navigator {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/*
主题颜色
1. 在less中存在变量的知识
2. 原生的css和wxss也是支持变量的
*/
page {
/* 定义主题颜色 */
--themeColor: #eb4450;
/* 定义统一的字体大小
1. 存在一张设计稿大小 是 375px
在小程序中 1px = 2rpx
14px = 28rpx
*/
font-size: 28rpx;
}
- 在单独的页面中使用全局样式文件中定义的主题颜色 :
--themeColor
view {
/* 使用主题颜色 */
color: var(--themeColor);
}
- 完成头部
navigator的配置 :
完成头部navigator的配置
