全站技术
联系方式
全站技术您当前的位置:主页 > 全站技术 >

WeUI的使用,WeUI使用

发布于:2019-01-09 作者:凯发K

WeUI的使用,WeUI使用

最近公司需要开发一个微信端的商城,而老大极力安利我去使用WeUI所以便有了第一次使用的经历。

 

1、因为是手机端所以在写页面之前要写上一行必备的代码

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

--initial-scale:页面首次被显示的可是区域的缩放级别,1.0是指按实际尺寸显示 --maximum-scale:用户可将页面放大的程序,1.0是指禁止用户放大到实际尺寸之上 --user-scalable:是否对页面进行缩放,no是指禁止缩放   2、要使用WeUI就要使用它所自带的css   3、因为是手机端所以就没有用JQuery,不是说JQuery不好(嫉妒崇拜),只是在手机端所以选择了更为轻量级的zepto.js(还想再写点东西记录我使用zepto的‘心酸’历程)   4、网址推荐 https://www.oschina.net/p/weui https://weui.io/   5、使用了WeUI会省略很多的css 会大大的提高写代码速度,一开始使用的使用都是一点点比照原网站的class写。拿到页面的时候可以先去比照WeUI的样式,查看自己需要用到哪些排版样式,然后再去写页面,这样会省时些。   6、在使用的过程中发现 weui-cells布局用的很多,一个cells里可以嵌套很多cell cell里面也可以嵌套cells,但是宽度要设置成100% (cells cell 都有自带的padding-left:15px,padding-right:15px)  
 <div >
     <div >
        <div >列的header</div>
         <div >列的内容</div>
         <div >列的右侧(默认有一个箭头)</div>
     </div>
     <div >
        <div >列的header2</div>
         <div >列的内容2</div>
         <div >列的右侧(默认有一个箭头)2</div>
     </div>
 </div>

7、用的很多的还有--按钮

按钮的样式有很多,具体使用哪种可以去对照网址的demo里的按钮

<a href="javascript:;" >按钮</a>

8、还有一个是蒙层,WeUI样式是写好了的

可以使用js控制蒙层的出现与否的它的z-index

<div  id="testMask" ></div>

9、常用的还有尾部的导航 这种导航基本微信端的页面底部都会有

只需要稍微更改图标 背景颜色就可以了 很方便

<div >
  <a href="javascript:;" >
    <img src="images/index_icon01.png"  >               
    <p >首页</p>
  </a>
  <a href="page/allOrder.html" >
    <img src="images/index_icon02.png" >
    <p >订单</p>
  </a>
  <a href="page/user.html" >
    <img src="images/index_icon03.png" >
    <p >个人中心</p>
  </a>
  <a href="javascript:;" >
    <img src="images/index_icon04.png" >
    <p >分享</p>
  </a>
</div>    

 

11、还有搜索框search 对话框Dialog 弹出式提示框Toast等都是比较常用的

 

http://www.bkjia.com/HTML_CSS/1169353.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/1169353.htmlTechArticleWeUI的使用,WeUI使用 最近公司需要开发一个微信端的商城,而老大极力安利我去使用WeUI所以便有了第一次使用的经历。 1、因为是手机端所...

本文源自: 环亚国际