在微信开发者工具中weui组件的安装方法,以及使用方法,for 微信小程序开发

安装方法

  1. 下载weui的源代码,https://github.com/Tencent/weui-wxss/ , clone or download > Download ZIP
  2. 解压,找到主文件weui.wxss,在./weui-wxss-master/dist/style/weui.wxss
  3. 打开微信开发者工具,打开小程序项目,找到style文件夹,(在./miniprogram/style/),右键style文件夹,“硬盘打开”,然后在文件管理器中进入style文件夹,将步骤2 的weui.wxss复制到其中
  4. 在开发者工具中修改项目根目录下的app.wxss,引用weui主文件,方法是@import 'style/weui.wxss';
  5. 安装完成

使用方法

  1. 将整个weui导入到微信开发者工具,作为一个项目: https://blog.csdn.net/qq285744011/article/details/103808893
  2. 获取到你需要的样式代码,例如footer,我们在开发者工具中的weui项目预览中的“基础组件”>"footer",点开,可以看到左下角的页面路径为“example/footer/footer”,所以我们打开中间窗口的文件列表,打开/example/footer/footer.wxml,找到你喜欢的样式,例如
    <view class="weui-footer">
       <view class="weui-footer__links">
          <navigator url="" class="weui-footer__link">底部链接</navigator>
       </view>
       <view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
    </view>
  3. 得到代码后,得到class和DOM结构,我们在开发者工具中打开你的项目,套进去即可看到效果。
发布了166 篇原创文章 · 获赞 58 · 访问量 66万+

猜你喜欢

转载自blog.csdn.net/qq285744011/article/details/103809213