uniapp解决了跨平台开发的存在问题
- 跨更多的平台
- 体验更好
- 学习成本低，容易上手
- 开放生态，组件更丰富
我现在想要做的是使用uniapp做一个微信小程序的购物商城项目
一.准备工作
安装工具
- HBuilderX:
https://www.dcloud.io/hbuilderx.html
创建uniapp
- 在文件选项中——>新建——>项目
- 选择uni-app选项模板选择Hello uni-app,单击创建
- 在微信开发者工具中运行uni-app项目
- 运行——>运行到小程序模拟器——>运行设置
- 在运行配置中——>微信开发者工具路径
- 在微信开发者工具中设置——>安全设置——>服务端口:开启
- 在HBuilderX工具中,运行——>运行到小程序模拟器——>运行设置——>运行配置——>外部web服务器调用url:
http://127.0.0.1:微信启动的端口号
- 运行——>运行到小程序模拟器——>微信开发者工具
大功告成 !!
二.项目需求
- 页面
- 首页
- 商城
- 商品分类
- 编辑地址
- 产品详情页
- 购物车
- 确认订单
- 新增收货地址
- 选择收货地
- 底部导航
- 首页
- 分类
- 购物车
- 我的
三.开始制作
1. 新建底部导航页面
在page目录中——>tabBar目录下———>创建了四个目录以及项目(index,classify,cart,mine)
2. 配置页面路由
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
- 在package.json中配置路由 首先需要在pages节点中配置好path路径和title。
- 第二步是在tabBar节点中配置底部 导航，比如文字颜色，选中时的样式，还有跳转的路径等等
底部导航就是这个样子啦
报错警告
【但是我先在还没有解决，以后回来解决 】