微信小程序里使用weui的正确打开方式

自己写微信小程序,发现有weui这样的东西。第一次使用,网上搜到到用法是这样的:

到https://weui.io/#input查看例子,右键查看源码,然后再对照界面和源码使用。

但是这样看到的源码是网页版的,不是小程序风格的代码。另外,源码和界面也不好对应。

实际上,如果是开发微信小程序或者公众号,使用的是微信web开发者工具,weui的正确打开方式是这样的:

  • 下载weui

项目地址:https://github.com/weui/weui-wxss/

  • 使用微信web开发者工具,新建项目,并选择下载的weui的解压后的文件夹里的dist目录。
    微信小程序里使用weui的正确打开方式_第1张图片微信小程序里使用weui的正确打开方式_第2张图片
  • 然后就能以项目的形式查看weui了。微信小程序里使用weui的正确打开方式_第3张图片
  • 这样查看某个组件的用法就方便多了,而且也有对应js文件,可以查看模拟数据的处理方式。
  • 如果在自己的项目里使用,需要把下载的weui文件夹下的dist目录下的weui.wxss文件找到,拷贝到自己的项目里,可以和例子一样,建一个文件夹style,把weui.wxss文件放进去。然后在自己的项目的app.wxss文件里引用这个文件。

微信小程序里使用weui的正确打开方式_第4张图片

微信小程序里使用weui的正确打开方式_第5张图片

  • 然后在你的项目里就可以使用weui风格的组件了。

你可能感兴趣的:(微信小程序)