微信小程序项目实战(一)
前言
若文章有误，欢迎读者留言反馈💻Installation1
git clone https://github.com/coding327/mymovies.git
创建项目
- 项目名称要和存放项目目录名称一致，如项目名称
myapp，目录名称也应为myapp AppID，这个自己提前准备好- 开发模式选择小程序
- 后端服务不使用云服务
- 语言
javascript
项目初始化【清0操作】
找到
app.js，只保留如下代码【把配置项置空===空对象】1
2
3// app.js
App({
})进入
app.wxss，里面代码全部清除删除
utils整个目录删除
pagindex/index目录- 对应
app.json文件里的pages下的index/index/logs"也要删除
- 对应
下面这步可以选择把index整个目录都删除掉，也可以像下面这样一个一个清除
以简单方案为主：
- 删除
pages目录下的整个index目录
- 对应
app.json文件里的pages下的"pages/index/index"也要删除
不嫌麻烦可以按照如下方法清除index目录下的文件
进入
pages/index/index.js文件中，只保留如下代码【把配置项置空===空对象】1
2
3
4
5
6// index.js
// 获取应用实例
const app = getApp()
Page({
})进入
pages/index/index.wxml文件中，清除全部结构代码进入
pages/index/index.wxss文件中，清除全部样式代码
静态资源准备
- 项目所需图片及图标
imgs直接放到项目根目录下即可
tab栏先做出来
新建
home页面，在pages目录下新建文件夹名称自己定一般为home即首页- 接着在
home目录下右键选择新建Page，也为home
- 接着在
新建
about页面，在pages目录下新建文件夹名称为about- 接着在
about目录下右键选择新建Page，也为about
- 接着在
配置页面，进入
app.json文件中，找到pages配置如下【目前只要新建页面都会自动帮我们配好，如果没配我们就自己手动配置，但是删除页面不会自动帮我们清除】1
2
3
4"pages": [
"pages/home/home",
"pages/about/about"
],依旧是在
app.json文件中，window配置项后面换行输入tab会有提示tabBar,回车即可，记得最后面加上逗号
参数解读：pagePath：页面路径【不要以/开头，直接从pages目录下写即可】text：页面的名称【图标下方文本】iconPath：图标路径【默认不选中的图标】selectedIconPath：图标路径【选中以后的图标】
完整代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/imgs/film-close.png",
"selectedIconPath": "/imgs/film-open.png"
},
{
"pagePath": "pages/about/about",
"text": "关于",
"iconPath": "/imgs/me-close.png",
"selectedIconPath": "/imgs/me-open.png"
}
]
},
修改顶部导航栏相关样式
在app.json文件中，有如下代码：1
2
3
4
5
6"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
代码解读：backgroundTextStyle：窗口背景色，这个一般不需要动navigationBarBackgroundColor：导航栏背景颜色navigationBarTitleText：导航栏文本navigationBarTextStyle：导航栏文本颜色
修改后：1
2
3
4
5
6"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#42bd56",
"navigationBarTitleText": "movie",
"navigationBarTextStyle": "white"
},
首页绘制
- 清除
pages/home/home.wxml中的代码 - 根据设计图绘制页面（可以发现整个背景都是灰色，给容器即
page添加灰色背景）
进入app.wxss给page添加灰色即可在我们微信小程序里面不是1
2
3page {
background-color: #efefef;
}view就是text然后就是组件
进入home.wxml书写我们页面结构1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22<view class="film">
<view class="film-type">
<!-- 分类标题 start -->
<view class="type-title">
<text>影院热映</text>
<navigator>更多 ></navigator>
</view>
<!-- 分类标题 end -->
<!-- 电影列表 start -->
<view class="film-list">
<view class="film-item" wx:for="{{ 6 }}" wx:key="index">
<image class="film-img" src="/imgs/film.jpg"></image>
<view class="film-name">美丽人生</view>
<view class="film-star">
<image class="star-img" src="/imgs/star-open.png" wx:for="{{ 5 }}" wx:key="index"></image>
<text class="film-source">9.5</text>
</view>
</view>
</view>
<!-- 电影列表 end -->
</view>
</view>
进入home.wxss书写样式[这里只写部分影院热映样式，具体看项目里的home.wxss]
单位1rpx=0.5px=1物理像素1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63/* pages/home/home.wxss */
.film {
width: 100%;
}
.film-type {
background-color: white;
margin-bottom: 20rpx;
}
/* 分类标题 */
.type-title {
padding: 26rpx 0;
font-size: 28rpx;
font-weight: bold;
color: #333;
}
.type-title text{
border-left: 6rpx solid #42bd56;
padding-left: 26rpx;
}
.type-title navigator {
float: right;
color: #42bd56;
padding-right: 16rpx;
}
/* 电影列表 */
.film-list {
width: 100%;
white-space: nowrap;
}
.film-item {
display: inline-block;
width: 200rpx;
padding: 0 12rpx;
}
.film-img {
width: 100%;
height: 280rpx;
}
.film-name {
font-size: 22rpx;
font-weight: bold;
color: #333;
/* 对于较长的电影名称进行处理 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.film-star {
width: 100%;
}
.film-star .star-img {
width: 20rpx;
height: 20rpx;
}
.film-star .film-source {
font-size: 20rpx;
color: #999;
padding-left: 8rpx;
}
横向滚动实现
可以使用微信小程序里提供的
scroll-view组件，并指定scroll-x横向滚动
1 | <!-- 电影列表 start --> |
接着把类别循环下即可，这样基于三个了
1 | <view class="film"> |
绘制分类页
在
pages目录下创建一个文件夹叫list，再新建个Page也叫list
为了方便观察页面，我们可以去app.json文件里有个pages，把list路径提到最前面
2
3
4
5
"pages/list/list",
"pages/home/home",
"pages/about/about"
],
进入list.wxml书写分类页结构，发现每一项电影和之前首页一样抽离成组件
组件抽离
在项目根目录创建一个components文件夹用来放复用组件，在components目录下再新建一个文件夹名称为film-item对应该组件功能，方便管理，接着鼠标右键新建Component名称也是film-item，把首页可以抽离代码剪切拿过来，注意把循环去掉，在使用时循环组件即可1
2
3
4
5
6
7
8
9<!--components/film-item/film-item.wxml-->
<view>
<image class="film-img" src="/imgs/film.jpg"></image>
<view class="film-name">美丽人生</view>
<view class="film-star">
<image class="star-img" src="/imgs/star-open.png" wx:for="{{ 5 }}" wx:key="index"></image>
<text class="film-source">9.5</text>
</view>
</view>
组件样式
样式也需要拿过来，最外面item这一层样式不拿过来[最外层view最好不加样式]，使用时我们自己去调更适合于不同页面1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26/* components/film-item/film-item.wxss */
.film-img {
width: 100%;
height: 280rpx;
}
.film-name {
font-size: 22rpx;
font-weight: bold;
color: #333;
/* 对于较长的电影名称进行处理 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.film-star {
width: 100%;
}
.film-star .star-img {
width: 20rpx;
height: 20rpx;
}
.film-star .film-source {
font-size: 20rpx;
color: #999;
padding-left: 8rpx;
}
组件注册
项目中多个页面都会使用到该组件把它做一个全局引用（全局注册）
进入app.json，在组后面接着添加属性usingComponents，组件名称我们也叫film-item，配组件路径以/起始1
2
3"usingComponents": {
"film-item": "/components/film-item/film-item"
}
组件调用
进入home.wxml，传入样式[下面是基本组件调用]1
<组件名称 class="class1"></组件名称>
具体代码：1
2<!-- 组件调用 -->
<film-item class="film-item" wx:for="{{ 6 }}" wx:key="index"></film-item>
回到app.json把pages中的首页提前看一下页面是否可以
基本上是可以的，首页没什么问题，再到app.json里把分类页切换回来
分类页中调用组件
1 | <film-item class="film-item" wx:for="{{ 12 }}" wx:key="index"></film-item> |
书写样式
1 | /* pages/list/list.wxss */ |
note: 首页和分类页共用film-item组件，但是它们的样式是不一样的，所以在封装组件时不要把样式固定死了，调用时根据不同页面去加样式
微信
支付宝
