精华内容
下载资源
问答
  • weui 文档
    万次阅读
    2018-01-26 15:40:26

    文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md

    github: https://github.com/Tencent/weui.js

    效果展示: https://weui.io

    更多相关内容
  • weui 开发文档

    万次阅读 多人点赞 2019-03-28 14:58:21
    今天需要用到weui,这里记录一下开发文档地址 开发文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md github: https://github.com/Tencent/weui.js 效果展示: https://weui.io ...

    一系列文档地址

    今天需要用到weui,这里记录一下开发文档地址

    开发文档:http://old.jqweui.com/components

    js文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md

    github: https://github.com/Tencent/weui.js

    菜鸟教程:http://www.runoob.com/w3cnote/weui-for-weixin-web.html

    效果展示: https://weui.io

    这里简单介绍一下小程序如何引入weui及其简单的使用

    项目中使用步骤

    1、在GitHub上https://github.com/weui/weui-wxss/下载程序代码,解压后可以看到如下目录:

    在这里插入图片描述

    2、我们只需要将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下:

    在这里插入图片描述

    3、新建微信小程序项目,将weui.wxss文件导入到小程序项目的根目录下:

    在这里插入图片描述

    在这里插入图片描述

    4、在项目中引用:在全局app.wxss中加入weui.wxss的引用- @import "weui.wxss";

    5 根组件使用class=”page”

    <view class="page"></view>
    

    6 页面骨架

    <view class="page">
    	<view class="page__hd"></view><!--页头-->
    	<view class="page__bd"></view><!--主体-->
    	<view></view><!--未设置页脚-->
    </view>
    

    7 除此之外都是按照weui-开头后接组件名称,例如class=”weui-footer”

    <view class="weui-footer">我是页脚</view>
    

    8 组件的子组件样式,例如view.weui-footer组件还有链接和版权信息。

    <view class="weui-footer">
    <view class="weui-footer__links">
        <navigator url="" class="weui-footer__link">上海物联网科技有限公司</navigator>
    </view>
    <view class="weui-footer__text">Copyright © 程序媛专用</view>
    </view>
    

    本地起测试demo

    1. 为了更直观的查看效果和方便使用,我在小程序中新建个项目,地址指向weui-wxss-master\dist(即从git上克隆的代码对应的dist目录),这样就可以随时查找自己要的效果,剩下的就是复制粘贴了,在项目中使用weui的样式如下:

    在这里插入图片描述

    示例代码:

    <view class="page">
        <view class="page__hd">
            <view class="page__title">Button</view>
            <view class="page__desc">按钮,WeUI采用小程序原生的按钮为主体,加入一些间距的样式。</view>
        </view>
        
        <view class="page__bd page__bd_spacing">
            <button class="weui-btn" type="primary">页面主操作 Normal</button>
            <button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button>
    
            <button class="weui-btn" type="default">页面次要操作 Normal</button>
            <button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button>
    
            <button class="weui-btn" type="warn">警告类操作 Normal</button>
            <button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button>
    
            <view class="button-sp-area">
                <button class="weui-btn" type="primary" plain="true">按钮</button>
                <button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button>
    
                <button class="weui-btn" type="default" plain="true">按钮</button>
                <button class="weui-btn" type="default" disabled="true" plain="true">按钮</button>
    
                <button class="weui-btn mini-btn" type="primary" size="mini">按钮</button>
                <button class="weui-btn mini-btn" type="default" size="mini">按钮</button>
                <button class="weui-btn mini-btn" type="warn" size="mini">按钮</button>
            </view>
        </view>
    </view>
    
    
    展开全文
  • 微信官方WeUI5+WeChat开发者工具+教程文档。下载完成后 用微信开发者工具打开dist目录根据你点击进入的页面 下面有页面路径 找到那个文件夹 复制你想要复制的代码就可以了。weui包说明:①weui标准版: weui-master....
  • weui的使用-demo

    热门讨论 2016-12-13 13:29:58
    原文地址:http://blog.csdn.net/sundayaaron/article/details/53607838
  • mvc weui上传文件完整demo
  • vue_weui 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • weui-1.1.2

    2017-08-18 21:55:48
    weui是一个专门用于手机移动web开发及微信开发的前段css样式库
  • >> 一行代码即可使页面适应手机屏幕,具体介绍可参考... 微信JSSDK开发文档>> 这个不太懂具体作用,以后了解了再来补充(..›ᴗ‹..)>>># 2. AJAX>> 之前开发中也有用到,经常用到,在这...

    >> 一行代码即可使页面适应手机屏幕,具体介绍可参考链接,很好用

    >>

    > 3. rem

    >> rem之后好像没怎么用,以后有更多了解再来补充

    >>

    > 4. 微信JSSDK开发文档

    >> 这个不太懂具体作用,以后了解了再来补充(..›ᴗ‹..)

    >>

    >

    # 2. AJAX

    >

    > 之前开发中也有用到,经常用到,在这里总结一下,主要为代码举例(两个select级联):

    >

    > 1. html:

    请选择 ${value}

    >>

    > 2. js:

    function getCRList() {

    var $tblist = $(“#tblist”).val();

    $('#tblist').val($tblist); //让第一个下拉框保持显示选中的值

    $('#crlist').html(""); //把ci内容设为空

    var $crValue = $('#crlist');

    $crValue.append('请选择');

    $.ajax({

    url : "/showCRList",

    type : "GET",

    dataType : "json",

    async: false,//default is true ,and if it is true,the flag in ajax cant return

    //cant be false because in chinese it means "异步"

    data: {

    tblist : $tblist //传给后台的值

    },

    success : function(data, textStatus, jqXHR) { //data为从后台取回的值

    if (data && data.length > 0) {

    var html = [];

    for (var i = 0; i < data.length; i++) {

    html.push(''+data[i]+'');

    }

    $crValue.append(html.join(''));

    }

    }

    });

    }

    >>

    > 3. Servlet

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    response.setContentType("application/json"); //使用json格式

    response.setCharacterEncoding("UTF-8");

    request.setCharacterEncoding("UTF-8");

    tblist = (String) request.getParameter("tblist"); //不可以用getAttribute...

    rtn2 = crUtil.getCRList(tblist);

    PrintWriter writer = response.getWriter();

    JSONArray array = JSONArray.fromObject(rtn2);

    writer.append(array.toString());

    }

    >>

    > 4. CRUtil

    public List getCRList(String tbname){

    List rtn2 = new ArrayList();

    String sql2="SELECT NAME FROM crinfo WHERE tbId = (SELECT id FROM tbinfo WHERE NAME = '" + tbname + "')";

    rtn2 = dbutil.getListInfo(sql2);

    return rtn2;

    }

    > 5. DatabaseUtil

    /*

    * 获得列表信息

    */

    public List getListInfo(String sql){

    List rsList = new ArrayList();

    String result = null;

    Connection conn=null;

    String url="jdbc:mysql://localhost:3306/person_seat_detection";

    String user_="root";

    String psd="123456";

    try {

    Class.forName("com.mysql.jdbc.Driver");

    conn=DriverManager.getConnection(url,user_,psd);

    PreparedStatement ps=

    conn.prepareStatement(sql);

    ResultSet rs=ps.executeQuery();

    while(rs.next()){

    rsList.add(rs.getString(1));

    }

    } catch (Exception e) {

    System.out.println(e.getMessage());

    }finally {

    if (conn!=null) {

    try {

    conn.close();

    } catch (Exception e2) {

    }

    }

    }

    return rsList;

    }

    >>

    > 6. web.xml配置

    >>

    crServlet

    com.imooc.servlet.CRServlet

    crServlet

    /showCRList

    ```

    本博客所有文章除特别声明外,均采用 CC BY-SA 3.0 协议 。转载请注明出处!

    展开全文
  • 2015年9月最新的微信开发者文档,可离线本机使用。
  • Weui 文件上传完整版示例

    千次阅读 2018-08-29 17:59:00
    tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)"><div class="weui_uploader_status_content">0%</div></li>' , $gallery = $("#gallery" ), $galleryImg = $("#...

    部分思路借用网友,部分是自己细化的. 先声明.

     

    不多说,参考代码

    @{
        ViewBag.Title = "费用填报";
        Layout = "~/Views/Shared/_MForm.cshtml";
    }
    
    <html  >
    <head>
        <meta name="viewport" content="width=device-width" />
    </head>
    <body  ontouchstart>
        <header class="mwapp-header">
            <div id="back" class="mwapp-header-icon-back"><span></span></div>
            <div class="mwapp-header-title">费用填报</div>
        </header>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">派车单号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" value="TRPSH201808000071" disabled>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="FeeName" class="weui-label">费用项</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="FeeName" type="text" value="">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="Amount" class="weui-label">金额</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" id="Amount"  placeholder="请输入金额">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="time-inline" class="weui-label">数量</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="number" placeholder="请输入数量,默认1" value="1" id="FeeCount">
                </div>
            </div>
     
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="InvoiceType" class="weui-label">发票类型</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="InvoiceType" type="text" value="">
                </div>
            </div>
            <div class="weui-cells__title">备注</div>
            <div class="weui-cells">
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <input class="weui-input" id="Description" type="text" placeholder="请输入备注">
                    </div>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">附件上传:</p>
                            <div class="weui-uploader__info"><span id="uploadCount">0</span>/2</div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file"  accept="image/jpg,image/jpeg,image/png,image/gif"  multiple="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" class="weui-gallery__del">
                    <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                </a>
            </div>
        </div>
        <div class="weui-btn-area">
            <a class="weui-btn weui-btn_primary"    href="javascript:" id="btnsaveCharge">提交费用</a>
        </div>
    </body>
    </html>

     

    <script>
        var disno = request('disno');
      
        $(function() {
            $("#back").click(function() {
                location.href = '/TMS.App/CargoCharge/Index';
            });
           
            $("#FeeName").picker({
                cols: [
                    {
                        textAlign: 'center',
                        values: ['内陆运费', '冷藏费', '压夜费']
                    }
                ],
                onChange: function (p, v, dv) {
    
    
                },
                onClose: function (p, v, d) {
                    if (v != null && v.length > 0) {
                        $("#FeeName").val(v[0]);
                    }
    
                }
            });
    
            $("#InvoiceType").picker({
                cols: [
                    {
                        textAlign: 'center',
                        values: ['普通发票', '专用发票']
                    }
                ],
                onChange: function (p, v, dv) {
    
                },
                onClose: function (p, v, d) {
                    if (v != null && v.length > 0) {
                        $("#InvoiceType").val(v[0]);
                    }
                }
            });
             
            // 允许上传的图片类型
            var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
            var maxSize = 1024 * 1024*10; // 10240KB,也就是 10MB
            var maxWidth = 1900;  // 图片最大宽度
            var maxCount = 2;// 最大上传图片数量
    
            //
            var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)"><div class="weui_uploader_status_content">0%</div></li>',
                $gallery = $("#gallery"),
                $galleryImg = $("#galleryImg"),
                $uploaderInput = $("#uploaderInput"),
                $uploaderFiles = $("#uploaderFiles");
    
            $uploaderInput.on("change", function (e) {
                files = e.target.files;
                // 如果没有选中文件,直接返回
                if (files.length === 0) {
                    return;
                }
                for (var i = 0, len = files.length; i < len; ++i) {
                    var file = files[i];
                    var imgID = genGUID();
                    var reader = new FileReader();
                    var fileType = file.type;
                    // 如果类型不在允许的类型范围内
                    if (allowTypes.indexOf(file.type) === -1) {
                        
                        $.toast('该类型不允许上传' + fileType, "forbidden");
                        continue;
                    }
    
                    if (file.size > maxSize) {
                        $.toast("图片太大,不允许上传", "forbidden");
                        continue;
                    }
    
                    if ($('.weui-uploader__file').length >= maxCount) {
                        $.toast('最多只能上传' + maxCount + '张图片', "forbidden");
                        return;
                    }
                 
    
                    reader.onload = function (e) {
                        var img = new Image();
                        img.onload = function () {
                            // 不要超出最大宽度
                            var w = Math.min(maxWidth, img.width);
                            // 高度按比例计算
                            var h = img.height * (w / img.width);
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            // 设置 canvas 的宽度和高度
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(img, 0, 0, w, h);
                            var base64 = canvas.toDataURL(fileType,0.6); //0.6指的是压缩60%
    
                            // 插入到预览区
                            $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));
    
                            var num = $('.weui-uploader__file').length;
                            $('#uploadCount').text(num);
    
                            // 模拟上传进度
                            var progress = 0;
                            function uploading() {
                                $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
                                if (progress < 100) {
                                    setTimeout(uploading, 30);
                                } else {
                                    $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
                                }
                            }
                            setTimeout(uploading, 30);
                        };
    
                        img.src = e.target.result;
                      
                      
                        //这里实现上传
                //$.ajax({});

    }; reader.readAsDataURL(file); } }); var index; //第几张图片 $uploaderFiles.on("click", "li", function () { index = $(this).index(); $galleryImg.attr("style", this.getAttribute("style")); $gallery.fadeIn(100); }); $gallery.on("click", function () { $gallery.fadeOut(100); }); //删除图片 $(".weui-gallery__del").click(function () { $uploaderFiles.find("li").eq(index).remove(); var num = $('.weui-uploader__file').length; $('#uploadCount').text(num); }); $("#btnsaveCharge").click(function () { //或者在这里实现批量上传, 不建议批量上传 }); }); //生成guid function genGUID() { var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); return (G1 + G2); } </script>

    //引入示例

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 移动设备 viewport -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
        <meta name="author" content="mcp">
    
        <link href="~/Content/scripts/weui/jquery-weui.css" rel="stylesheet" />
        <link href="~/Content/scripts/weui/weui.css" rel="stylesheet" />
        <link href="~/Content/scripts/weui/weui-ext.css" rel="stylesheet" />
    
    </head>
    <body>
    
        <script src="~/Content/scripts/weui/jquery.min.js" charset="utf-8"></script>
        <script src="~/Content/scripts/weui/jquery-weui.js" charset="utf-8"></script>
        <script src="~/Content/scripts/weui/jquery-weui.js" charset="utf-8"></script>
        <script src="~/Content/scripts/weui/mobile-utils.js" charset="utf-8"></script>
        <script src="~/Content/scripts/weui/min/fastclick.js"></script>
        @RenderBody()
    
    
    </body>
    
    </html>

     

     

     

    转载于:https://www.cnblogs.com/benbenfishfish/p/9556018.html

    展开全文
  • 1、自适应,运用了html5新特性标签,使用weui开发的一整套移动端商城,包括首页,购物车,订单管理,评价,分类,会员中心等,全面到注册协议都弄好了。私人定制服务手机网站模板html源码下载,可进行二次修改进行...
  • weui文档的地址

    2019-10-08 01:53:34
    https://github.com/Tencent/weui.js/tree/master/docs 转载于:https://www.cnblogs.com/hzStudy/p/8308936.html
  • 1、手机weui框架商城模板,一款综合生活类型的手机商城模板html下载。主要有:分类、发现、购物车、我的主页、商品详情、我的优惠券、我的收藏等总共12个手机页面。 2、纯静态页面,开发技术HTML,CSS,Jquery,代码...
  • jqueryUi开发技术文档

    2011-11-26 22:17:33
    jqueryUi开发技术文档jqueryUi开发技术文档jqueryUi开发技术文档jqueryUi开发技术文档
  • WeUi使用手册及参考

    2022-01-14 16:52:44
    weui开发使用手册地址:https://www.kancloud.cn/ywfwj2008/weui/274291 weui腾讯官方样式:https://weui.io/
  • weui所需Js和css文件

    2019-03-21 23:41:57
    weui所需Js和css文件 github上面下载的是less文件还需要编译,发现网上没有这方面的文件所以上传一下,利人利己
  • Download Bitnami Review Board Stackclick hereWeUI首页、文档和下载 - 专为微信设计的 UI 库 - 开源中国社区
  • we-vue是一套基于Vue.js的移动关闭组件库,结合weui官方样式库,封装了一系列组件,适合微信公众号等移动端开发。 特性 35+个组件 进行全面的单元测试 详细的在线文档和示例 支持打字稿 安装 // yarn 推荐 $ yarn ...
  • 目录一、WEUI框架说明二、引进步骤1、源码下载2、CSS文件引入3、示例代码引入 一、WEUI框架说明 WEUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计。 UI演示:...
  • 这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库 由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一 支持扩展库导入,不占用小程序体积 二 ...
  • weui开发笔记

    2021-03-14 13:25:12
    1.标准的weui只是一个css皮肤,当然里面有h5特性所以有一些很好的组件,比如时间选择控件、数字输入框(用于手机号等),在ios——微信中可以做到完美的展示。2.ui框架以手机移动端为优先显示(bootstrape也是的)。样式...
  • 记录一下weui文档地址

    2019-10-10 10:50:02
    今天需要用到weui,这里记录一下开发文档地址 开发文档:http://old.jqweui.com/components js文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md github: https://github.com/Tencent/weui.js...
  • 2.微信 weui下载地址:https://github.com/weui/weui-wxss/ weui用微信开发者工具打开步骤。 新先小程序,目录选择dist。appid可以选择测试 对WEUI css详解 转载于:https://www.cnblogs....
  • WEUI

    2018-08-15 10:53:40
    WEUI 1.showLoading 显示:$.showLoading("数据加载中"); 隐藏:$.hideLoading(); 2.修改showLoading样式 .weui-toast 3.修改加载框样式 p.weui-toast_content {  margin-top: 0rem; }...
  • 一:公众号及小程序开发使用weui无效解决方法   分享者:lijie627239856,原文地址  ...其实这个是微信官方文档weui中的BUG,给出的类名全部是以下这种形式   按钮 实际上,应该是这样的!   按钮 注意:类名中的

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,623
精华内容 1,049
关键字:

weui开发文档

友情链接: ggg.rar