小程序使用Vant组件库及小程序API的Promise化

一、npm的使用

        1.介绍

目前，小程序中已经支持使用  npm 安装第三方包，从而来提高小程序的开发效率

        2.小程序对npm限制

1.不支持依赖于Node.js内置库的包
  不支持依赖于 Node 核心模块的包
  fs Node 文件系统模块 -- 不支持
  path Node 路径模块 -- 不支持
2.不支持依赖于浏览器内置对象的包
  小程序的宿主环境是微信，不存在 DOM 和 BOM
  所以依赖于内置对象的包，也不能够使用
3.不支持依赖于 C++ 插件的包

二、vant组件库的使用

        1.介绍

1.vant是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 5 年时间。Vant对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一
2.采用MIT开源许可协议，对商业使用比较友好

        2.组件地址

        3.安装Vant组件仓

1.安装npm安装(项目目录不能存在中文，否则会报错)
	npm init -y  //构建项目
	npm i @vant/weapp@1.3.3 -s --production
2.构建 npm包功能
	a.建议先点击微信开发者工具-->详情-->本地设置-->使用 npm 模块
	b.然后点击微信开发者工具 -->菜单栏-->工具-->构建npm
	b.1.提示构建成功，耗时 xxx 秒且控制台没有任何的错误，说明包构建成功，可以进行使用
	b.2.否则就需要把node_modules、miniprogram_npm删除,删除以后，重新安装包，并点击工具-->构建npm，进行重新构建
3.如果提示构建失败，可以将微信开发者工具重启，重启以后，运行小程序项目，查看是否还报错
4.修改app.json
	将"style": "v2",进行移除，防止小程序本身的 UI 样式和 Vant 的组件样式库 冲突

        4.使用Vant组件

安装完Vant组件库之后，可以在 app.json的usingComponents节点中引入需要的组件，即可在wxml 中直接使用组件
1.配置
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}
2.使用
<van-button type="default">默认按钮</van-button>

三、小程序API的Promise化

        1.介绍

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

        2.安装步骤

1.下载依赖包
npm i --save miniprogram-api-promise@1.0.4
2.重新构建npm包
	a.建议先点击微信开发者工具-->详情-->本地设置-->使用 npm 模块
	b.然后点击微信开发者工具 -->菜单栏-->工具-->构建npm
3.构建失败
    a.需要把node_modules、miniprogram_npm删除
    b.删除之后重新构建

        3.使用步骤

1.全局注册
import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)
App({})
2.使用
在.wxml中
<van-button type="warning" bindtap="getInfo">警告按钮</van-button>
在.js中
async getInfo () {
  const { data: res } = await wx.p.request({
    url: 'https://www.escook.cn/api/get',
    method: 'GET',
    data: {
      name: 'zs',
      age: 19
    }
  })
  // res 处理
  console.log(res)
}