码迷,mamicode.com
首页 > 微信 > 详细

微信小程序设计weui框架

时间:2017-10-19 12:48:07      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:git   code   img   class   data-   box   联系   文章   item   

weui-wxss是微信官方提供的ui框架,用起来也很方便(copy)。
下载地址:https://github.com/weui/weui-wxss

第一步:需要把下载的内容copy到项目中,主要是dist目录下的style目录下的weui.wxss文件。

第二步:在全局的app.wxss文件中引用 , 注意目录是相对路径

@import "style/weui.wxss";

第三步:加class样式


 class="page"> 

  class="page__bd"> 

  name="msgTemp"> 

  class="weui-panel__bd"> 

  url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active"> 

  class="weui-media-box__hd weui-media-box__hd_in-appmsg"> 

  class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/> 

  class="weui-media-box__bd weui-media-box__bd_in-appmsg"> 

  class="weui-media-box__title">{{title}} 

  class="weui-media-box__desc">{{time}} 

  class="weui-panel weui-panel_access"> 

  class="weui-panel__hd">文章列表 

  wx:for-items="{{msgList}}" wx:key="{{item.id}}"> 

  class="kind-list__item"> 

  is="msgTemp" data="{{...item}}"/> 

  class="weui-panel__ft"> 

  class="weui-cell weui-cell_access weui-cell_link"> 

  class="weui-cell__bd">查看更多 

  class="weui-cell__ft weui-cell__ft_in-access"> 


  class="page__ft"> 

这个步骤很关键,怎么找到合适的文档呢?weui-wxss是没有文档的,但是它有例子。在下载的内容中,dist目录下的example目录下全部都是例子。我们需要做的是将dist目录导入IDE中,然后找到合适的UI。

 

技术分享

如图所示,找到合适的页面,然后通过红色框的路径找到对应的wxml文件,把需要的部分copy出来,再结合自己的要求修改。文章列表效果图:

 

技术分享

注意点:
1.copy出来的代码,势必会打乱原来代码的结构,这时不能心急,慢慢修改。毕竟这些class的命名是比较长的。

 

文章作者:0127的救赎
版权说明:本文转载于小程序社区(wxapp-union.com)有问题请联系我们。

微信小程序设计weui框架

标签:git   code   img   class   data-   box   联系   文章   item   

原文地址:http://www.cnblogs.com/noel/p/7691295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!