微信小程序 Day5 笔记
今天我们继续学习微信小程序的开发。我们将重点讨论以下几个方面：
1. Vant Weapp 的使用2. Mbox 共享数据的使用3. 分包4. 自定义 Tabbar 一、Vant Weapp 的使用Vant 是一个基于 Vue.js 的移动端 UI 组件库。我们可以在微信小程序中使用 Vant 来快速构建高质量的 UI。
1. 安装 Vant首先，我们需要安装 Vant。我们可以通过 npm 或 yarn 来安装：
```bashnpm install vant-weapp --save```
或者：
```bashyarn add vant-weapp```
2. 导入 Vant 组件在我们的小程序中，我们需要导入 Vant 的组件。我们可以在 `app.json` 文件中添加以下代码：
```json{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "",
"onLoad": function(options) {
console.log('App Load')
},
"formatTime": function(d) {
return d }
},
"usingComponents": [
"van-button"
]
}
```
3. 使用 Vant 组件现在，我们可以在我们的小程序中使用 Vant 的组件。例如，我们可以使用 `van-button` 组件来创建一个按钮：
```html
```
二、Mbox 共享数据的使用Mbox 是微信小程序提供的一个共享数据功能。我们可以通过 Mbox 来共享数据之间的关系。
1. 使用 Mbox首先，我们需要在 `app.json` 文件中添加以下代码：
```json{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "",
"onLoad": function(options) {
console.log('App Load')
},
"formatTime": function(d) {
return d }
},
"usingComponents": [
"mbox"
]
}
```
2. 使用 Mbox 共享数据现在，我们可以在我们的小程序中使用 Mbox 来共享数据。例如，我们可以通过 `mbox.set` 方法来设置一个共享数据：
```javascriptPage({
data: {},
onLoad: function(options) {
wx.setStorageSync('key', 'value');
}
})
```
我们也可以通过 `mbox.get` 方法来获取一个共享数据：
```javascriptPage({
data: {},
onLoad: function(options) {
var value = wx.getStorageSync('key');
console.log(value);
}
})
```
三、分包分包是微信小程序提供的一个功能。我们可以通过分包来将我们的小程序分成多个包，提高性能和减少流量。
1. 使用分包首先，我们需要在 `app.json` 文件中添加以下代码：
```json{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "",
"onLoad": function(options) {
console.log('App Load')
},
"formatTime": function(d) {
return d }
},
"packageA": {
"pages": [
"pages/index/index"
]
},
"packageB": {
"pages": [
"pages/logs/logs"
]
}
}
```
2. 使用分包现在，我们可以在我们的小程序中使用分包。例如，我们可以通过 `wx.getPackage` 方法来获取一个包：
```javascriptPage({
data: {},
onLoad: function(options) {
var packageA = wx.getPackage('packageA');
console.log(packageA);
}
})
```
四、自定义 Tabbar自定义 Tabbar 是微信小程序提供的一个功能。我们可以通过自定义 Tabbar 来改变 Tabbar 的样式和行为。
1. 使用自定义 Tabbar首先，我们需要在 `app.json` 文件中添加以下代码：
```json{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "fff",
"navigationBarTitleText": "",
"onLoad": function(options) {
console.log('App Load')
},
"formatTime": function(d) {
return d }
},
"tabBar": {
"list": [
{
"text": "首页",
"pagePath": "pages/index/index"
},
{
"text": "日志",
"pagePath": "pages/logs/logs"
}
]
}
}
```
2. 使用自定义 Tabbar现在，我们可以在我们的小程序中使用自定义 Tabbar。例如，我们可以通过 `wx.setTabBarBadge` 方法来设置一个 Tabbar 的徽标：
```javascriptPage({
data: {},
onLoad: function(options) {
wx.setTabBarBadge(0, '1');
}
})
```
我们也可以通过 `wx.clearTabBarBadge` 方法来清除一个 Tabbar 的徽标：
```javascriptPage({
data: {},
onLoad: function(options) {
wx.clearTabBarBadge(0);
}
})
```
以上就是今天的内容。希望你能够掌握这些知识，并在实际开发中应用它们。
