微信小程序|vant-dist的引用与屏幕宽度的获取

问题描述

微信小程序中需要用到许多代码，且毫无规律而言，对于刚接触微信小程序开发的开发者来说，想要完全记住并流畅的使用必定是难上加难的，那么有没有什么方法能够有效地解决这个问题呢？

在开发微信小程序时，我们插入图片或设置样式是不会随着模拟器型号的改变而随着模拟器屏幕宽度而改变的，如下图（注意模拟器型号的变化）：

图1 未获取屏幕宽度的轮播图

那要调用怎样的代码才能获取到屏幕宽度呢？

解决方案

2.1 对于vant-dist的引用，需要在网站上下载vant-weapp-dev压缩包，再将其解压，解压成功后将其中的dist文件直接复制到我的微信小程序项目文件夹的根目录中，即可直接调用vant中的源代码。

2.2 获取屏幕宽度的代码：

Js-date代码：

Js-onload-function代码：

wxml代码：

设置后效果：

图2 获取屏幕宽度后轮播图效果

结语

对于从外部引入的vant-dist插件中有许许多多代码，还需要多多实践，根据需要从中调用。在开发微信小程序时对于模拟器的屏幕宽度的获取是必要的。

END

实习编辑 | 王文星

责 编 | 李 娇