uniapp学习笔记

·  阅读 1039

uniapp解决了跨平台开发的存在问题

  1. 跨更多的平台
  2. 体验更好
  3. 学习成本低,容易上手
  4. 开放生态,组件更丰富

我现在想要做的是使用uniapp做一个微信小程序购物商城项目

一.准备工作

安装工具

  • HBuilderX: https://www.dcloud.io/hbuilderx.html

创建uniapp

  1. 在文件选项中——>新建——>项目
  2. 选择uni-app选项模板选择Hello uni-app,单击创建
  3. 在微信开发者工具中运行uni-app项目
  • 运行——>运行到小程序模拟器——>运行设置
  • 在运行配置中——>微信开发者工具路径
  • 在微信开发者工具中设置——>安全设置——>服务端口:开启
  • 在HBuilderX工具中,运行——>运行到小程序模拟器——>运行设置——>运行配置——>外部web服务器调用url:http://127.0.0.1:微信启动的端口号
  1. 运行——>运行到小程序模拟器——>微信开发者工具 大功告成 !!

二.项目需求

  1. 页面
  • 首页
  • 商城
  • 商品分类
  • 编辑地址
  • 产品详情页
  • 购物车
  • 确认订单
  • 新增收货地址
  • 选择收货地
  1. 底部导航
  • 首页
  • 分类
  • 购物车
  • 我的

三.开始制作

1. 新建底部导航页面

在page目录中——>tabBar目录下———>创建了四个目录以及项目(index,classify,cart,mine)

2. 配置页面路由

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

  • 在package.json中配置路由 首先需要在pages节点中配置好path路径和title。
  • 第二步是在tabBar节点中配置底部 导航,比如文字颜色,选中时的样式,还有跳转的路径等等

底部导航就是这个样子啦


报错警告 【但是我先在还没有解决,以后回来解决 】


分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改