小程序前端开发基础框架，可直接用于开发

对于微信小程序开发，一直想开源一个可以直接拿来使用的开源框架，这样可以方便大家在此基础上可以迭代开发，简化了写样式，发起>

，只能滚动

如果使用的是小程序的原生oage，可以使用wxgetSystemInfo接口来获取设备的各种信息（包括屏幕宽高），然后根据实际情况来计算页面需要的高度；

如果页面是用h5写的，可以在页面加载完成后，动态添加weui-page__bd的高度，然后将页面内容以外的滚动条隐藏掉：

<script type="text/javascript">

windowonload=function(){

//获取page容器标签

var pageElem=documentgetElementsByClassName('weui-page__bd')[0];

//获取设备的高度

var windowHeight=windowscreenheight;

pageElemstyleheight=windowHeight+"px";

}

</script>

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

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

下载之后的目录结构为:

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

src : 源码目录

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

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

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

开始使用, 如果使用呢 第一步先把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_buttonpng" 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_msgpng" 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_articlepng" 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_cellpng" alt="">

</div>

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

</a>

</div>

来自官方例子中的素材

Toast

d出层: 一个是d出提示数据

<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>

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

这里以npm引入小程序官方拓展组件库 recycle-view 为例

特别重要1在小程序根目录内，初始化 npm （官方文档上是没写出这一步，这里做个补充）

2在小程序中执行命令安装 npm 包（这里使用了recycle-view）：

3在微信开发者工具中的菜单栏：工具 --> 构建 npm （这里记得先安装 npm 包，即步骤2）:

完成构建后可以在目录树里看到了miniprogram_npm以及里面的weui-miniprogram组件文件夹

利用WeUI的flex布局。

微信小程序的WeUI样式以及微信小程序开发文档中发现并没有表单必填前的required属性中都没有required属性，所以，只能自己创造了。

改写之后，必填项就完成了。

以上就是关于小程序前端开发基础框架，可直接用于开发全部的内容，包括:小程序前端开发基础框架，可直接用于开发、微信小程序中使用腾讯地图sdk、小程序打开javaweb页面太小了等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！