微信小程序开发-自定义TabBar-使用三方UI-vant weapp
1、参考文档vant waeapp UI库微信小程序开发文档-自定义TabBar2、
1、参考文档
vant waeapp UI库
微信小程序开发文档-自定义TabBar
2、
步骤一 通过 npm 安装
使用 npm 构建前,请先阅读微信官方的 npm 支持
# 通过 npm 安装
npm i @vant/weapp -S --production
# 通过 yarn 安装
yarn add @vant/weapp --production
# 安装 0.x 版本
npm i vant-weapp -S --production
步骤二 修改 app.json
将 app.json 中的 "style": "v2"
去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
步骤三 修改 project.config.json
开发者工具创建的项目,miniprogramRoot
默认为 miniprogram
,package.json
在其外部,npm 构建无法正常工作。
需要手动在 project.config.json
内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为'./'即可
步骤四 构建 npm 包
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。
步骤五 typescript 支持
如果你使用 typescript 开发小程序,还需要做如下操作,以获得顺畅的开发体验。
安装 miniprogram-api-typings
# 通过 npm 安装
npm i -D miniprogram-api-typings
# 通过 yarn 安装
yarn add -D miniprogram-api-typings
在 tsconfig.json 中增加如下配置,以防止 tsc 编译报错。
请将path/to/node_modules/@vant/weapp
修改为项目的 node_modules
中 @vant/weapp 所在的目录。
{
...
"compilerOptions": {
...
"baseUrl": ".",
"types": ["miniprogram-api-typings"],
"paths": {
"@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
},
"lib": ["ES6"]
}
}
ps:要是新建的目录没有package.json,就先运行一下npm innit
运行完成npm i vant-weapp -S --production 后会根目录生成
3、微信小程序开发工具构建npm
构建完成后
4、在页面直接引入就能使用了
ps:如果在根目录下面的引入,就是设置了全局的引入【需要什么就引入什么,看vantWeapp官方文档】
下面就是来完成自定义组件实现TabBar
1、根目录新建一个custom-tab-bar文件夹
2、创建page,生成自定义组件的页面
3、这个TabBar的 index.js 中添加代码
// index.js文件
Component({
data: {
active: 0,
list: [
{
"url": "/pages/home/index",
"icon": "wap-home-o",
"text": "首页"
},
{
"url": "/pages/mine/index",
"icon": "user-circle-o",
"text": "我的"
}
]
},
methods: {
onChange(e) {
console.log(e,'e')
this.setData({ active: e.detail });
wx.switchTab({
url: this.data.list[e.detail].url
});
},
init() {
const page = getCurrentPages().pop();
this.setData({
active: this.data.list.findIndex(item => item.url === `/${page.route}`)
});
}
}
});
4、在index.json中
{
"component": true,
"usingComponents":{
"van-tabbar": "/miniprogram_npm/@vant/weapp/tabbar/index",
"van-tabbar-item": "/miniprogram_npm/@vant/weapp/tabbar-item/index",
"van-icon": "/miniprogram_npm/@vant/weapp/icon/index"
}
}
5、在index.wxml中
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
item.text
}}</van-tabbar-item>
</van-tabbar>
-----------------------------在自定义tabBar中就是添加以上东西
--------------------下面这个代码是在展示的页面的每个
/**
* 生命周期函数--监听页面显示 在每个tabbar页面onshow 调用即可;
*/
onShow: function () {
console.log('个人中心')
this.getTabBar().init();
}
根目录下面的app.json
{
"pages": [
"pages/home/index",
"pages/mine/index",
"pages/console/index"
],
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/home/index"
},
{
"pagePath": "pages/console/index"
},
{
"pagePath": "pages/mine/index"
}
]
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "重庆顺邦广告",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"usingComponents": {
"van-tabbar": "/miniprogram_npm/@vant/weapp/tabbar/index",
"van-tabbar-item": "/miniprogram_npm/@vant/weapp/tabbar-item/index",
"van-button": "/miniprogram_npm/@vant/weapp/button/index"
}
}
更多推荐
所有评论(0)