微信小程序项目（南师中北生活圈）（一）搭建步骤

淡淡的烟草味﹌ 2022-12-10 10:14 133阅读 0赞

## 小程序的第三方框架 ##

> 例如常见的：腾讯 wepy类似vue，美团 mpvue类似vue，京东 taro，滴滴 chameleon，uni—app类似vue。

##### 此项目使用的原生框架MINA #####

### 1、搭建项目目录结构 ###

<table> 
 <thead> 
  <tr> 
   <th>目录名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>styles</td> 
   <td>存放公共样式</td> 
  </tr> 
  <tr> 
   <td>components</td> 
   <td>存放组件</td> 
  </tr> 
  <tr> 
   <td>lib</td> 
   <td>存放第三⽅库</td> 
  </tr> 
  <tr> 
   <td>utils</td> 
   <td>⾃⼰的帮助库</td> 
  </tr> 
  <tr> 
   <td>request</td> 
   <td>⾃⼰的接⼝帮助库</td> 
  </tr> 
 </tbody> 
</table>

如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center]

### 2、搭建项目的页面 ###

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

如下图所示（在page文件中会显示如下文件）：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 1]

### 3、引入字体图标 ###

阿里巴巴字体图标库 iconfont，链接: [https://www.iconfont.cn/][https_www.iconfont.cn].

> 1、搜索购物车，选择我们想要的图标  
> 2、点击购物车，点击添加至项目  
> 3、测试项目如下显示

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 4]

> 可以新增一个文件夹，选择我们要使用的如下图所示的这些图标，点击font class，可根据直接喜好选择，这边附上我的选择引入到我们的项目当中链接: //at.alicdn.com/t/font\_2100755\_gguxbeegnvg.css.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 5]

> 点击链接，复制其中的代码至styles中，新建文件iconfont.wxss，这样我们使用的外网上的，不使用本地的了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 6]

#### 综上导入完成，测试下是否能够使用 ####

> 1、打开page下文件，在app.wxss进行导入  
> 2、在index文件测试是否能够使用（这边测试的是支付图标，代码在iconfont.wxss中可以查看到对应的图标名称）

//1、导入
    @import "./styles/iconfont.wxss";

//2、测试
    <view>首页：
    <text class="iconfont iconzhifu:before"></text>
    </view>

如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 7]

### 4、搭建页面下端的tabar结构 ###

> 新增文件夹icon，放入我们要使用的图片  
> 链接: [底部图片的链接][Link 1].提取码：uicj

如图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 8]

> 在page下app.json文件中添加tabar，下图中列举了两个，首页和分类，如果List中只写一个的话是会报错的。

##### 如下图所示会显示对应的图标： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 9]  
写完剩下的两个，一共是4个，包括首页、分类、购物车和我的，List中的代码如下：

"list": [
          { 
            "pagePath": "pages/index/index",		//对应的页面
            "text": "首页",
            "iconPath": "icon/home.png",		//点击之前样式
            "selectedIconPath": "icon/home-o.png"		//点击之后样式
          },
          { 
            "pagePath": "pages/category/index",
            "text": "分类",
            "iconPath": "icon/category.png",
            "selectedIconPath": "icon/category-o.png"
          },
          { 
            "pagePath": "pages/cart/index",
            "text": "购物车",
            "iconPath": "icon/cart.png",
            "selectedIconPath": "icon/cart-o.png"
          },
          { 
            "pagePath": "pages/user/index",
            "text": "我的",
            "iconPath": "icon/my.png",
            "selectedIconPath": "icon/my-o.png"
          }
        ]

> 再细致修改下，tabar中的未选中以及选中和背景的颜色，代码如下所示：

"tabBar": { 
        "color": "#999",		//未选中时的颜色
        "selectedColor": "#ff2d4a",		//选中时候的颜色
        "backgroundColor": "#fafafa",		//背景色
        "position": "bottom",
        "borderStyle": "black",

#### 效果图，如下所示： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 10]

### 5、初始化页面样式 ###

> 顶部的导航栏颜色，以及字体颜色，在全局配置文件app.json中编写代码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 11]

> 对样式进行初始化，打开全部文件，app.wxss中添加如下代码

@import "./styles/iconfont.wxss";
    
    /*在微信小程序中不支持通配符  例如 ‘*’   */
    
    page,view,text,swiper,swiper-item,image{ 
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    /*主题颜色  通过变量来实现
    1 less 中 存在  变量这个知识
    2 原生的css和wxss也是支持 变量
    
    */
    page{ 
        /*定义主题的颜色*/
        --themeColor:#eb4450;
        /*定义统一的字体大小  假设设计稿  大小是  375px
        1px=2rpx
        */
        font: size 28rpx;
    }

# 仅供学习参考使用！！！ #

# 不足之处，请指出，蟹蟹！！！ #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/79dbcb3f67f44dba9fbbae8803d9cdd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/dc9f585241464742be47e8efa06d8502.png
[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/0bf8e740808b4294b7911130694f6dcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/9d412a3acdaa47a7924adbbfeb9be7d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/cdaaa68c9aa44687944bf8c43b1df3eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/ede83d26a1f64ceead87448a1b4d68b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/538fa7a00b47447a958db519576c6cf4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/48efca0986604fd2bceebe3079a5a2ae.png
[Link 1]: https://pan.baidu.com/s/1Das4_nzXJsWsGkirvpOJFQ
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/8c5f25d763634370938a4799042db8d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/96276abfbc8d42d69b67d8d845cccf43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/e768ccb7e0264b898530a16e5e00535d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqem91bmly_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/280c10a869a449cf83824692d252c95c.png