uni-app优乐购商城小程序搭建

一只锦李Mm

已于 2023-06-28 11:37:04 修改

阅读量715

点赞数 1

文章标签： vue.js 微信公众平台微信小程序 uni-app 小程序

于 2023-06-18 16:52:09 首次发布

本文链接：https://blog.csdn.net/L1311621/article/details/131269929

版权

本文详细介绍了使用uni-app框架搭建微信小程序的过程，包括新建项目、目录结构设计、各页面如首页、分类、商品详情、购物车和我的页面的实现，以及获取数据、渲染页面、用户交互等功能。同时，文章提到了uni-app的跨平台能力、Vue.js基础以及微信小程序的相关开发工具和资源。

摘要由CSDN通过智能技术生成

uni-app优乐购商城小程序搭建

一、新建项目

购物商城接口文档：https://www.showdoc.com.cn/128719739414963/2516997897914014

帮助文档如下：

uni-app官网：https://dcloud.io/

阿里巴巴字体图标官网：https://www.iconfont.cn/

菜鸟教程:https://www.runoob.com/

微信小程序官网：https://developers.weixin.qq.com/miniprogram/dev/framework/

(1）uni-app框架：本项目用的是uni-app框架进行开发的，因为uni-app框架是使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序、快应用等多个平台。

(2）开发工具：用HBuilderX 来开发，因为uni-app项目都是用HbuildX来开发HBuilderX官网
(3）sass编译：为了方便编写scss/sass样式，建议安装 scss/sass 编译插件下载地址；进入之后点击——使用 HBuilderX 导入插件，登入HBuilderX，进行下载
(4）新建项目：
① 文件 ==》新建 ==》项目
② 填写项目的一些基本的信息

二、搭建目录结构

目录结构划分如下：

目录名	作用
common	存放公共样式
components	存放自定义组件
page	存放主包页面（tab页面）
subpkg1	子包1，存放子包页面（商品列表页面、商品列表页面、搜索页面）
subpkg2	子包2，存放子包页面（其他页面）
utils	自己的帮助库

三、搭建项目页面

页面名称	名称
首页	index
分类页面	category
商品列表页面	goods-list
商品列表页面	goods-detail
购物车页面	cart
收藏页面	collect
订单页面	order
搜索页面	search
个人中心页面	user
意见反馈页面	feedback
登录页面	login
授权页面	auth
支付页面	pay

四、搭建tabBar

在项目根目录下，新建icons文件夹，并将图标拷入改文件夹
修改app.json文件，添加tabBar

配置tabBar效果：pages.json文件 ⇒ 配置tabBar节点。代码和在微信开发者工具中的配置是一样的
代码如下：

"tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "",
    "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"
      }
    ]
  }