底部导航栏素材-为什么我用微信WeUI的底部导航栏tabbar，不在底部

该功能的实现是根据微信公众号后台的自定义模板功能实现的。具体操作方法如下:

打开微信公众号后台,登录进入以后,在左边的导航栏选择页面模板;

点击添加模板,进入以后点击封面模板;

将页面的模板名称修改为微信公众号的名称,如“郭静的互联网圈”。再在右边点击,添加文章,在素材库里选择三篇首屏的文章,这里的素材得提前准备好。

接下来就可以修改和添加分类了,如上面的简介、剪影、公告。每个分类名称修改好后,就添加相关素材里的文章。

所有素材和分类名做好以后,点击发布,可以看到完成的页面下面部分有链接图标,点击复制链接。

在左边的导航栏选择自定义菜单,在菜单内容里面选择跳转到网页,将链接地址粘贴进去。

以上动作完成后,点击保存并发布,24小时内,即可看到想要的页面,建议先预览,有不和谐部分继续修改,完成后再点击发布。

1,通过浏览器打开微信公众平台登陆页面。2,输入用户名和密码,点击登陆。3,点击左侧的“管理”-“素材管理”。4,鼠标移动到页面“+”号的位置,会出现“单图文消息”和“多图文消息”的图标。5,以发布“单图文消息”为例,点击“单图文消息”图标,进入“单图文消息”发布页面。6,输入消息“标题”,消息“作者”,点击“上传”,可以上传消息封面图片,内容编辑完成之后,点击“完成编辑”,然后点击“保存”按钮。7,消息编辑完成后,下面就要发布消息了,点击“功能”-“群发功能”。8,点击“图文消息”,选择刚才编辑好的“图文消息”,点击“确定”按钮。

先引用样式文件. 请在github上下载对应的文件.

下载地址为: 3次未审核, 搜索吧.

下载之后的目录结构为:

dist : 编译之后的目录, 里面的文件可以直接使用

src : 源码目录

可以打开dist下example目录, 这个是官方的例子文件. 里面比较全的基本使用方法.

打开example目录下的 就可以看到官方的例子了.

这里需要说明一下, 这个官方使用的框架. 这个框架更加适用移动端.

开始使用, 如果使用呢? 第一步先把css文件引用到页面中.

<link rel="stylesheet" type="text/css" href="路径地址" />

然后, 就可以使用官方的样式了. 首先来说明一下button.

使用方法:class="weui_btn weui_btn_primary"

其中属性有:

weui_btn weui_btn_primary

weui_btn weui_btn_warn

weui_btn weui_btn_default

三种, 如果你想扩展, 直接增加响应的样式就可以了.

Tab使用:

tab包含两种: navbar 和 tabbar

使用方法.

navbar :

<div class="weui_tab">

<div class="weui_navbar">

<div class="weui_navbar_item weui_bar_item_on"> 选项一</div>

<div class="weui_navbar_item"> 选项二 </div>

<div class="weui_navbar_item">选项三 </div>

</div>

<div class="weui_tab_bd"></div>

</div>

weui_bar_item_on 为选中项

tabbar:

<div class="weui_tabbar">

<a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">

<div class="weui_tabbar_icon">

<img src="./images/icon_nav_" alt="">

</div>

<p class="weui_tabbar_label">微信</p>

</a>

<a href="javascript:;" class="weui_tabbar_item">

<div class="weui_tabbar_icon">

<img src="./images/icon_nav_" alt="">

</div>

<p class="weui_tabbar_label">通讯录</p>

</a>

<a href="javascript:;" class="weui_tabbar_item">

<div class="weui_tabbar_icon">

<img src="./images/icon_nav_" alt="">

</div>

<p class="weui_tabbar_label">发现</p>

</a>

<a href="javascript:;" class="weui_tabbar_item">

<div class="weui_tabbar_icon">

<img src="./images/icon_nav_" alt="">

</div>

<p class="weui_tabbar_label">我</p>

</a>

</div>

图片来自官方例子中的素材.

Toast

弹出层: 一个是弹出提示数据.

<div id="toast">

<div class="weui_mask_transparent"></div>

<div class="weui_toast">

<i class="weui_icon_toast"></i>

<p class="weui_toast_content">已完成</p>

</div>

</div>

使用$('#toast').show();进行显示数据.

searchBar搜索框

简单的搜索, 搜索世界的大不同, 不是所有的网站都可以

图标的使用.

<i class="weui_icon_msg weui_icon_success"></i>

<i class="weui_icon_msg weui_icon_info"></i>

<i class="weui_icon_msg weui_icon_warn"></i>

<i class="weui_icon_msg weui_icon_waiting"></i>

<i class="weui_icon_safe weui_icon_safe_success"></i>

<i class="weui_icon_safe weui_icon_safe_warn"></i>

Panel的使用

<div class="weui_panel weui_panel_access">

<div class="weui_panel_hd">图文组合列表</div>

<div class="weui_panel_bd">

<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">

<div class="weui_media_hd">

<img class="weui_media_appmsg_thumb" src="" alt="">

</div>

<div class="weui_media_bd">

<h4 class="weui_media_title">标题一</h4>

<p class="weui_media_desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</p>

</div>

</a>

<a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">

<div class="weui_media_hd">

<img class="weui_media_appmsg_thumb" src="" alt="">

</div>

<div class="weui_media_bd">

<h4 class="weui_media_title">标题二</h4>

<p class="weui_media_desc">由各种物质组成的巨型球状天体,叫做星球。星球有一定的形状,有自己的运行轨道。</p>

</div>

</a>

</div>

<a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>

</div>

图片里面没有填写地址, 请您自己填写信息.