微信小程序-----基础加强(二)

最新推荐文章于 2024-12-01 22:05:47 发布

洛小yuan

最新推荐文章于 2024-12-01 22:05:47 发布

阅读量1.2k

点赞数 22

文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/2201_76041915/article/details/139003268

版权

能够知道如何安装和配置vant-weapp 组件库
能够知道如何使用MobX实现全局数据共享
能够知道如何对小程序的API 进行 Promise 化
能够知道如何实现自定义tabBar 的效果

一.使用 npm 包

小程序对 npm 的支持与限制

目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制：

① 不支持依赖于 Node.js 内置库的包
② 不支持依赖于浏览器内置对象的包
③ 不支持依赖于 C++ 插件的包

总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。

Vant Weapp

1. Vant Weapp

Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。它所使用的是

MIT 开源许可协议，对商业使用比较友好。

官方文档地址:https://youzan.github.io/vant-weapp

2. 安装 Vant 组件库

在小程序项目中，安装 Vant 组件库主要分为如下 3 步：

① 通过 npm 安装（建议指定版本为@1.3.3）
先创建npm包
安装vant
在此处可能会出现权限问题，用管理员身份打开终端进入到相应的文件夹中可以安装了
② 构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
构建完成之后，要在本地设置中点击使用npm模块
③ 修改 app.json

详细的操作步骤，大家可以参考 Vant 官方提供的快速上手教程：

https://youzan.github.io/vant-weapp/#/quickstart#an-zhuang

3. 使用 Vant 组件

安装完 Vant 组件库之后，可以在 app.json 的 usingComponents 节点中引入需要的组件，即可在 wxml 中直接使用组件。示例代码如下：

app.json
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  } 

home.wxml
<van-button type="primary">主要按钮</van-button>

如果报错显示找不到vant组件，可以重新下载一下

4. 定制全局主题样式

Vant Weapp 使用 CSS 变量来实现定制主题。关于 CSS 变量的基本用法，请参考 MDN 文档：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解，尤其是这个颜色值在其他上下文中也被使用到。自定义属性受级联的约束，并从其父级继承其值。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./01.css" />
    <style>
      html {
        /* 定义CSS变量 */
        --main-color: #C00000;
      }

      .box1, .box2 {
        /* background-color: #C00000; */
        background-color: var(--main-color);
      }

      .box3 {
        /* color: #C00000; */
        color: var(--main-color);
      }
    </style>
  <body>
    <div class="container1">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>

    <div class="container2">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>
  </body>
</html>

css

body {
  display: flex;
}
.container1,
.container2 {
  flex: 1;
}
div {
  line-height: 120px;
  border: 1px solid #ccc;
  margin: 20px;
  text-align: center;
  border-radius: 4px;
}

5. 定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效：

page{
  /* 定制警告按钮的背景颜色和边框颜色 */
  --button-danger-background-color: #C00000;
  --button-d

最低0.47元/天解锁文章