微信小程序第二战（样式库的引入使用数据渲染插入和玻璃面板设计）

微信小程序第二战

1. 学习引入和使用样式库
2. 学习使用数据渲染插入
3. 学习获取用户个人信息
4. 学习玻璃窗户面板设计

1.样式库引用（使用Vant Weapp）Vant Weapp.官方网站

在平时工作时肯定是要运用到某些样式库，可以帮助我们更高效快捷的开发自己项目。

1.通过 npm 安装

npm i @vant/weapp -S --production

其实Vant Weapp上面有详细的引入的教程这里我也就不重复了

1. 如何使用
2. 里面有哪些坑

使用还是狠简单的像下图在自己当前页面里面的json文件里面配置

{
   
  "usingComponents": {
   
  //对象名就是标签名
    "button": "../../miniprogram_npm/vant-weapp/button/index",
    "van-notice-bar": "../../miniprogram_npm/vant-weapp/notice-bar/index",
    "van-toast": "@vant/weapp/toast/index",
    "van-icon": "@vant/weapp/icon/index"
  }
}

在这个usingComponents对象里面对象名是标签名，后面是样式组件的路径还是很好理解的，不过在这里标签名是可以自己定义的，我觉得这一点非常好，可以更快速的编写html代码了。（对象名就是标签名）

同时又有哪些坑呢？

1. 无法构建npm包，提示没有可构建的NPM包

   当时我明明通过npm i @vant/weapp -S --production下载了却提示没有可以构建的NPM包！这是什么意思，原来是没有初始化项目。

在小程序根目录下打开cmd 输入npm init -f 初始化命令 -f　　 表示全部输入默认值 会生成一个package.json文件

继续输入命令：npm i vant-weapp -S --production 导入vant-weapp包

构建npm包在设置里面

有些组件是需要在JS里面引入才可以使用的

//轻提示
import Toast from '@vant/weapp/toast/toast';

还有个别的组件在官方网上路径是错误的。（遇到过一次，忘了是哪个了）@-@

2.数据渲染插入

1. 数据绑定
2. this.setData（改变Data数据）
3. wx.request（接口的使用）

<view "{
   {text}}"