小程序学习电商小项目实战(1)--框架搭建和准备

简介: 小程序学习电商小项目实战(1)--框架搭建和准备

开发工具


vscode + 小程序开发工具 + git管理


vscode需要装的插件:


1dc618a0ed9580ce8bfa6facb208c08f.png


补充: vscode的快捷键:


https://blog.csdn.net/padluo/article/details/105153420


框架搭建


1.新建几个文件夹

5d4c6812c8535adbb050f4ddf2e1bce8.png

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

2.删除默认的文件


如:log页面,默认的app.js. logs等文件夹内容


3.新建13个页面


vs中的快捷键: wx-app:

1dc618a0ed9580ce8bfa6facb208c08f.png

vs列式编辑:几个快捷键:


ctrl + shift + alt + 方向键 : 进入列式编辑


ctrl+左键 ,跳到单词末尾(要选中的话可同时按住shfit)


ctrl+home/end,跳到行尾或行头(要选中的话可同时按住shfit)


技巧:注意用空格先把单词分开,便于处理


4.引入字体图标iconfont

5d4c6812c8535adbb050f4ddf2e1bce8.png46a9d80a6e05e4e3b19d57a0ee70bcdf.png66ba272a0bfc97be54a5fa679e3d5482.png



https://www.jianshu.com/p/17b5a1f12669


5.设置4个tabbar


app.json


{
  "pages":[
    "pages/index/index",
    "pages/category/category",
    "pages/goods_list/goods_list",
    "pages/goods_detail/goods_detail",
    "pages/cart/cart",
    "pages/collect/collect",
    "pages/order/order",
    "pages/search/search",
    "pages/user/user",
    "pages/feedback/feedback",
    "pages/login/login",
    "pages/auth/auth",
    "pages/pay/pay"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "电商小项目",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "#fafafa",
    "borderStyle": "black",
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/home.png",
      "selectedIconPath": "icons/home-o.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "icons/category.png",
      "selectedIconPath": "icons/category-o.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "icons/cart.png",
      "selectedIconPath": "icons/cart-o.png"
    },
    {
      "pagePath": "pages/user/user",
      "text": "我的",
      "iconPath": "icons/my.png",
      "selectedIconPath": "icons/my-o.png"
    }
  ]
  },
  "sitemapLocation": "sitemap.json"
}


以上的所有操作效果如下:

1dc618a0ed9580ce8bfa6facb208c08f.png

git代码地址:


https://github.com/hufanglei/pyg-demo/tree/day01



相关文章
|
1月前
|
存储 监控 小程序
TP6+Uni-app框架下,圈子系统小程序的快速上线开发步骤
社交圈子系统多端运营级应用,融合了推荐匹配、语音聊天、IM即时通讯、动态发布、一键约聊、同城交友、附近的人、充值提现、邀请推广等功能,为平台运营提供更多的盈利变现方式。程序源码开源,支持二次开发,根据客户不同应用场景需求,定制个性化解决方案。
56 9
|
26天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
7月前
|
小程序 视频直播 UED
电商直播小程序系统开发:打造“直播+电商+社交”闭环
电商直播小程序成为商家与消费者互动的关键,通过微信提供的实时视频工具,实现流畅购物体验。系统功能包括直播预览、主播管理、红包互动、用户管理及闭环购物。它强化品牌效应,利用私域流量,简化流程并转化会员。开发涉及需求分析、设计规划、功能开发、测试优化及上线维护。企业需关注用户体验,以保持竞争力。寻求开发合作可联系相关人员。
|
5月前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
390 60
|
4月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
252 2
|
6月前
|
移动开发 小程序 JavaScript
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
318 65
|
6月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
155 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
5月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
5月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录

热门文章

最新文章