1.1:创建项⽬
在微信开发者⼯具的开始界⾯左侧检查项⽬类型,需要为 [⼩程序]。
然后在右侧点击 [+] 开始新建项⽬。
最后在弹出的界⾯中输⼊项⽬相关的信息,点击确定即可
![](https://i-blog.csdnimg.cn/blog_migrate/9e1b8c1607a4279262927f56b502fe77.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1c7662830694b3124fec4c31a0f180d2.png)
创建完毕后:
![](https://i-blog.csdnimg.cn/blog_migrate/a092586e42c669d48d208a5f767e3936.png)
2:项⽬初始化
- 重置 app.js 中的代码。
![](https://i-blog.csdnimg.cn/blog_migrate/59422a5cab22972fb46f2a0c70ad343e.png)
- 删除 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 ⽬录下
- 自定义构建
"miniprogramRoot": "miniprogram/"
- 然后配置 project.config.json 的 setting.packNpmManually 为 true。
"setting": {
"packNpmManually":true,
...
},
- 初始化项目
- 输入以下代码
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 构建成功。
npm i @vant/weapp
- “⼯具”-“构建npm”。
- 集成 Sass
- 在 project.config.json ⽂件中,修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ,即可开启⼯具内置的 sass 编译插件。
- 构建项目界面
- 更改wxss后缀名为sass
2.构建项目界面
assets⽂件导⼊和配置app.json⽂件
{
"pages": [
"pages/category/category",
"pages/index/index",
"pages/cart/cart",
"pages/my/my"
],
"window": {
"navigationBarTitleText": "慕尚花坊",
"navigationBarBackgroundColor": "#f3514f",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#252933",
"selectedColor": "#FF734C",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "assets/tabbar/index.png",
"selectedIconPath": "assets/tabbar/index-active.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "assets/tabbar/cate.png",
"selectedIconPath": "assets/tabbar/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "assets/tabbar/cart.png",
"selectedIconPath": "assets/tabbar/cart-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "assets/tabbar/my.png",
"selectedIconPath": "assets/tabbar/my-active.png"
}
]
},
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents",
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
首页结构
<!-- index.wxml -->
<view class="index-container">
<!-- 首页背景图 -->
<view class="window-bgc"></view>
<!-- 页面主体区域 -->
<view class="container">
<!-- 轮播图区域 -->
<banner />
<!-- 导航栏区域 -->
<entrance />
<!-- 广告区域 -->
<view class="adver">
<view class="adver-left">
<navigator url="">
<image src="../../assets/images/love.jpg" mode="widthFix" />
</navigator>
</view>
<view class="adver-right">
<navigator url="">
<image src="../../assets/images/elder.jpg" mode="widthFix" />
</navigator>
<view>
<navigator url="">
<image src="../../assets/images/friend.jpg" mode="widthFix" />
</navigator>
</view>
</view>
</view>
<!-- 列表区域 -->
<goods-list/>
</view>
</view>
首页背景
.index-container {
// 首页背景图
.window-bgc {
height: 200rpx;
position: absolute;
width: 100%;
background-color: #f3514f;
border-radius: 0rpx 0rpx 25% 25%;
}
.adver {
display: flex;
width: 96%;
margin: 0 auto;
border-radius: 18rpx;
background-color: white;
.adver-left {
width: 50%;
// 上 右 下 左
padding: 8rpx 8rpx 0rpx 8rpx;
}
.adver-right {
width: 50%;
padding: 8rpx 8rpx 0rpx 8rpx;
// 选中第二张图片
view:last-child{
padding-top: 6rpx;
}
}
image {
width: 100%;
}
}
}
构建banner组件结构
在banner.json界面
{
"component": true,
"usingComponents": {}
}
轮播图界面
//banner.wxml
<view class="swiper-box">
<swiper autoplay class="swiper" indicator-active-color="#FF734C"
interval="2000" duration="1000" indicator-color="rgba(0,0,0,.3)">
<block wx:for="{{ bannerList }}" wx:key="index">
<swiper-item class="swiper-item">
<image class="img" src="{{ item }}" mode="" />
</swiper-item>
</block>
</swiper>
<view class="indicator">
<text
wx:for="{{bannerList.length}}"
wx:key="id"
class="rectangle"></text>
</view>
</view>
//banner.scss
.swiper-box {
position: relative;
.swiper {
height: 320rpx;
// 设置圆角弧度
border-radius: 18rpx;
// 设置溢出隐藏
overflow: hidden;
width: 95%;
// 设置外边距
margin: 0 auto ;
}
.swiper-item {
.img {
width: 100%;
height: 100%;
border-radius: 18rpx;
}
}
.indicator {
display: flex;
justify-content: center;
position: absolute;
bottom: 16rpx;
left: 0;
right: 0;
.rectangle {
width: 30rpx;
height: 6rpx;
background-color: #f3514f;
margin: 0 8rpx;
border-radius: 6rpx;
}
}
}
banner.js
Component({
properties:{
bannerList:{
type:Array,
value:[
'../../../assets/banner/banner-1.jpg',
'../../../assets/banner/banner-2.jpg',
'../../../assets/banner/banner-3.jpg'
]
}
}
})
商品列表组件
![](https://i-blog.csdnimg.cn/blog_migrate/a23abad23d6ee2f3191df7c7ddae92e3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/f8e66ec7fbc185b3685c457291b9495b.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a06292b220b163c13a89d2446b23231a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5418d2e95f524e971563604110ea9f1e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/26bdbd250d8cb40dce80a71d9ad6194a.png)