微信小程序开发(一)

因为自学的javascript,手上没有什么好上手的项目在慕课网看见了微信小程序,上手看一看。

微信小程序基本构架

新建微信小程序时候会出现app.js、app.json、app.wxss、pages文件。(其中微信会有自己的API可引用)

pages

用来储存开发的页面,一般由wxml、wxss、js、json组成。(同目录下无需引用,自动生效)
wxml用来储存当前页面结构,wxss用来储存当前页面样式,js用来储存当前页面脚本,json用于设置当前页面状态栏、导航条、标题、窗口背景色。

app.wxss

定义全局样式。如:文字样式,背景颜色等。

app.js

本人一般用来储存全局变量的脚本和初始化各种数据。

app.json

对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间等。

登录页面

Login

CODE

app.js

1
2
3
4
5
6
7
8
App({
//全局定义数据。音乐播放,音乐播放页面id,豆瓣api。
globalData:{
g_isPlayingMusic:false,
g_currentMusicHomeId:null,
doubanBase:"https://api.douban.com",
},
}) //必须定义,空的都可以不然报错。

app.json

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
{
//注册所有目录
"pages": [
"pages/welcome/welcome",
"pages/home/home",
"pages/home/home-detail/home-detail",
"pages/movies/movies",
"pages/movies/more-movie/more-movie",
"pages/movies/movie-detail/movie-detail"

],
"window": {
"navigationBarBackgroundColor": "#405f80"
},
//定义导航栏
"tabBar": {
"borderStyle":"white",
"list": [
{
"pagePath": "pages/home/home",
"text": "文章",
"iconPath": "/image/tab/yuedu.png",
"selectedIconPath": "/image/tab/yuedu_hl.png"
},
{
"pagePath": "pages/movies/movies",
"text": "电影",
"iconPath": "/image/tab/dianying.png",
"selectedIconPath": "/image/tab/dianying_hl.png"
}
]
}
}

app.wxss

1
2
3
4
5
//定义一个全局字体
text{
font-family: MicroSoft YaHei;
font-size: 24rpx;
}

pages/welcome/welcome.wxml

冒泡事件

bind事件绑定不会阻止冒泡事件向上冒泡
catch事件绑定可以阻止冒泡事件向上冒泡。
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

1
2
3
4
5
6
7
8
<view  class="container">
<image class="user-avatar" src="/image/touxiang.jpg"></image>
<text class="user-name"> Hello,特别的人</text>
<view class="moto-container" bindtap="onTap">
//bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数onTap。
<text class="moto">开启小程序之旅</text>
</view>
</view>

pages/welcome/welcome.wxss

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
page{
height: 100%;
background:#b3d4db;
}

.container{
display: flex; //弹性盒子布局
flex-direction: column; //微信组件纵向排列
align-items: center; //并居中
}

.user-avatar{
height:200rpx ;
width:200rpx ;
margin-top:120rpx;
border-radius: 200rpx;
}

.user-name{
margin-top: 20rpx;
font-size: 32rpx;
font-weight: bold;
}
.moto-container{
margin-top: 300rpx;
border: 1px solid #405f80;
width: 200rpx;
height: 80rpx;
border-radius: 5px;
text-align: center;
}
.moto{
font-size: 22rpx;
font-weight: bold;
line-height: 80rpx;
color: #405f80;
}

pages/welcome/welcome.js

1
2
3
4
5
6
7
8
Page({
//点击跳转函数
onTap:function(){
wx.switchTab({
url: '../home/home',
})
}
})

pages/welcome/welcome.json

1
2
3
{
"navigationBarBackgroundColor": "#b3d4db" //当前页面导航栏颜色
}
坚持原创技术分享,您的支持将鼓励我继续创作!