小程序day03

小程序相关

一、vant weapp的引入

vant weapp-小程序vant版文档：https://vant-contrib.gitee.io/vant-weapp/#/home

1、打开调试器终端，安装vant weapp：

npm init -y

# 通过 npm 安装 
npm i @vant/weapp -S --production  

# 或者 通过 yarn 安装
yarn add @vant/weapp --production

2、将 app.json 中的 "style": "v2" 删除

小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

3、修改 project.config.json

把packNpmManually的值改成 "packNpmManually": true,

把 packNpmRelationList ，添加两个项

"packNpmManually": true,
"packNpmRelationList": [{
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "./"
}],

4、构建npm包

打开微信开发者工具，点击 工具 -> 构建 npm，

点击右侧详情--> 本地设置 --> 并勾选 使用 npm 模块 选项， (新版没有这个选项了,不用选择)

构建完成后，即可引入组件。

引入组件 , 经常引入成功 , 但是不出来  -------- 先重启 再排错

5、测试使用vant内置的组件

app.json中：

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

在home组件中直接接着使用：

<van-button type="primary">按钮</van-button>

二、基础库设置和默认清除

右上角详情>本地设置>基础库选择 2.18.0

app.js中删除onLaunch方法

pages下删除logs页面

三、自定义tabBar

3.1、添加自定义配置项

app.json中配置默认tabbar：

"tabBar": {
    "color":"#666",
    "selectedColor": "#8B0000",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页"
    }, {
      "pagePath": "pages/topic/topic",
      "text": "专题"
    }, {
      "pagePath": "pages/category/category",
      "text": "分类"
    }, {
      "pagePath": "pages/cart/cart",
      "text": "购物车"
    }, {
      "pagePath": "pages/user/user",
      "text": "用户"
    }]
},

想要配置自定义tabbar，tabBar中需要添加属性

"custom": true,

且在项目中需要配置路径(官方要求，不能改变)

"custom-tab-bar/index"
文件夹名/组件名

3.2、配合UI组件库

文档：https://vant-contrib.gitee.io/vant-weapp/#/tabbar

在custom-tab-bar/index.json中：

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

在custom-tab-bar/index.wxml中：

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

保存编译就可以看到效果了。

3.3、自定义tabbar配合UI组件库的基本配置

此时上面代码需要遍历出来，所以，在custom-tab-bar/index.js中准备好数据：

Component({
  data:{
    tabbarArr:[{
      "pagePath": "/pages/home/home",
      "text": "首页",
      "icon":"home-o"
    },{
      "pagePath": "/pages/topic/topic",
      "text": "专题",
      "icon":"user-o"
    }]，
    // 当前项
    active: 0,
  }，
  methods:{
    onChange(event) {
    console.log(event.detail);
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
    },
  }
})

在custom-tab-bar/index.wxml中：

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="{{item.icon}}" wx:for="{{tabbarArr}}" wx:key="index">{{item.text}}</van-tabbar-item>
</van-tabbar>

3.4、改成我们自己的内容

先把custom-tab-bar/index.js中的tabbarArr数组填写完整：

[{
    pagePath: "/pages/home/home",
    text: "首页",
    icon: 'home-o'
}, {
    pagePath: "/pages/topic/topic",
    text: "专题",
    icon: 'label-o'
}, {
    pagePath: "/pages/category/category",
    text: "分类",
    icon: 'apps-o'
}, {
    pagePath: "/pages/cart/cart",
    text: "购物车",
    icon: 'cart-o'
}, {
    pagePath: "/pages/user/user",
    text: "用户",
    icon: 'user-o'
}],

custom-tab-bar/index.wxml中补充颜色：

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#8B0000"
  inactive-color="#666">
  <van-tabbar-item icon="{{item.icon}}" wx:for="{{tabbarArr}}" wx:key="index">{{item.text}}</van-tabbar-item>
</van-tabbar>

回到custom-tab-bar/index.js中，书写切换tab栏的格式：

methods:{
    onChange(event) {
      console.log(event.detail);
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });

      // 切换tabbar
      wx.switchTab({
        url: this.data.tabbarArr[event.detail].pagePath,
      })
    },
}

但目前只能切换，当前样式还是有问题(active被重置了)，需要在进入到这个页面的时候修改这个active的值为对应的索引值

onShow: function () {
    this.getTabBar().setData({
        active:0
    })
},

四、微信开发者中配置Less

小程序 本身就是不能解析Less , 小程序 把 Less 运行的时候 自动转成 wxss文件

4.1、安装和启动扩展

VScode中配置安装 Easy LESS扩展：

来到微信开发者工具，打开扩展文件夹：

把vscode中刚才安装的扩展复制进来

重新打开扩展设置就有了

4.2、配置less

此时还需要配置less，编译成.wxss的后缀，才能使用：

！！！！！！！先重启微信开发者工具（因为刚刚添加了新扩展，需要初始化）

然后：

搜索：easy-less

点进去添加outExt配置项：

    "less.compile": {
        "outExt":".wxss"
    }

4.3、书写less

在home目录下新建home.less，书写less语法，保存编译进行测试即可。