【微信小程序】使用npm包

简介: 【微信小程序】使用npm包

1、小程序对npm的支持与限制


目前,小程序中已经支持使用npm安装第三方包,

从而来提高小程序的开发效率。但是,在小程序中使用 npm包有如下3个限制:

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


2、Vant Weapp


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

官方文档地址https://vant-contrib.gitee.io/vant-weapp/#/home


通过 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 默认为 miniprogrampackage.json 在其外部,npm 构建无法正常工作。


需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。


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


注意:

由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为’./'即可


构建 npm 包


打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件


3、使用


  • 💥引入组件


以 Button 组件为例,只需要在app.jsonindex.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例,如果你是通过下载源代码的方式使用 @vant/weapp,请将路径修改为项目中 @vant/weapp 所在的目录


// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}
// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}


引入组件后,可以在 wxml 中直接使用组件


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


4、定制全局主题样式


  • 自定义属性


自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用


由自定义属性标记设定值(比如: --main-color: black;)


由var() 的数束获取值(比如: color: var(--nain-color);)


比如,中main-text-color 此Peoffee更易理解,尤其是这个颜色们在其他上下文中也被使用到。自定义属性受级联的约束。并从其父级继承其值。


  • 基本用法


声明-个自定义属性。属性名需要以两个减号()开始,属性值则可以是任何有效的CSS值。和其他属性一样,自定义属性也是写在规则集之内的,如下:


element {
--main-bg-color: broun;
}


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


5、API Promise化


1、基于回调函数的异步API的缺点


默认情况下,小程序官方提供的异步API都是基于回调函数实现的,例如,网络请求的API需要按照如下的方

式调用:


wx.request({
  method:'',
  url:'',
  data:{},
  success:()=>{ },  //请求成功的回调函数
  fail:() => { }, //请求失败的回调函数
  complete:() =>{ } //请求完成的回调函数
})


2、什么是API Promise化


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


3、实现API Promise化


在小程序中,实现API Promise化主要依赖miniprogram-api-promise这个第三方的npm包。它的安装

npm install --save miniprogram-api-promise


import {promisifyAll} from 'miniprogram-api-promise'
const wxp=wx.p={}
promisifyAll(wx,wxp)


4、调用Promise化之后的异步API


  //定义对应的tap事件处理函数
  async getInfo(){
    const {data:res} =await wx.p.request({
      url: 'https://applet-base-api-t.itheima.net/api/get',
      data:{name:'zs',age:20}
    })
    console.log(res);
  },




目录
相关文章
|
1月前
|
前端开发 小程序 API
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
|
1月前
|
资源调度 小程序 前端开发
【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra
message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra
|
1月前
|
小程序 开发者
【微信小程序】-- 分包 - 独立分包 & 分包预下载(四十五)
【微信小程序】-- 分包 - 独立分包 & 分包预下载(四十五)
|
1月前
|
小程序
【微信小程序】-- 分包(四十四)
【微信小程序】-- 分包(四十四)
|
8天前
|
网络安全 计算机视觉
【node】 npm install 报错:code 128
【node】 npm install 报错:code 128
31 1
|
1月前
|
JavaScript 内存技术
node与npm版本对应关系以及使用nvm管理node版本
node与npm版本对应关系以及使用nvm管理node版本
126 0
|
4月前
|
Ubuntu
node、npm 命令升级
node、npm 命令升级
|
3月前
|
JavaScript
node.js 项目中执行 npm install 命令后看到的 idealTree inflate 的含义
node.js 项目中执行 npm install 命令后看到的 idealTree inflate 的含义
157 0
|
5月前
|
Windows
ts-node : 无法加载文件 C:\Users\Dell\AppData\Roaming\npm\ts-node.ps1,因为在此系统上禁止运行脚本。有关详细信息
ts-node : 无法加载文件 C:\Users\Dell\AppData\Roaming\npm\ts-node.ps1,因为在此系统上禁止运行脚本。有关详细信息

热门文章

最新文章

推荐镜像

更多