电商小程序项目（原生MINA框架）步骤及完整项目下载（更新中）

一、帮助文档：

• 小程序开发文档  | 微信开放文档
• MDN Web Docs (mozilla.org)
• iconfont-阿里巴巴矢量图标库

二、搭建项目

1. 新建小程序项目 - 填入自己的appid
2. 搭建⽬录结构 - 无用的要先清空                                                                                 

   

   ⽬录名	作⽤
   styles	存放公共样式
   components	存放组件
   lib	存放第三⽅库
   utils	⾃⼰的帮助库
   request	⾃⼰的接⼝帮助库

3. 搭建项⽬的⻚⾯ - 列式编程

   ⻚⾯名	名称
   ⾸⻚	index
   分类⻚⾯	category
   商品列表⻚⾯	goods_list
   商品详情⻚⾯	goods_detail
   购物⻋⻚⾯	cart
   收藏⻚⾯	collect
   订单⻚⾯	order
   搜索⻚⾯	search
   个⼈中⼼⻚⾯	user
   意⻅反馈⻚⾯	feedback
   登录⻚⾯	login
   称授权⻚⾯	auth
   结算⻚⾯	pay

4. 引⼊字体图标 

   1. 打开阿⾥巴巴字体图标 ⽹站	2. 选择的图标	3. 添加⾄项⽬
   4. 下载到本地	5. 将样式⽂件 由 css 修改为 wxss	6.app.wxss⼩程序中引⼊

5. 搭建项⽬tabbar结构    

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

                      
6. 定义全局样式

   /**app.wxss**/
   /* 字体文件样式导入 */
   @import "/styles/iconfont.wxss";
   /* 样式全局初始化 小程序中不支持通配符* */
   page,view,text,swiper,swiper-item,image,navigator{
     box-sizing:0;
     padding: 0;
     margin: 0;
   }
   /* 主题颜色 通过变量来实现  less存在变量，原生css和wxss也支持变量*/
   page{
     --themeColor:#eb4450;  
     /* 使用主題颜色 color: var(--themeColor) */
     /* 统一字体大小 */
     font-size: 28rpx;
   }

   三、项目下载