慕尚花坊小程序笔记

初始化项目：在project.config.json中的终端中npm init -y

、

最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和

miniprogramNpmDistDir 的位置。

1 "setting" : {

2 "packNpmManually" : true ,

3 "packNpmRelationList" : [

4 {

5 "packageJsonPath" : "./package.json" ,

6 "miniprogramNpmDistDir" : "./miniprogram"

7 }

8 ],

9 },

10

11 // packageJsonPath 表示 node_modules 源对应的 package.json

12 // miniprogramNpmDistDir 表示 node_modules 的构建结果⽬标位置

安装vant，然后进行npm构建，测试是否能够正常vant建立成功

1 npm i @vant/weapp

集成 Sass

在 project.config.json ⽂件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ，即可开 启⼯具内置的 sass 编译插件

1 "setting" : {

2 "packNpmManually" : true ,

3 "packNpmRelationList" : [

4 {

5 "packageJsonPath" : "./package.json" ,

6 "miniprogramNpmDistDir" : "./miniprogram"

7 }

8 ],

9 "useCompilerPlugins" : [

10 "sass"

11 ],

12 ...

13 },

配置json文件

1 // app.json

2

3 {

4 "pages": [

5 "pages/index/index",

6 "pages/category/category",

7 "pages/cart/cart",

8 "pages/my/my" 9 ],

10 "window": {

11 "backgroundTextStyle": "light",

12 "navigationBarBackgroundColor": "#f3514f",

13 "navigationBarTitleText": " 慕尚花坊 ",

14 "navigationBarTextStyle": "white"

15 },

16 "tabBar": {

17 "color": "#252933",

18 "selectedColor": "#FF734C",

19 "backgroundColor": "#ffffff",

20 "borderStyle": "black",

21 "list": [

22 {

23 "pagePath": "pages/index/index",

24 "text": " ⾸⻚ ",

25 "iconPath": "assets/tabbar/index.png",

26 "selectedIconPath": "assets/tabbar/index-active.png"

27 },

28 {

29 "pagePath": "pages/category/category",

30 "text": " 分类 ",

31 "iconPath": "assets/tabbar/cate.png",

32 "selectedIconPath": "assets/tabbar/cate-active.png"

33 },

34 {

35 "pagePath": "pages/cart/cart",

36 "text": " 购物⻋ ",

37 "iconPath": "assets/tabbar/cart.png",

38 "selectedIconPath": "assets/tabbar/cart-active.png"

39 },

40 {

41 "pagePath": "pages/my/my",

42 "text": " 我的 ",

43 "iconPath": "assets/tabbar/my.png",

44 "selectedIconPath": "assets/tabbar/my-active.png"

45 }

46 ]

47 },

48 }

首页结构

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 >

首页背景图

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 }

轮播图组件

1 <!--pages/index/banner/banner.wxml-->

2 <!-- 轮播图 -->

3 < view class =" swiper-box ">

4 < swiper autoplay class =" swiper " indicator-active-color =" #FF734C "

interval =" 2000 " duration =" 1000 " indicator-color =" rgba(0, 0, 0, .3) ">

5 < block wx: for =" {{ bannerList }} " wx: key =" index "> 6 < swiper-item class =" swiper-item ">

7 < image class =" img " src =" {{ item }} "></ image >

8 </ swiper-item >

9 </ block >

10 </ swiper >

11

12 <!-- 轮播图的⾯板指示点 -->

13 < view class =" indicator ">

14 < text wx: for =" {{bannerList.length}} " wx: key =" id "

15 class =" rectangle "></ text >

16 </ view >

17 </ view >

1 /* pages/index/banner/banner.wxss */

2

3 /* 轮播图 */

4 .swiper-box {

5 position : relative ;

6

7 .swiper {

8 height : 320rpx ;

9 }

10

11 .swiper-item {

12 display : flex ;

13 justify-content : center ;

14 align-items : center ;

15

16 .img {

17 height : 96% ;

18 width : 96% ;

19 border-radius : 16rpx ;

20 }

21 }

22

23 .indicator {

24 display : flex ;

25 justify-content : center ; 26 position : absolute ;

27 bottom : 16rpx ;

28 left : 0 ;

29 right : 0 ;

30

31 // ⾯板指示器

32 .rectangle {

33 width : 40rpx ;

34 height : 6rpx ;

35 margin : 0 8rpx ;

36 border-radius : 6rpx ;

37 background-color : #f3514f ;

38 }

39 }

40 }