微信开发中 移动端数据懒加载_小程序在微信开发工具请求数据,手机微信加载中 - CSDN
  • 第一步:搭建项目结构 其中涉及到路由的配置: 我是这样的 routes: [ { path: '/', name: 'base-home', redirect: '/main', component: '', children: [ ...

    第一步:搭建项目结构

    其中涉及到路由的配置:

        我是这样的
         routes: [
            {
              path: '/',
                name: 'base-home',
                redirect: '/main',
                component: '',
                children: [
                  {
                    path: '/main',
                    name: 'home',
                    component: '',
                    meta: {
                      keepInner: false, // 相对于router-view里边跳转缓存
                      keepAlive: true
                    }
                  }
              ]
            }
        
        我在入口文件app.vue中使用了router-view,并根据v-if来判断meta中keepALive的值决定是否缓存。
    复制代码

    第二步:写静态页面,封装组件,数据交互。--推荐使用vue官网的代码风格

    问题来了:

      我在app.vue是使用了router-view进行切换路由,但是我第一级路由存在子路由,此时又需要router-view进行切换,我根据meta中的keepInner进来判断是否要缓存。
      
      现在开始axios进行数据交互。
      
      目前我在a页面,调用了mounted中的方法(比如获取数据),之后我去到同级的b页面的子页面c中触发mounted的方法。此时,神奇的东西来了。
    复制代码

    1、子页面c竟然调用了之前a页面中mounted中的方法?怎么办?

        出现这个问题我的解决方法目前是最好不要在两层router-view中都使用缓存。
    复制代码

    2、想要缓存又想要某个页面进来重新获取数据??

    你可以使用beforeRouterEnter中进行判断from.path,注意:这里只能通过next(vm=>{})中的vm来代替this,这步还没有加载完Dom。
    复制代码

    3、需要实现滚动到底部自动加载下一页的数据,如何实现?(试过使用better-scroll插件,出现有些卡顿,并且在ios中页面有点奇怪,本来浏览页面点击头部自动会回去顶部,使用了之后没用了)

    思路:先加载第一页数据,通过可是clientHeight窗口高度,和(document.body.scrollTop)当前盒子滚动的高度,以及当前页面的全部高度进行判断。
    
    页面需要监听scroll滚动事件,
       一、通过window.addEventListener('scroll', this.scrollFun),使用这个方法需要注意,bestoryed的钩子函数中要window.removeEventListener('scroll',this.scrollFun)。倘若你该页面使用了缓存,则需要在beforeRouterLeave的路由钩子中移除监听事件。
       
       二、通过页面盒子进行绑定scroll事件,需要设置该盒子的css样式为{
           position: absolute;
           width: 100%;
           height: 100%;
           overflow-y: auto;
       }否则,监听不了scroll滚动事件。
       
    
    滚动到相应位置,加载下一页数据,使用concat合并数据。在页面使用v-for遍历数据。
    
    ‘如果你在v-for中使用了key属性,并且是:key="Math.random()"’,每次遍历key都不一样的,会出现一个问题,当你加载下一页数据进行concat合并时,上一页的数据会重新加载。因为key代表唯一性,所以每次都必须重新获取。
    复制代码
    展开全文
  • 1、防止手机网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta的viewport 使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。 <...

     

    1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport

    使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    2、苹果手机的一些设置。

    <meta name="apple-mobile-web-app-capable" content="yes">
    如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。

    3、format-detection设置。★

    <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no">
    format-detection 启动或禁用自动识别页面中的电话号码、邮箱地址。

    1.标准的电话号码格式是这样的:

    <a  href="tel:1-408-555-5555">1-408-555-5555</a>
    ,点击后会自动打开电话功能;

    4、上下拉动滚动条时卡顿、慢 ★

    body { 
    -webkit-overflow-scrolling: touch; //苹果手机
     overflow-scrolling: touch; 
    }
     

    5、禁止复制、选中文本

    * {
     
    -webkit-touch-callout: none;
     
    -webkit-user-select: none;
     
    -khtml-user-select: none;
     
    -moz-user-select: none;
     
    -ms-user-select: none;
     
    user-select: none;
     
    }
    6、长时间按住页面出现闪退 ★

    element { -webkit-touch-callout: none; }
     

    7、iphone及ipad下输入框默认内阴影★★★

    Element{ -webkit-appearance: none; }
     

    8、ios和android下触摸元素时出现半透明灰色遮罩 ★★★

    Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }
     

    8.1、苹果输入框点击不放大 ★★★

    <meta content="yes" name="apple-mobile-web-app-capable">
     
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
     

    9、active兼容处理 即 伪类 :active 失效

    方法一:body添加ontouchstart

    <body ontouchstart="">
    方法二:js给 document 绑定 touchstart 或 touchend 事件

    <style> 
        a { color: #000; } 
        a:active { color: #fff; } 
    </style> 
    <a herf=foo >bar</a> 
    <script> 
        document.addEventListener('touchstart',function(){},false); 
    </script>
     

    10、动画定义3D启用硬件加速

    Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0); }
    注意:3D变形会消耗更多的内存与功耗

    11、Retina屏的1px边框

    Element{ border-width: thin; }
    12、旋转屏幕时,字体大小调整的问题

    *{ -webkit-text-size-adjust:100%; }
    13、顶部状态栏背景色

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    说明:

    除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。

    如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。

    兼容性 iOS 2.1 +

    14、设置缓存

    <meta http-equiv="Cache-Control" content="no-cache" />
    手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

    15、桌面图标

    <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> 
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /> 
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
     

    16、浏览器私有及其它meta

    全屏模式

    <meta name="x5-fullscreen" content="true">
    强制竖屏

    <meta name="x5-orientation" content="portrait">
    强制横屏

    <meta name="x5-orientation" content="landscape">
    应用模式

    <meta name="x5-page-mode" content="app">
    UC浏览器私有

    全屏模式

    <meta name="full-screen" content="yes">
    强制竖屏

    <meta name="screen-orientation" content="portrait">
    强制横屏

    <meta name="screen-orientation" content="landscape">
    应用模式

    <meta name="browsermode" content="application">
    其它

    针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓

    <meta name="HandheldFriendly" content="true">
    微软的老式浏览器

    <meta name="MobileOptimized" content="320">
    windows phone 点击无高光

    <meta name="msapplication-tap-highlight" content="no">
    17、IOS中input键盘事件keyup、keydown、keypress支持不是很好

    问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!

    解决方法:可以用html5的oninput事件去代替keyup

    <input type="text" id="testInput"> 
    <script type="text/javascript">  
            document.getElementById('testInput').addEventListener('input', function(e){ var value = e.target.value; }); 
    </script>
    18、被点击元素的外观变化,可以使用样式来设定

    -webkit-tap-highlight-color: 颜色
    19、判断软键盘弹出

    android上,当软键盘状态改变的时候,会触发window的resize事件,所以我们可以进入页面的时候保存一次window.innerHeight的值,当window的resize事件触发的时候,比较window.innerHeight的值与前一次保存的window.innerHeight的值大小来判断软键盘的收拢和弹出状态。

     

    var winHeight = window.innerHeight; 
    if (isAndroid) {
         window.addEventListener('resize', function(e) { 
            var tempHeight = window.innerHeight if (tempHeight < winHeight) { 
                bShowRec = false;
             } else { 
                bShowRec = true; 
             } 
          }); 
    };
     

    ios上,软键盘状态改变的时候,不会触发window的resize事件,但是当软键盘的“完成”按钮被点击的时候,会触发onblur事件。所以正常通过onfocus和onblur事件来判断就行。

     

    20、阻止旋转屏幕时自动调整字体大小

    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
     

    21、禁止body滚动

    document.body.ontouchmove=function(e){ e.preventDefault(); }
     

    22.拍照上传

    <input type=file accept="video/*"> <input type=file accept="image/*">
     

    23.安卓手机禁止字体放大js代码

    <span style="font-size:14px;">
     
    * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
     
    * 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示
     
    * 仅供参考
     
    */
     
    (function(){
     
    if (typeof(WeixinJSBridge) == "undefined") {
     
    document.addEventListener("WeixinJSBridgeReady", function (e) {
     
        setTimeout(function(){
     
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
     
                // alert(JSON.stringify(res));
     
            });
     
        },0);
     
    });
     
    } else {
     
        setTimeout(function(){
     
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
     
            // alert(JSON.stringify(res));
     
            });
     
        },0);
     
        }
     
    })();
     
    </span>
    24.iphone手机禁止字体放大,css代码

    body{
     
    -webkit-text-size-adjust: 100% !important;
     
    text-size-adjust: 100% !important;
     
    -moz-text-size-adjust: 100% !important;
     
    }
     

    25.阻止微信浏览器/QQ浏览器长按弹框“在浏览器打开

    这个弹框实际上等同于PC环境下的鼠标右键的弹框,因此只要禁止页面的弹框事件就能完美屏蔽该弹框对我们功能带来的影响。程序代码如下:

    document.οncοntextmenu=function(e){ //或者return false; e.preventDefault(); };
    26.禁用长按选择文字功能

    * { 
        -webkit-touch-callout:none; 
        -webkit-user-select:none; 
        -khtml-user-select:none; 
        -moz-user-select:none; 
        -ms-user-select:none; 
        user-select:none; 
    }
    27.加了禁止长按复制的样式 会让输入框无法聚焦输入文字需要加次样式

    -webkit-user-select:auto;
    28.ios下active没有作用需要加js代码

    document.body.addEventListener('touchstart', function () { //...空函数即可});  
    29.去除select中的小三角

    /*安卓 */
    -webkit-appearance: none; 
    /*select小三角*/
    /*ios*/ 
    background-color:transparent;
    border-color:transparent;
    30.解决H5页面在iOS网页中的数字被识别为电话号码

    <meta name = "format-detection" content = "telephone=no">
    31.禁止双击选中

    onselectstart="return false"
    或者

    body{
        user-select: none;
    }
    32.部分安卓手机圆角失效

    background-clip: padding-box;
    33.根据屏幕大小加载不同js

    <script> 
       var browserWidth = window.innerWidth || document.documentElement.clientWidth ||                 document.body.clientWidth; var script = document.createElement("script");             
     
        if(browserWidth <= 380) {
             script.src = "js/common_small.js" 
        }else{ 
            script.src = "js/common.js" 
        } 
        document.head.appendChild(script); 
     
    </script>
     

    展开全文
  • 关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了。于是乎博主打算另辟蹊径,找找基于微信开发的...

    1、前言

    通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了。关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了。于是乎博主打算另辟蹊径,找找基于微信开发的移动端UI组件,最后找到了微信官方开发的一套前端组件:WeUI。

    2、WeUI基本介绍

    2.1 WeUI概述

    WeUI、微信公众号开发的瑞士军刀。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。有了这个作为基础,我们再也不用担心微信开发的浏览器兼容性问题了,微信官方推出的这个东西拯救了千千万万的开发者!

    jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。

    jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。

    WeUI开源地址:https://github.com/Tencent/weui

    WeUI使用示例:https://weui.io/

    基于jquery的WeUI:http://jqweui.com/(提供了大量的第三方组件库)

    2.2 为什么选择jQuery WeUI

    jQuery WeUI 的定位正如 jQuery 的定位:做一把锋利易用的小刀,而不是做一个笨重的大炮。

    • 简单易用,无上手难度
    • 丰富强大的组件库,并且还在不断完善中
    • 轻量,无限制,可以结合任何主流JS框架使用,比如 Vue, Angular, React
    • 高性能的 CSS3 动画,低端手机上依然可以较流畅运行
    • 详尽完善的官方文档
    • 标准稳定的API,基本可以保证版本透明更新
    • 基于 MIT 协议发布,免费开源

    下面引用几张WeUI官方提供的jQuery WeUI组件展示。
    jQuery WeUI组件展示
    jQuery WeUI组件展示

    3、jQuery WeUI基本用法

    考虑到大家对WeUI组件的使用有忧虑,不知如何下手。下面我就从最基础的开始,手把手教你入门WeUI。已经很熟悉的朋友请直接跳过此段,前往官方网站查看demo。

    1、引用必须的文件

    如果你用的是原始的开发方式,比如基于jQuery的开发,那么你首先需要去Github上面将WeUI的源文件down下来,然后引入到你的项目;如果是基于npm管理组件,使用npm命令的方式引入WeUI组件即可。这里我们使用的是原始的开发方式。如果你只需要WeUI的css样式支持,那么你只需要引入weui.css文件即可;如果除了样式之外,还需要WeUI的js组件支持,那么你还需要引用另外一个包:weui.js。下面先介绍基础的WeUI样式库,先来看看WeUI到底能为我们带来啥,后面再来分享WeUI.js以及jquery.WeUI.js的相关技术。

    要使用WeUI,这里首先必须引入css样式文件

    <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
    

    2、最基础的组件样式

    下面我们以一个最基础的表单来展示WeUI的使用方法,如下我们开发一个个人资料录入的页面效果。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
        <title>个人资料录入</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" /> 
    </head>
    <body>
        <div class="container">
            <div class="page navbar js_show">
                <div class="page__bd">
                    <div class="weui-cells__title">填写个人资料</div>
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="text" placeholder="请输入姓名" />
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">QQ</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="QQ号" />
                            </div>
                        </div>
                        <div class="weui-cell weui-cell_vcode">
                            <div class="weui-cell__hd">
                                <label class="weui-label">手机号</label>
                            </div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="tel" placeholder="请输入手机号" />
                            </div>
                            <div class="weui-cell__ft">
                                <button class="weui-vcode-btn">获取验证码</button>
                            </div>
                        </div>
                        <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="date" value="" />
                            </div>
                        </div>
                        <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="datetime-local" value="" placeholder="" />
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
                            <div class="weui-cell__bd">
                                <div class="weui-cells weui-cells_radio">
                                    <label class="weui-cell weui-check__label" for="x11">
                                        <div class="weui-cell__bd">
                                            <p>男</p>
                                        </div>
                                        <div class="weui-cell__ft">
                                            <input type="radio" class="weui-check" name="radio1" id="x11" />
                                            <span class="weui-icon-checked"></span>
                                        </div>
                                    </label>
                                    <label class="weui-cell weui-check__label" for="x12">
    
                                        <div class="weui-cell__bd">
                                            <p>女</p>
                                        </div>
                                        <div class="weui-cell__ft">
                                            <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked" />
                                            <span class="weui-icon-checked"></span>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="weui-cell">
                            <div class="weui-cell__hd"><label class="weui-label">爱好</label></div>
                            <div class="weui-cell__bd">
                                <div class="weui-cells weui-cells_checkbox">
                                    <label class="weui-cell weui-check__label" for="s11">
                                        <div class="weui-cell__hd">
                                            <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked" />
                                            <i class="weui-icon-checked"></i>
                                        </div>
                                        <div class="weui-cell__bd">
                                            <p>篮球</p>
                                        </div>
                                    </label>
                                    <label class="weui-cell weui-check__label" for="s12">
                                        <div class="weui-cell__hd">
                                            <input type="checkbox" name="checkbox1" class="weui-check" id="s12" />
                                            <i class="weui-icon-checked"></i>
                                        </div>
                                        <div class="weui-cell__bd">
                                            <p>足球</p>
                                        </div>
                                    </label>
                                    <label class="weui-cell weui-check__label" for="s13">
                                        <div class="weui-cell__hd">
                                            <input type="checkbox" name="checkbox1" class="weui-check" id="s13" />
                                            <i class="weui-icon-checked"></i>
                                        </div>
                                        <div class="weui-cell__bd">
                                            <p>游泳</p>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="weui-cell weui-cell_select">
                            <div class="weui-cell__bd">
                                <select class="weui-select" name="select1">
                                    <option selected="" value="1">微信号</option>
                                    <option value="2">QQ号</option>
                                    <option value="3">Email</option>
                                </select>
                            </div>
                        </div>
                        <div class="weui-cell weui-cell_vcode">
                            <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="text" placeholder="请输入验证码" />
                            </div>
                            <div class="weui-cell__ft">
                                <img class="weui-vcode-img"  src="vcode.png" />
                            </div>
                        </div>
                    </div>
                    <div class="weui-btn-area">
                        <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    我们用google浏览器的移动端模式测试效果如下:
    个人资料录入

    代码讲解

    (1)网页上面的<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">这一句必须要有,这个和WeUI无关,是浏览器的显示比例问题。建议各位准备做移动端开发之前可以百度下viewport的含义,这样更容易理解响应式。加这一句是告诉浏览器在不同的设备上面的显示比例问题。

    (2)最外面必须要有一个大的容器div,即上述代码里面的

    这个标签;页面的所有标签必须放在这个里面;

    (3)上述代码里面的radio和checkbox的效果是可以切换的。比如上述代码改下可以将性别这一项变成多选选,爱好这一项变成单选,你只需要将radio和checkbox切换即可。

    4、其他基础组件展示

    4.1、switch开关

    <div class="container" id="container">
        <div class="page navbar js_show">
            <div class="page__bd">
                <div class="weui-cells__title">开关</div>
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_switch">
                        <div class="weui-cell__bd">是否显示</div>
                        <div class="weui-cell__ft">
                            <input class="weui-switch" type="checkbox" />
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_switch">
                        <div class="weui-cell__bd">是否置顶(兼容IE浏览器写法)</div>
                        <div class="weui-cell__ft">
                            <label for="switchCP" class="weui-switch-cp">
                                <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked" />
                                <div class="weui-switch-cp__box"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    switch开关

    4.2、文本框搜索组件

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
        <title>WeUI测试</title>
        <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
        @*<--example.css可以不引用-->*@
        <link rel="stylesheet" href="/Content/weui-master/dist/example/example.css" />
        
    </head>
    <body>
        <div class="container" id="container">
            <div class="page navbar js_show">
                <div class="page__bd">
                    <div class="weui-search-bar" id="searchBar">
                        <form class="weui-search-bar__form" onsubmit="return false;">
                            <div class="weui-search-bar__box">
                                <i class="weui-icon-search"></i>
                                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required />
                                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                            </div>
                            <label class="weui-search-bar__label" id="searchText">
                                <i class="weui-icon-search"></i>
                                <span>搜索</span>
                            </label>
                        </form>
                        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
                    </div>
                    <div class="weui-cells searchbar-result" id="searchResult">
                        
                    </div>
                </div>
            </div>
        </div>
    
        <script src="~/scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
        $(function(){
            var $searchBar = $('#searchBar'),
                $searchResult = $('#searchResult'),
                $searchText = $('#searchText'),
                $searchInput = $('#searchInput'),
                $searchClear = $('#searchClear'),
                $searchCancel = $('#searchCancel');
    
            function hideSearchResult(){
                $searchResult.hide();
                $searchInput.val('');
            }
            function cancelSearch(){
                hideSearchResult();
                $searchBar.removeClass('weui-search-bar_focusing');
                $searchText.show();
            }
    
            $searchText.on('click', function(){
                $searchBar.addClass('weui-search-bar_focusing');
                $searchInput.focus();
            });
            $searchInput
                .on('blur', function () {
                    if(!this.value.length) cancelSearch();
                }).on('keydown', function (event) {
                    if (event.keyCode == 13) {
                        alert("执行搜索");
                    }
                });
            ;
            $searchClear.on('click', function(){
                hideSearchResult();
                $searchInput.focus();
            });
            $searchCancel.on('click', function(){
                cancelSearch();
                $searchInput.blur();
            });
        });
        </script>
    </body>
    </html>
    

    文本框搜索组件

    4.3、正在加载、暂无更多、查看更多效果

    <!DOCTYPE html>
    <html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
        <title>WeUI测试</title>
        <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />
        
    </head>
    <body>
        <div class="container" id="container">
            <div class="page navbar js_show">
                <div class="page__bd">
                    <div class="weui-loadmore">
                        <i class="weui-loading"></i>
                        <span class="weui-loadmore__tips">正在加载</span>
                    </div>
                    <div class="weui-loadmore weui-loadmore_line">
                        <span class="weui-loadmore__tips">暂无数据</span>
                    </div>
                    <div class="weui-panel__ft">
                        <a href="#" style="border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;" class="weui-cell weui-cell_access weui-cell_link">
                            <div class="weui-cell__bd" style="font-size:16px;">查看更多</div>
                            <span class="weui-cell__ft"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    

    正在加载、暂无更多、查看更多效果

    4.4、图片全屏预览

    首先引入必须的样式文件

    <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />      
    <link href="~/Content/jquery-weui-master/dist/css/jquery-weui.css" rel="stylesheet" /> 
    

    在body最后面引入js

    <script src="~/scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Content/jquery-weui-master/dist/js/jquery-weui.min.js"></script>
    <script src="~/Content/jquery-weui-master/dist/js/swiper.js"></script>
    

    需要说明的是这个效果需要jquery-weui.js组件的支持。你需要去down这个组件的dist目录,然后引用dist目录下面的swiper.js文件。这块有问题的可以单独留言。

    引入相关的css与js文件之后,下面就可以开始着手写html了。

    <div class="container" id="container">
        <div class="page navbar js_show">
            <div class="page__bd">
                <div class="weui-btn-area">
                    <a class="weui-btn weui-btn_primary" href="javascript:" id="showQuery">浏览图片</a>
                </div></div>
        </div>
    </div>
    

    js代码初始化

    script type="text/javascript">
            var pb1 = $.photoBrowser({
                items: [
                  "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg",
                  "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg",
                  "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg"
                ]
            });
    
            $('#showQuery').on('click', function () {
                pb1.open();  //打开
            });
    </script>
    

    图片全屏预览
    swiper组件还提供了带图片文字描述的效果,和PC端的焦点图效果一样一样的。我们将上述js代码稍作修改:

    <script type="text/javascript">
        var pb1 = $.photoBrowser({
            items: [
                {
                    image: "/Content/jquery-weui-master/dist/demos/images/swiper-1.jpg",
                    caption: "文字描述1"
                },
                {
                    image: "/Content/jquery-weui-master/dist/demos/images/swiper-2.jpg",
                    caption: "文字描述2"
                },
                {
                    image: "/Content/jquery-weui-master/dist/demos/images/swiper-3.jpg",
                    caption: "文字描述3"
                }
            ]
        });
    
        $('#showQuery').on('click', function () {
            pb1.open();  //打开
        });
    </script>
    

    图片全屏预览1
    swiper组件的应用有很多可供参考的使用方式,大家可根据实际自行扩展。

    5、微信开发系列文章列表

    参考文章

    微信公众平台技术文档-官方

    Senparc.Weixin SDK + 官网示例源代码

    RDIFramework.NET — 基于.NET的快速信息化系统开发框架 — 系列目录

    RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介绍

    RDIFramework.NET框架SOA解决方案(集Windows服务、WinForm形式与IIS形式发布)-分布式应用

    RDIFramework.NET代码生成器全新V3.5版本发布-重大升级


    一路走来数个年头,感谢RDIFramework.NET框架的支持者与使用者,大家可以通过下面的地址了解详情。

    RDIFramework.NET官方网站:http://www.rdiframework.net/

    RDIFramework.NET官方博客:http://blog.rdiframework.net/

    同时需要说明的,以后的所有技术文章以官方网站为准,欢迎大家收藏!

    RDIFramework.NET框架由专业团队长期打造、一直在更新、一直在升级,请放心使用!

    欢迎关注RDIFramework.net框架官方公众微信(微信号:guosisoft),及时了解最新动态。

    扫描二维码立即关注
    微信号:guosisoft

    展开全文
  • 开发过程碰到一个问题,首次安装后跳转到服务端的页面需要加载css和js缓存,而这个过程可能需要耗时数秒钟,如果直接展示一个空白页的话用户体验不好。所以打算给这个壳的index页面加一个懒加载效果,但是由于使用...

    最近在开发一个WebApp,思路很简单,就是用Hbuild做一个移动端的壳,再从这个壳跳转到服务端的页面(使用location.href,存在跨域)
    开发过程中碰到一个问题,首次安装后跳转到服务端的页面需要加载css和js缓存,而这个过程可能需要耗时数秒钟,如果直接展示一个空白页的话用户体验不好。所以打算给这个壳的index页面加一个懒加载效果,但是由于使用location.href,跳转过程中大部分的动态效果(css跟动图)都处于卡顿状态,给人的感官极差。最后想了个折中的方案,通过iframe内嵌跳转页面,加载完成再进行展示,代码如下:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="HandheldFriendly" content="True">
    <title>welcome</title>
    <link rel="stylesheet" href="css/materialize.css">
    <script src="js/jquery.min.js"></script>
    <style>
    body {
     margin: 0px;
     }
    iframe {
    border: 0px;
    }
    </style>
    </head>
    <body scroll="no">
    <div class="container" id="container">
    	<div class="section" style="padding-top: 10rem;">
    	
    	  <div class="row">
    	    <div class="col s12 m4">
    	    </div>
    	
    	    <div class="col s12 m4">
    	      <div class="icon-block">
    				<h2 class="center light-blue-text"><img src="img/profile.gif" alt="" class="z-depth-5" style="border-radius:0px;border: 0;width: 150px;    height: 150px;"></h2>
    				<p class="center light">Just a moment......</p>
    	      </div>
    	    </div>
    	
    	    <div class="col s12 m4">
    	    </div>
    	  </div>
    	
    	</div>
    </div>
    
    <!--style="visibility: hidden"-->
    <iframe id="iframe" name="iframe" frameborder="0" style="visibility: hidden" width="100%" height="100%" scrolling="auto"
    src="http://134.175.153.50/trunk/index"></iframe> 
    </body>
    	<script type="text/javascript">
    		$(function () {
    			$("#iframe").load(function () {
    				this.style.height=document.body.clientHeight;
    				if($("#iframe").is(':visible')){
    					$("#container").remove();
    					$("#iframe").css("visibility","");
    				}
    			});
    		});
    	</script>
    </html>
    

    直接使用Hbuild开发前端页面就不会出现这类问题,但是由于目前项目还未改造成前后端分离的结构,所以只能采用这种写法

    展开全文
  • 微信网页开发中使用 WeUI,有如下优势: 同微信客户端一致的视觉效果,令所有微信用户都能更容易地使用你的网站便捷获取快速使用,降低开发和设计成本微信设计团队精心打造,清晰明确,简洁大方
  • 背景:Vue+Echarts+mintUI开发移动端app 问题:Echarts图表在IOS端懒加载多个时出现闪退 问题分析: 频繁操作App直到闪退出现,监控内存使用情况后发现,在操作过程内存一直升高,到600M时软件闪退; 考虑从两...
  • 关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了。于是乎博主打算另辟蹊径,找找基于微信开发的...
  • 学会一项开发技能最快的步骤就是:准备,开火,瞄准。最慢的就是:准备,瞄准,瞄准,瞄准…… 因为微信小程序比较简单,直接开撸就行,千万别瞄准。 于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了...
  • 本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库...
  • 微信团队已于2017年06月09日正式开源了微信自用的移动端数据库组件 WCDB(WeChat Database),详见《[资讯] 微信正式开源移动端数据库组件WCDB!》。 WCDB是微信终端的第三个开源项目。至此,微信分享出去的...
  • 项目需要建设微信公众号平台,平台需要用地图做一些展示功能,考虑使用开源地图框架openlayers5,将相关问题做简要记录。 通过百度地图控制中心申请百度地图浏览器端token(备用)。 1、首先测试地图加载和...
  •  明确下我们要做的微信公众号开发,服务器的环境我们使用java环境,框架为 springmvc+mybatis,说好的微信开发怎么变成了java环境了呢?  说了好多的废话,其实微信开发 java能做的事情很少,但是所做的事情是...
  • 乐帝目前实习单位属于招聘服务提供方,面向的都是企业方,没有互联网公司一掷千金的豪气,体现在开发项目上,有的项目没有原型、UI,整个项目开发过程,就是前后端“脑补”的过程,而这个过程是非常考验工程师理解力...
  • 开发微信小程序

    2018-11-29 15:49:48
    微信小程序、是微信官方继服务号、企业号、订阅号...该课程属于微信小程序开发入门教程,主要面向所有开发人员,包括微信小程序背景介绍、基础与进阶、UI设计与开发微信API的使用与详解、阶段案例和完整项目实战。
  • 公司最近开发了一款APP,是H5+Android混合模式开发的,将web移动端应用封装到了APP。 完成之后,想要再将web移动端应用做成微信小程序,查看了微信小程序开发文档,发现开发微信小程序也是有一套特定的语言,...
  • 前段时间接手一个别人的移动端项目,因为没有做横屏样式也没有提示用户关掉手机横屏,每当用户手机开启横屏模式时,会造成页面样式的混乱。方法一:利用CSS3 @media 媒体检测横竖屏orientation:portrait 竖屏...
  • 框架选型是vue,这篇文章也是在花费两个月的时间,项目一期完成之后得空进行的一片总结性文章,其中包括通用的移动端开发的坑以及vue在移动端开发特有的一些坑,本博文目的也是为了让小伙伴们以后在开发移动端的时候...
  • 比如只有我打开了“宝石”菜单才会显示宝石的图像,如果是需要显示的时候才加载, 会对用户体验大打折扣,假如用户的手机信号不太好,那么点击菜单将一片空白, 这不是我们希望的效果,只有一种情况是临时加载...
  • 微信小程序的开发,是当前移动端开发的重点,随着这么多年微信小程序的发展,也基本进入到了一个相对稳定的状态,大家当前不紧紧对功能要求更高了,对性能的要求也是越来越高,那么微信小程序的性能优化就是当前的...
1 2 3 4 5 ... 20
收藏数 6,809
精华内容 2,723
关键字:

微信开发中 移动端数据懒加载