微信小程序-使用npm包

小程序对 npm 的支持与限制

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

①不支持依赖于Node.js内置库的包

②不支持依赖于浏览器内置对象的包

③不支持依赖 C++插件的包

Vant-Weapp

Vant Weapp 是有赞前端团队开源的一套小程序 UI组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业比较友好。

官方文档 ：  介绍 - Vant Weapp (youzan.github.io)

安装 Vant 组件库

在小程序项目中，安装Vant组件库步骤：

①通过 npm 安装（建议指定版本为@1.3.3）

②构建npm 包

③修改 app.json

npm 支持 | 微信开放文档 (qq.com)

具体安装步骤：

①安装node.js ，并配置环境变量

②打开微信小程序开发工具，右键空白区域

点击 在外部终端窗口中打开，

在弹出窗口输入 ：npm init -y ,初始化 package.json命令

③在输入  npm i @vant/weapp@1.3.3 -S --production

④打开 开发工具

工具 -> 构建npm -> 点击 详情 ->本地设置->勾选使用npm 模块

⑤修改app.json 中的 去除  "style": "v2"

使用 Vant 组件：

官方文档 ：  介绍 - Vant Weapp (youzan.github.io)

使用npm 包 -Vant Weapp:

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

使用 CSS 自定义属性（变量） - CSS：层叠样式表 | MDN

定制全局主题样式

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

page {

  --button-danger-background-color:#C00000;

  --button-danger-bolder-color:#D60000;

}

参考配置文件：

Vant Weapp - 轻量、可靠的小程序 UI 组件库

使用 npm 包 - API Promise化

API Promise 化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API ，从而提高代码的可读性、维护性、避免回调地狱的问题

miniprogram-api-promise第三方包安装

①输入命令 npm i --save miniprogram-api-promise

②删除开发工具下的 miniprogram_npm 文件夹( 找到硬盘目录，在删除)，

③打开 开发工具

工具 -> 构建npm

App.js 文件中写

import { promisifyAll } from 'miniprogram-api-promise'

const wxp = wx.p = {}

promisifyAll(wx,wxp)

如何调用：

  async getInfo(){

      const {data:res} = await wx.p.request({

        url: 'https://www.escook.cn/api/get',

        method:'GET',

        data:{

            name:'zs',

            age:20

        }

      })

      console.log(res)

    }