• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信公众号 > 微信开发入门(七)如何使用weui.wxss

微信开发入门(七)如何使用weui.wxss

作者:匿名 字体:[增加 减小] 来源:互联网

匿名通过本文主要向大家介绍了微信开发,weui.wxss等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
什么是WeUI?

WeUI是在遵守微信视觉设计规范下,由官方设计团队为小程序量身定制的基础样式库。

这里把WeUI放到基础篇里,是因为WeUI是官方出品,并且在10月28号IDE更新后,IDE不能识别和引用css,同时也屏蔽了从网络获取样式文件,和css划清界限。

》》》 如何引入WeUI

  1. 下载WeUI
    weui.wxss
    注意是在【weui-wxss/dist/style/】目录下,不要【weui-wxss/src】目录里面下载

  2. 将weui.wxss拷贝到小程序根目录中

  3. 在app.wxss或页面wxss导入weui.wxss

    /**app.wxss**/
    @import 'weui.wxss';
  4. 以上就成功引入了weui.wxss,weui也提供了单个组件的样式引入,流程同上。

》》》 如何使用WeUI

  1. 根组件使用class="page"

    <view class="page">
    </view>
  2. 页面骨架组件使用class="pagexxx"(注意是两个下划线)

    <view class="page">
    <!--页头-->
    <view class="pagehd"></view>
    <!--主体-->
    <view class="pagebd"></view>
    <!--没有页脚-->
    </view>
  3. 其他组件都已weui-开头后接组件名称,例如class="weui-footer"

    <view class="weui-footer">我是页脚</view>
  4. 组件的子组件样式,例如view.weui-footer组件还有链接和版权信息。

    <view class="weui-footer">
    <view class="weui-footerlinks">
        <navigator url="" class="weui-footerlink">小黄象</navigator>
    </view>
    <view class="weui-footertext">Copyright ? 精品专栏组</view>
    </view>

    组件和子组件使用两个下划线衔接,所以要区分什么时候用"-",什么时候用

下图是结合weui.wxss做的社区专栏小程序版,正在完善ing

【相关推荐】

1. 微信公众号平台源码下载

2. 微信投票源码

3. 微信啦啦外卖2.2.4解密开源版 微信魔方源码

以上就是微信开发入门(七)如何使用weui.wxss的详细内容,更多请关注其它相关文章!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信开发教程:自动回复消息和客服消息,文本带链接跳转
  • php 实现微信开发获取用户信息
  • 微信开发实战之模块化的实例详解
  • 微信开发之列表渲染多层嵌套循环
  • 总结一个微信开发的过程实例
  • 微信开发入门(jssdk开发)
  • 微信开发之介绍CreateTime
  • 微信公众号开发--解析CreateTime
  • 微信开发之微信支付
  • 详解微信开发中视图层(xx.xml)和逻辑层(xx.js)

相关文章

  • 微信开发之菜单查询接口
  • 关于小程序开发心得的详细介绍
  • 公众号支付接口的开发
  • 微信公众平台开发获取用户基本信息
  • 教你如何修改微信运动步数(IOS)
  • 微信开发vs远程调试
  • 微信公众平台开发--快递查询
  • PHP微信开发之有道翻译实例代码
  • 微信公众平台开发:请求消息去重
  • Thinkphp整合微信支付功能

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • ASP.NET MVC5+EF6+EasyUI微信后台管理系统实例解析
    • php微信公众号开发前的问题
    • Force.com微信开发系列自定义菜单进阶及语音识别
    • ASP.NET代码轻松实现微信抢红包
    • 对微信上传图片的技术讲解
    • 微信 开发生成带参数的二维码的实例
    • php微信高级接口群发 多客服
    • 微信公众平台开发:了解MessageHandler
    • thinkphp项目如何自定义微信分享描述内容
    • 基于H5的微信支付开发详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有