微信小程序笔记

1.创建项目

在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。

然后在右侧点击 [+] 开始新建项⽬。

最后在弹出的界⾯中输⼊项⽬相关的信息，点击确定即可。

1.1项目初始化 

重置 app.js 中的代码

 

 

 删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。

 

重置 app.wxss 中的代码。

删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。

删除 components 中的⾃定义组件。

重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。

更新 utils 下 util.js 的⽂件名为 formatTime.js

1.2 ⾃定义构建 npm + 集成Sass

随着项⽬的功能越来越多、项⽬越来越复杂，⽂件⽬录也变的很繁琐，为了⽅便进⾏项⽬的开发，开发 ⼈员通常会对⽬录结构进⾏调整优化，在慕尚花坊项⽬中， 我们就需要将⼩程序源码放到

miniprogram ⽬录下 。

2.首页 

2.1首页结构

1.<!--index.wxml-->
2 <view class="index-container">
3
4 <!-- ⾸⻚背景图 -->
5 <view class="window-bgc"></view>
6
7 <!-- ⻚⾯主体区域 -->
8 <view class="container">
9
10 <!-- 轮播图区域 -->
11
12 <!-- 导航区域 -->
13
14 <!-- ⼴告区域 -->
15 <view class="adver">
16 <view class="adver-left"></view>
17 <view class="adver-right"></view>
18 </view>
19
20 <!-- 商品列表 -->
21
22 </view>
23
24 </view>

2.2首页背景图 

1 /**index.wxss**/
2 .index-container {
3
4 // ⾸⻚背景图
5 .window-bgc {
6   height: 200rpx;
7   width: 100%;
8   background-color: #f3514f;
9   border-radius:0 0 50% 50%;
10 }
11 } 

3banner组件 

创建banner组件