微信小程序开发（一）

发表于 | 更新于 | 分类于 |

因为自学的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"      //当前页面导航栏颜色
}