HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

matchUrls配置 - wap2app教程

matchurls 教程 wap2app

我们知道,在sitemap.json中,每一个页面集合配置内容如下:

{  
    "webviewId": "page1",  
    "matchUrls": [],//page1页面链接匹配规则  
    "webviewParameter":{  
        //page1原生增强实现  
    },  
    "easyConfig":{  
        // 简化配置  
    }  
}   

如何实现将同类型页面组合为一个页面集合,共享同样的增强方案,其实就是通过 matchUrls节点实现的,本文重点讲解matchUrls配置。

matchUrls:页面链接匹配规则集合,类型为Array,满足数组中任一项匹配条件,即可使用当前页面配置,故值域为[matchurl1,matchurl2...],对应到json文件中即为如下格式:

    "matchUrls": [  
        {  
            //url匹配规则1  
        }, {  
            //url匹配规则2  
        }  
    ]

简单示例

一个最简单的匹配规则如下:

    "matchUrls": [  
        {  
            "href": "http://ask.dcloud.net.cn/article/12731"  
        }  
    ]

可以看出一条匹配规则,由2部分构成。
"href"是第一部分,即匹配依据;
"http://ask.dcloud.net.cn/article/12731"是第二部分,即匹配值表达式。这里表达的意思其实是全字符串精确匹配且值为http://ask.dcloud.net.cn/article/12731。
但wap2app框架提供了很多强大匹配工具,除了href还有很多匹配依据选择。以及匹配值表达式也不止简单的全字符串匹配。
下面分2个章节分别介绍。

选择匹配依据

除了完整url匹配外,wap2app框架还提供了hostname、pathname、search、hash等多种匹配依据选择。这些概念的来源是js里的window.location返回的Locaton对象,该对象包含hostname等属性,分别解析了一个完整的url。
规则说明如下:

  • href:页面完整url,类型为String,可选,与window.location.href进行比较
  • hostname:域名信息,类型为String,可选,与window.location.hostname进行比较
  • pathname:路径信息,类型为String,可选,与window.location.pathname进行比较
  • search:查询字符串,类型为String,可选,与window.location.search进行比较
  • hash:锚点信息,类型为String,可选,与window.location.hash进行比较

例如url:“http://ask.dcloud.net.cn/article/12731?canshu=123#maodian1”,在浏览器打开本url,并在调试控制台敲window.location,可以看到如下结果:

  • href="http://ask.dcloud.net.cn/article/12731"
  • hostname="ask.dcloud.net.cn"
  • pathname="/article/12731"
  • search="?canshu=123"
  • hash="#maodian1"

(String类型,最终值并不包含引号)

也就是说如下匹配规则,也能匹配到本url

    "matchUrls": [  
        {  
            "pathname": "/article/12731"  
        }  
    ]

设置匹配值表达式

选择好匹配依据后,第二步就是设置匹配值表达式。
上文中看到的简单字符串全文匹配,我们称之为精确匹配,除此之外,wap2app还提供了正则匹配和通配符匹配模式。
matchUrl的每个匹配依据(href、pathname...)均支持三种匹配模式:精确匹配、正则匹配、通配符匹配:

  • 默认为精确匹配,即字符串完全相等才匹配,如"/article/12731.html"
  • 正则匹配:以"REGEX:"为前缀,可简写为"R:",后跟正则字符串,如"REGEX:/\/article\/\d+.html$/ "
  • 通配符匹配:以"WILDCARD:"为前缀,可简写为"W:",后跟通配符,如“WILDCARD:/article/*.html”

可以看出,匹配值表达式也是由2部分组成,以冒号为分割符。冒号前为匹配模式,冒号后为具体值。
而精确匹配时,可以省略不写匹配模式。

精确匹配模式

默认匹配模式,无前缀,仅当匹配项完全等于对比字符串时,才满足条件,例如:

    "pathname":"/login"

如上规则,仅当页面的pathname完全等于'/login'时才会匹配,测试结果如下:

    http://www.example.com/login   //匹配成功  
    http://www.example.com/login/  //匹配失败,pathname为'/login/',最后多了一个'/'

正则匹配模式

正则表达式是一个强大的工具,可以匹配字符串中字符的各种组合模式。如资讯站点有1000篇资讯内容,其页面链接地址分别为:

    http://m.example.com/detail/1.html  
    http://m.example.com/detail/2.html  
    ....  
    http://m.example.com/detail/1000.html

通过正则表达式可以简单匹配所有资讯内容页面链接,在JavaScript语言中,如下两种方式创建的正则表达式均可实现需求:

    /\/detail\/\d+\.html$/   //正则表达值字面量,/pattern/模式

或者

    new RegExp("\/detail\/\d+\.html$") //调用RegExp对象的构造函数

但sitemap.json是一个json格式的文件,在json文件中,值域只能是字符串、数字等简单类型,不支持写任何Javascript代码,故如下两种创建正则表达式的方式均无效:

    "hostname":/pattern/  //正则表达式字面量  
    "pathname":new RegExp(pattern)    //调用RegExp对象的构造函数

为了解决这个问题,sitemap.json定义"REGEX:"或"R:"开头的字符串,表示后续字符串为正则匹配表达式。而Javascript字符串中部分字符有特殊含义,需要使用"\"反斜杠进行转义,而正则中需转义的字符也是通过"\"反斜杠进行转义(例如"\d"),此时就需要变成"\\"双反斜杠。

举个例子,若要匹配"/login"这个字符串

  • JavaScript中正则表达式pattern的写法应该是"\/login",第一个"\"表示正则转义,将其后的特殊字符"/"转义为字面量"/",从而匹配"/login"字符串开头的"/";
  • 而在sitemap.json中,则需要写成"REGEX:\\/login",第一个"\"表示字符串的转义,第二个"\"表示正则表达式中的"\",真实进行正则匹配时再执行转义功能

简单总结,就是正则表达式中的单反斜杠(\),在sitemap.json中全部需要变成双反斜杠(\\)

正则表达式的规则参考JavaScript指南 - 正则表达式

通配符匹配模式

正则表达式虽然强大,但学习成本略高,阅读也不直观。wap2app提供了通配符匹配模式,这种简单的模式可以解决绝大部分的url匹配需求。
它类似一种简化的正则匹配,通过有限的特殊符号来实现批量适配的目的,以"WILDCARD:"为前缀,亦可简写为"W:";wap2app目前支持如下四种通配符:

  • *:星号,匹配零个或多个任意字符,例如"WILDCARD:a*c",可以匹配"ac"、"abc"、"abdc";
  • ?:问号,匹配任何单个字符,类似一个占位符,例如"WILDCARD:a?c",可以匹配"abc"、"adc",但不匹配"ac"、"abdc";
  • [0+]:匹配任何数字,例如"WILDCARD:detail/[0+].html",可以匹配"detail/1.html"和"detail/1024.html",但不匹配"detail/a.html"
  • [a|b|c]:匹配a或b或c,是一个字符串值域选择匹配,例如"WILDCARD:[green|red]_list.html"可以匹配"green_list.html"和"red_list.html"

注意:通配符无需转义。
如果觉得WILDCARD敲起来太长,可以简写为W。
下面给一个例子,一个网站的item目录下放置详情页面,有1.html到1000.html,而1.html又分页产生了1_2.html、1_3.html。那么matchUrl规则如下:

            "matchUrls": [  
                {  
                    "pathname": "W:/item/[0+]"  
                },  
                {  
                    "pathname": "W:/item/[0+]_[0+]"  
                }  
            ]

多条匹配规则同时设置的关系

matchUrl的属性值均为可选,但至少要求配置一个属性,wap2app仅对配置的matchUrl属性值进行比较,未配置的属性不参与比较;若在一个matchUrl对象中配置了多个属性值,则每个属性值均需满足匹配条件,页面链接才算匹配。
如下为一个示例:

    {  
        "pathname":"/"  //仅匹配pathname,且当pathname == "/"时生效  
    }

如上规则可以同时匹配如下两个页面链接:

    http://m.example.com/  //匹配成功  
    http://touch.example.com/  //匹配成功

但如下匹配规则则不同:

    {  
        "hostname":"m.example.com"  //匹配hostname  
        "pathname":"/"  //匹配pathname  
    }

如上规则,同样页面链接测试结果如下:

    http://m.example.com/  //匹配成功  
    http://touch.example.com/  //匹配失败,因为该规则同时配置了`hostname`的匹配条件

验证匹配结果

写的匹配规则对不对?可以在HBuilder的真机运行时通过控制台日志确认。

注意:若要查看HBuilder运行日志,需要先在app.js中开启调试模式,如下:

App({  
    options: {  
        debug: true //设置为true,表示开启调试模式,可以在HBuilder控制台查看wap2app的运行日志  
    },  
    //其它代码  
    ....  
});   

HBuilder里插上手机,对wap2app项目点运行-选择真机,会在手机上启动你编写的项目,并在HBuilder控制台打印出wap2app日志。
当你点击手机上一个页面时,是否被匹配到,可以在控制台看结果。日志截图如下:

上图中,打开的第一个页面链接,成功匹配"page1"的webview配置,故会显示

    [W2A][page1]:webview.show

第二个页面链接未匹配任何webview配置,故以"__W2A_WEBVIEWID"+随机数作为新webview的id,如下:

    [W2A][__W2A_WEBVIEW_ID_0.7765246680937707]:webview.show

matchUrl并不复杂,通过wap2app的强大工具,开发者可以快速把url和Webview的映射关系建立起来。
下一步就是学习如何利用webviewParameter来增强体验

如果开发者的实际网站页面非常多,全配好再开始优化可能会推迟成就感到来,也可以先配几个页面,就真机运行起来。边做边体验效果。

继续阅读 »

我们知道,在sitemap.json中,每一个页面集合配置内容如下:

{  
    "webviewId": "page1",  
    "matchUrls": [],//page1页面链接匹配规则  
    "webviewParameter":{  
        //page1原生增强实现  
    },  
    "easyConfig":{  
        // 简化配置  
    }  
}   

如何实现将同类型页面组合为一个页面集合,共享同样的增强方案,其实就是通过 matchUrls节点实现的,本文重点讲解matchUrls配置。

matchUrls:页面链接匹配规则集合,类型为Array,满足数组中任一项匹配条件,即可使用当前页面配置,故值域为[matchurl1,matchurl2...],对应到json文件中即为如下格式:

    "matchUrls": [  
        {  
            //url匹配规则1  
        }, {  
            //url匹配规则2  
        }  
    ]

简单示例

一个最简单的匹配规则如下:

    "matchUrls": [  
        {  
            "href": "http://ask.dcloud.net.cn/article/12731"  
        }  
    ]

可以看出一条匹配规则,由2部分构成。
"href"是第一部分,即匹配依据;
"http://ask.dcloud.net.cn/article/12731"是第二部分,即匹配值表达式。这里表达的意思其实是全字符串精确匹配且值为http://ask.dcloud.net.cn/article/12731。
但wap2app框架提供了很多强大匹配工具,除了href还有很多匹配依据选择。以及匹配值表达式也不止简单的全字符串匹配。
下面分2个章节分别介绍。

选择匹配依据

除了完整url匹配外,wap2app框架还提供了hostname、pathname、search、hash等多种匹配依据选择。这些概念的来源是js里的window.location返回的Locaton对象,该对象包含hostname等属性,分别解析了一个完整的url。
规则说明如下:

  • href:页面完整url,类型为String,可选,与window.location.href进行比较
  • hostname:域名信息,类型为String,可选,与window.location.hostname进行比较
  • pathname:路径信息,类型为String,可选,与window.location.pathname进行比较
  • search:查询字符串,类型为String,可选,与window.location.search进行比较
  • hash:锚点信息,类型为String,可选,与window.location.hash进行比较

例如url:“http://ask.dcloud.net.cn/article/12731?canshu=123#maodian1”,在浏览器打开本url,并在调试控制台敲window.location,可以看到如下结果:

  • href="http://ask.dcloud.net.cn/article/12731"
  • hostname="ask.dcloud.net.cn"
  • pathname="/article/12731"
  • search="?canshu=123"
  • hash="#maodian1"

(String类型,最终值并不包含引号)

也就是说如下匹配规则,也能匹配到本url

    "matchUrls": [  
        {  
            "pathname": "/article/12731"  
        }  
    ]

设置匹配值表达式

选择好匹配依据后,第二步就是设置匹配值表达式。
上文中看到的简单字符串全文匹配,我们称之为精确匹配,除此之外,wap2app还提供了正则匹配和通配符匹配模式。
matchUrl的每个匹配依据(href、pathname...)均支持三种匹配模式:精确匹配、正则匹配、通配符匹配:

  • 默认为精确匹配,即字符串完全相等才匹配,如"/article/12731.html"
  • 正则匹配:以"REGEX:"为前缀,可简写为"R:",后跟正则字符串,如"REGEX:/\/article\/\d+.html$/ "
  • 通配符匹配:以"WILDCARD:"为前缀,可简写为"W:",后跟通配符,如“WILDCARD:/article/*.html”

可以看出,匹配值表达式也是由2部分组成,以冒号为分割符。冒号前为匹配模式,冒号后为具体值。
而精确匹配时,可以省略不写匹配模式。

精确匹配模式

默认匹配模式,无前缀,仅当匹配项完全等于对比字符串时,才满足条件,例如:

    "pathname":"/login"

如上规则,仅当页面的pathname完全等于'/login'时才会匹配,测试结果如下:

    http://www.example.com/login   //匹配成功  
    http://www.example.com/login/  //匹配失败,pathname为'/login/',最后多了一个'/'

正则匹配模式

正则表达式是一个强大的工具,可以匹配字符串中字符的各种组合模式。如资讯站点有1000篇资讯内容,其页面链接地址分别为:

    http://m.example.com/detail/1.html  
    http://m.example.com/detail/2.html  
    ....  
    http://m.example.com/detail/1000.html

通过正则表达式可以简单匹配所有资讯内容页面链接,在JavaScript语言中,如下两种方式创建的正则表达式均可实现需求:

    /\/detail\/\d+\.html$/   //正则表达值字面量,/pattern/模式

或者

    new RegExp("\/detail\/\d+\.html$") //调用RegExp对象的构造函数

但sitemap.json是一个json格式的文件,在json文件中,值域只能是字符串、数字等简单类型,不支持写任何Javascript代码,故如下两种创建正则表达式的方式均无效:

    "hostname":/pattern/  //正则表达式字面量  
    "pathname":new RegExp(pattern)    //调用RegExp对象的构造函数

为了解决这个问题,sitemap.json定义"REGEX:"或"R:"开头的字符串,表示后续字符串为正则匹配表达式。而Javascript字符串中部分字符有特殊含义,需要使用"\"反斜杠进行转义,而正则中需转义的字符也是通过"\"反斜杠进行转义(例如"\d"),此时就需要变成"\\"双反斜杠。

举个例子,若要匹配"/login"这个字符串

  • JavaScript中正则表达式pattern的写法应该是"\/login",第一个"\"表示正则转义,将其后的特殊字符"/"转义为字面量"/",从而匹配"/login"字符串开头的"/";
  • 而在sitemap.json中,则需要写成"REGEX:\\/login",第一个"\"表示字符串的转义,第二个"\"表示正则表达式中的"\",真实进行正则匹配时再执行转义功能

简单总结,就是正则表达式中的单反斜杠(\),在sitemap.json中全部需要变成双反斜杠(\\)

正则表达式的规则参考JavaScript指南 - 正则表达式

通配符匹配模式

正则表达式虽然强大,但学习成本略高,阅读也不直观。wap2app提供了通配符匹配模式,这种简单的模式可以解决绝大部分的url匹配需求。
它类似一种简化的正则匹配,通过有限的特殊符号来实现批量适配的目的,以"WILDCARD:"为前缀,亦可简写为"W:";wap2app目前支持如下四种通配符:

  • *:星号,匹配零个或多个任意字符,例如"WILDCARD:a*c",可以匹配"ac"、"abc"、"abdc";
  • ?:问号,匹配任何单个字符,类似一个占位符,例如"WILDCARD:a?c",可以匹配"abc"、"adc",但不匹配"ac"、"abdc";
  • [0+]:匹配任何数字,例如"WILDCARD:detail/[0+].html",可以匹配"detail/1.html"和"detail/1024.html",但不匹配"detail/a.html"
  • [a|b|c]:匹配a或b或c,是一个字符串值域选择匹配,例如"WILDCARD:[green|red]_list.html"可以匹配"green_list.html"和"red_list.html"

注意:通配符无需转义。
如果觉得WILDCARD敲起来太长,可以简写为W。
下面给一个例子,一个网站的item目录下放置详情页面,有1.html到1000.html,而1.html又分页产生了1_2.html、1_3.html。那么matchUrl规则如下:

            "matchUrls": [  
                {  
                    "pathname": "W:/item/[0+]"  
                },  
                {  
                    "pathname": "W:/item/[0+]_[0+]"  
                }  
            ]

多条匹配规则同时设置的关系

matchUrl的属性值均为可选,但至少要求配置一个属性,wap2app仅对配置的matchUrl属性值进行比较,未配置的属性不参与比较;若在一个matchUrl对象中配置了多个属性值,则每个属性值均需满足匹配条件,页面链接才算匹配。
如下为一个示例:

    {  
        "pathname":"/"  //仅匹配pathname,且当pathname == "/"时生效  
    }

如上规则可以同时匹配如下两个页面链接:

    http://m.example.com/  //匹配成功  
    http://touch.example.com/  //匹配成功

但如下匹配规则则不同:

    {  
        "hostname":"m.example.com"  //匹配hostname  
        "pathname":"/"  //匹配pathname  
    }

如上规则,同样页面链接测试结果如下:

    http://m.example.com/  //匹配成功  
    http://touch.example.com/  //匹配失败,因为该规则同时配置了`hostname`的匹配条件

验证匹配结果

写的匹配规则对不对?可以在HBuilder的真机运行时通过控制台日志确认。

注意:若要查看HBuilder运行日志,需要先在app.js中开启调试模式,如下:

App({  
    options: {  
        debug: true //设置为true,表示开启调试模式,可以在HBuilder控制台查看wap2app的运行日志  
    },  
    //其它代码  
    ....  
});   

HBuilder里插上手机,对wap2app项目点运行-选择真机,会在手机上启动你编写的项目,并在HBuilder控制台打印出wap2app日志。
当你点击手机上一个页面时,是否被匹配到,可以在控制台看结果。日志截图如下:

上图中,打开的第一个页面链接,成功匹配"page1"的webview配置,故会显示

    [W2A][page1]:webview.show

第二个页面链接未匹配任何webview配置,故以"__W2A_WEBVIEWID"+随机数作为新webview的id,如下:

    [W2A][__W2A_WEBVIEW_ID_0.7765246680937707]:webview.show

matchUrl并不复杂,通过wap2app的强大工具,开发者可以快速把url和Webview的映射关系建立起来。
下一步就是学习如何利用webviewParameter来增强体验

如果开发者的实际网站页面非常多,全配好再开始优化可能会推迟成就感到来,也可以先配几个页面,就真机运行起来。边做边体验效果。

收起阅读 »

h5+ app 视频教程汇总,最近更新 node.js 教程、电商实战教程


知识点 : HTML 5 开发教程【免费】
知识点 : mui 全套教程、 H5+ 沉浸式状态栏详解 、h5+ 地图api【免费】
实战 : HUI APP实战教程 - 仿《京东优选》电商项目 【收费】
知识点 : JavaScript 快速提高视频教程【免费】
实战: MUI、H5 APP 实战教程 - 仿《有道词典》【收费】
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触【免费】
知识点 : APP开发教程 - 启动动画【免费】
知识点 : APP开发实例教程 - 窗口切换【免费】
知识点 : 移动端图片剪裁、上传视频教程【免费】
知识点 : app开发教程-用户注册、登录【免费】
实战 : APP开发实战 - 新闻客户端【免费】

教程地址
http://www.hcoder.net/course/index/cate/4

继续阅读 »


知识点 : HTML 5 开发教程【免费】
知识点 : mui 全套教程、 H5+ 沉浸式状态栏详解 、h5+ 地图api【免费】
实战 : HUI APP实战教程 - 仿《京东优选》电商项目 【收费】
知识点 : JavaScript 快速提高视频教程【免费】
实战: MUI、H5 APP 实战教程 - 仿《有道词典》【收费】
知识点 : HBuilder 8.0.1 APP开发 - 新功能全接触【免费】
知识点 : APP开发教程 - 启动动画【免费】
知识点 : APP开发实例教程 - 窗口切换【免费】
知识点 : 移动端图片剪裁、上传视频教程【免费】
知识点 : app开发教程-用户注册、登录【免费】
实战 : APP开发实战 - 新闻客户端【免费】

教程地址
http://www.hcoder.net/course/index/cate/4

收起阅读 »

给dcloud所开发者足够的信心之——android和ios成功上线!

上架

严重声明:本贴非软文贴,信不信由你!

很多人问:hbuilder开发的app能否上架android?能否上架ios?

本人亲身使用hbuilder开发了一款APP,历时足足一年时间,前端使用mui框架、zepto、msui;android和ios打包都是使用hbuilder在线打包,现android和ios均已成功上架;

下面简单讲一下ios上架:
IOS上架,我认为比android市场更方便、根本没有用户所想的那么麻烦(严格按照苹果流程就没有问题),只要记住以下几点,上架100%没有问题:
1、产品本身开发的体验足够好;
2、产品不涉及抄袭;
3、在应用内的支付环节,如果涉及到支付,必须提供两个[含]以上第三方支付平台,否则通不过审核;如果使用wap支付,必须转到safari浏览器来完成,否则通不过审核,切记!
4、个人亲身开发经验:能不用第三方sdk,就不要用,把第三方sdk去除,能用h5完成的,就不要用sdk!

以上,欢迎指正!

dcloud仍需加油努力!将产品的核心功能做到万无一失!

继续阅读 »

严重声明:本贴非软文贴,信不信由你!

很多人问:hbuilder开发的app能否上架android?能否上架ios?

本人亲身使用hbuilder开发了一款APP,历时足足一年时间,前端使用mui框架、zepto、msui;android和ios打包都是使用hbuilder在线打包,现android和ios均已成功上架;

下面简单讲一下ios上架:
IOS上架,我认为比android市场更方便、根本没有用户所想的那么麻烦(严格按照苹果流程就没有问题),只要记住以下几点,上架100%没有问题:
1、产品本身开发的体验足够好;
2、产品不涉及抄袭;
3、在应用内的支付环节,如果涉及到支付,必须提供两个[含]以上第三方支付平台,否则通不过审核;如果使用wap支付,必须转到safari浏览器来完成,否则通不过审核,切记!
4、个人亲身开发经验:能不用第三方sdk,就不要用,把第三方sdk去除,能用h5完成的,就不要用sdk!

以上,欢迎指正!

dcloud仍需加油努力!将产品的核心功能做到万无一失!

收起阅读 »

H5+/HTML5Plus集成第三方插件(安卓版)——以小能客服插件集成为例

源码分享 技术分享 5+sdk 插件开发

实在懒得重新编辑,而且dcloud这里的编辑器还不尽人意,需要的可移步简书。

http://www.jianshu.com/p/221e1979a276

实在懒得重新编辑,而且dcloud这里的编辑器还不尽人意,需要的可移步简书。

http://www.jianshu.com/p/221e1979a276

关于ajax发起跨域请求问题

跨域请求

在H5+开发APP的过程中,避免不了遇到跨域问题,笔者在本次开发过程中,遇到跨域问题,足足困扰了我2天的时间,一直解决不了,毫无头绪。
接下来记录一下这次解决跨域问题的过程:
一、H5+ APP开发,APP所运行的环境和服务器所在环境不在同一域,所以第一步设置服务器端返回头文件为:response.setHeader("Access-Control-Allow-Origin", "*"); 即允许所有的请求访问,如果只针对某一个地址访问,可以设置为:response.setHeader("Access-Control-Allow-Origin", "http://xxx.xx.com"); 后面的地址即为被允许通过访问的地址。一般情况下,在服务器端设置该属性后,就可以允许跨域请求了,然而对于菜鸟的笔者来说,这仅仅是问题的开始。
二、服务器端设置允许跨域请求后,现在请求确实能够达到服务器,能够处理逻辑返回数据到前端了,但是这时问题来了,请求返回状态码明明是200,但是ajax请求死活不执行success回调,一直跑去error中,仔细检查了datatype和服务器端的对应情况,响应过来的数据确实是json,datatype设置为json,也没用,在一个问题上弄了半天没弄出来的我,考虑一下换个脑子,使用一下H5+的XMLHttpRequest跨域请求方式,于是花了一点时间去研究一下这个XMLHttpRequest。
三、查阅了H5+提供的XMLHttpRequest的文档后,写出了如下代码:
function xhrPostRequest(url,params) {
var xhr = new XMLHttpRequest();
url = "http://foney.4kb.cn/LoveSpaceServer" + url;
var data = null;
console.log("请求开始");
if (xhr) {
xhr.open('GET', url);
xhr.onreadystatechange = function(e){
switch ( xhr.readyState ) {
case 0:
console.log( "xhr请求已初始化" );
break;
case 1:
console.log( "xhr请求已打开" );
break;
case 2:
console.log( "xhr请求已发送" );
break;
case 3:
console.log( "xhr请求已响应");
break;
case 4:
console.log( "xhr请求已完成" + xhr.status);
if (xhr.status == 200) {
var data = xhr.responseBody;
console.log( "结果:" + data);
} else if(xhr.status == 500) {
console.log( "服务器端异常。" + xhr.status);
}
else {
console.log( "不允许跨域请求。" + xhr.status);
}
break;
default :
break;
}
};
xhr.timeout = 10000;
xhr.responseType = 'text';
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(params);
} else {
console.log("xhr创建失败");
}
return data;
}
然而可恨的是,这串代码在浏览器中可以满足跨域请求数据,在APP中依然得不到想要的结果,问题依旧是:status=200,readyState 变为了0,但是在研究XMLHttpRequest的过程中发现,其实ajax是对XMLHttpRequest的封装,所以学习XMLHttpRequest也得到了相应的收获,接下来问题还是没解决,我只得先休息一会儿,玩一下游戏,放空一下脑子。
四、我重新回到ajax的问题上,现在来重新认识ajax,对各个属性进行解读,贴出代码:
$.ajax({
type: 'POST',
async: false,
url: "http://foney.4kb.cn/LoveSpaceServer/login/getValidateCode",
data: {
'phone':'18286006010',
'type':1
},
dataType:'json',
success: function(data){
console.log(data.msg);
},
error:function(e){
console.log("error:" + e.status + e.readyState + e.response);
}
});
type:请求方式,有POST、GET两种方式
url:服务器请求地址
data:传到服务器地址
dataType:服务器返回数据类型,这里一定要注意,服务器返回的数据类型,必须得相对应,如果只是字符串,则填写text,如果是json数据,则需要写成json,并且json格式一定要和官方给出的json格式一样。
success:ajax请求成功回调函数,这里为什么没写成服务器请求成功回调,是因为,有时候,就算服务器请求成功了,也未必能够回调到success里面,比如说dataType数据类型不对应。
error:ajax请求失败回调函数,
接下来的这个属性就是 async,这个属性就是这次我在跨域请求过程中的痛点,起初的时候我并没有管他,因为ajax请求默认就为异步,所以默认情况下,async为true ,现在说一下这个属性的作用:
async:false 同步请求,只有等服务器响应后才会执行接下来的js代码逻辑;
async:true 异步请求,在执行Ajax代码时,不会立即请求服务器,而是等js代码逻辑执行完后,再去请求服务器,服务器返回的结果在回调函数中继续处理。
所以跨域请求中必须把async设置为同步。问题解决。

继续阅读 »

在H5+开发APP的过程中,避免不了遇到跨域问题,笔者在本次开发过程中,遇到跨域问题,足足困扰了我2天的时间,一直解决不了,毫无头绪。
接下来记录一下这次解决跨域问题的过程:
一、H5+ APP开发,APP所运行的环境和服务器所在环境不在同一域,所以第一步设置服务器端返回头文件为:response.setHeader("Access-Control-Allow-Origin", "*"); 即允许所有的请求访问,如果只针对某一个地址访问,可以设置为:response.setHeader("Access-Control-Allow-Origin", "http://xxx.xx.com"); 后面的地址即为被允许通过访问的地址。一般情况下,在服务器端设置该属性后,就可以允许跨域请求了,然而对于菜鸟的笔者来说,这仅仅是问题的开始。
二、服务器端设置允许跨域请求后,现在请求确实能够达到服务器,能够处理逻辑返回数据到前端了,但是这时问题来了,请求返回状态码明明是200,但是ajax请求死活不执行success回调,一直跑去error中,仔细检查了datatype和服务器端的对应情况,响应过来的数据确实是json,datatype设置为json,也没用,在一个问题上弄了半天没弄出来的我,考虑一下换个脑子,使用一下H5+的XMLHttpRequest跨域请求方式,于是花了一点时间去研究一下这个XMLHttpRequest。
三、查阅了H5+提供的XMLHttpRequest的文档后,写出了如下代码:
function xhrPostRequest(url,params) {
var xhr = new XMLHttpRequest();
url = "http://foney.4kb.cn/LoveSpaceServer" + url;
var data = null;
console.log("请求开始");
if (xhr) {
xhr.open('GET', url);
xhr.onreadystatechange = function(e){
switch ( xhr.readyState ) {
case 0:
console.log( "xhr请求已初始化" );
break;
case 1:
console.log( "xhr请求已打开" );
break;
case 2:
console.log( "xhr请求已发送" );
break;
case 3:
console.log( "xhr请求已响应");
break;
case 4:
console.log( "xhr请求已完成" + xhr.status);
if (xhr.status == 200) {
var data = xhr.responseBody;
console.log( "结果:" + data);
} else if(xhr.status == 500) {
console.log( "服务器端异常。" + xhr.status);
}
else {
console.log( "不允许跨域请求。" + xhr.status);
}
break;
default :
break;
}
};
xhr.timeout = 10000;
xhr.responseType = 'text';
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(params);
} else {
console.log("xhr创建失败");
}
return data;
}
然而可恨的是,这串代码在浏览器中可以满足跨域请求数据,在APP中依然得不到想要的结果,问题依旧是:status=200,readyState 变为了0,但是在研究XMLHttpRequest的过程中发现,其实ajax是对XMLHttpRequest的封装,所以学习XMLHttpRequest也得到了相应的收获,接下来问题还是没解决,我只得先休息一会儿,玩一下游戏,放空一下脑子。
四、我重新回到ajax的问题上,现在来重新认识ajax,对各个属性进行解读,贴出代码:
$.ajax({
type: 'POST',
async: false,
url: "http://foney.4kb.cn/LoveSpaceServer/login/getValidateCode",
data: {
'phone':'18286006010',
'type':1
},
dataType:'json',
success: function(data){
console.log(data.msg);
},
error:function(e){
console.log("error:" + e.status + e.readyState + e.response);
}
});
type:请求方式,有POST、GET两种方式
url:服务器请求地址
data:传到服务器地址
dataType:服务器返回数据类型,这里一定要注意,服务器返回的数据类型,必须得相对应,如果只是字符串,则填写text,如果是json数据,则需要写成json,并且json格式一定要和官方给出的json格式一样。
success:ajax请求成功回调函数,这里为什么没写成服务器请求成功回调,是因为,有时候,就算服务器请求成功了,也未必能够回调到success里面,比如说dataType数据类型不对应。
error:ajax请求失败回调函数,
接下来的这个属性就是 async,这个属性就是这次我在跨域请求过程中的痛点,起初的时候我并没有管他,因为ajax请求默认就为异步,所以默认情况下,async为true ,现在说一下这个属性的作用:
async:false 同步请求,只有等服务器响应后才会执行接下来的js代码逻辑;
async:true 异步请求,在执行Ajax代码时,不会立即请求服务器,而是等js代码逻辑执行完后,再去请求服务器,服务器返回的结果在回调函数中继续处理。
所以跨域请求中必须把async设置为同步。问题解决。

收起阅读 »

仿今日头条,可以在本地测试的mui源码,值得收藏

源码分享


里面的api都是免费分享给大家的,大家可以用它来练手!
线上测试


里面的api都是免费分享给大家的,大家可以用它来练手!
线上测试

HBuilder之Framework7沉浸式状态栏常见问题

沉浸式状态栏

问题描述:

使用的UI环境为Framework7。
正确设置了HBuilder沉浸式状态栏。
在Android平台下正常,在IOS平台下首次跳转都会出现白条,刷新Webview后白条消失。

问题截图:

问题解释:

经过各个代码段的测试及手册查询,发现Framework7自带了一个statusbarOverlay初始化属性(默认是启用的),该属性主要用于监测IOS平台下webAPP是否全屏(Framework7的作者为兼容PhoneGap特地写的),HBuilder在不启用沉浸式状态栏的情况下是正常的,但在启用沉浸式状态栏后就会与Framework7的statusbarOverlay产生冲突。

解决方法
关闭 Framework7的statusbarOverlay属性。

/*初始化APP框架*/  
var App = new Framework7({  
    .....  
    statusbarOverlay:false /*关闭全屏幕模式状态栏覆盖*/  
    .....  
});  
继续阅读 »

问题描述:

使用的UI环境为Framework7。
正确设置了HBuilder沉浸式状态栏。
在Android平台下正常,在IOS平台下首次跳转都会出现白条,刷新Webview后白条消失。

问题截图:

问题解释:

经过各个代码段的测试及手册查询,发现Framework7自带了一个statusbarOverlay初始化属性(默认是启用的),该属性主要用于监测IOS平台下webAPP是否全屏(Framework7的作者为兼容PhoneGap特地写的),HBuilder在不启用沉浸式状态栏的情况下是正常的,但在启用沉浸式状态栏后就会与Framework7的statusbarOverlay产生冲突。

解决方法
关闭 Framework7的statusbarOverlay属性。

/*初始化APP框架*/  
var App = new Framework7({  
    .....  
    statusbarOverlay:false /*关闭全屏幕模式状态栏覆盖*/  
    .....  
});  
收起阅读 »

WebView调试模式常见问题

WebView调试 调试模式常见问题 常见问题 调试模式 WebView调试模式常见问题

Q:HBuilder Mac版本无法检测到手机或手机上启动支持调试的应用

A
1、XCode版本不得低于8.2.1,如果低于请升级
2、ios-webkit-debug-proxy安装失败或者版本太低,关闭HBuilder,打开终端,按照下面命令安装:
brew update
brew reinstall --HEAD usbmuxd
brew reinstall --HEAD libimobiledevice
brew reinstall -s ios-webkit-debug-proxy
执行成功后再次启动HBuilder重试

Q:无法打开调试页面

A
关闭所有已经打开的Chrome,然后重试

Q:chrome83+无法打开webview调试

A:请升级到HBuilderX2.8+,新版已经适配了chrome83的调整

继续阅读 »

Q:HBuilder Mac版本无法检测到手机或手机上启动支持调试的应用

A
1、XCode版本不得低于8.2.1,如果低于请升级
2、ios-webkit-debug-proxy安装失败或者版本太低,关闭HBuilder,打开终端,按照下面命令安装:
brew update
brew reinstall --HEAD usbmuxd
brew reinstall --HEAD libimobiledevice
brew reinstall -s ios-webkit-debug-proxy
执行成功后再次启动HBuilder重试

Q:无法打开调试页面

A
关闭所有已经打开的Chrome,然后重试

Q:chrome83+无法打开webview调试

A:请升级到HBuilderX2.8+,新版已经适配了chrome83的调整

收起阅读 »

WebView调试模式使用说明

调试 调试模式

关于WebView调试,HBuilderX,请参考第一章; HBuilder,请参考第二章

1. HBuilderX WebView调试说明

HBuilderX webview调试,适用于uniapp5+App等app类项目。

1.1 webview启动与使用

运行项目到手机,HBuilderX内点击菜单【视图】【显示WebView调试控制台】,即可打开webview调试控制台,如下图:

App打开要调试的页面,HBuilderX WebView调试控制台,会自动出现相关文件,点击【Inspect(调试)】,则会自动打开调试窗口。

1.2 注意事项

  1. 点击【Inspect(调试)】后,如无法正常打开调试窗口,关闭chrome浏览器,然后重试。
  2. uniapp项目仅v3模式的vue页面支持webview调试视图层。调试js或nvue请点击运行控制台右上角的debug按钮。

2. 老HBuilder WebView调试说明

HBuilder支持真机运行项目或者在手机上启动一个支持调试的应用即可在HBuilder打开调试功能,具体使用方式如下:
1、打开WebView调试模式:

2、打开WebView调试模式之后就能在该视图中查看打开的WebView,点击 [inspect(调试)] 即可调试

3、真机运行会自动打开WebView调试模式,可以在调试模式界面中关闭自动打开功能,去掉自动打开的选项即可,如下图:

如有问题请点击WebView调试模式常见问题

继续阅读 »

关于WebView调试,HBuilderX,请参考第一章; HBuilder,请参考第二章

1. HBuilderX WebView调试说明

HBuilderX webview调试,适用于uniapp5+App等app类项目。

1.1 webview启动与使用

运行项目到手机,HBuilderX内点击菜单【视图】【显示WebView调试控制台】,即可打开webview调试控制台,如下图:

App打开要调试的页面,HBuilderX WebView调试控制台,会自动出现相关文件,点击【Inspect(调试)】,则会自动打开调试窗口。

1.2 注意事项

  1. 点击【Inspect(调试)】后,如无法正常打开调试窗口,关闭chrome浏览器,然后重试。
  2. uniapp项目仅v3模式的vue页面支持webview调试视图层。调试js或nvue请点击运行控制台右上角的debug按钮。

2. 老HBuilder WebView调试说明

HBuilder支持真机运行项目或者在手机上启动一个支持调试的应用即可在HBuilder打开调试功能,具体使用方式如下:
1、打开WebView调试模式:

2、打开WebView调试模式之后就能在该视图中查看打开的WebView,点击 [inspect(调试)] 即可调试

3、真机运行会自动打开WebView调试模式,可以在调试模式界面中关闭自动打开功能,去掉自动打开的选项即可,如下图:

如有问题请点击WebView调试模式常见问题

收起阅读 »

VUE与MUI整合上拉/下拉

下拉刷新 Vue

MUI的上拉/下拉刷新

如果页面中只包含上拉/下拉刷新部分以及header/footer部分,那么只需要参考官方文档即可,稍微细心一点,实现起来问题不大

官方文档:下拉/上拉官方文档

由VUE负责数据加载,MUI复杂上拉/下拉

mui中用的最多,问题最多的可能就是上拉/下拉刷新还有与它关联的各种问题了,可谓千奇百怪无奇不有。

VUE与MUI整合,最常见的问题是明明数据已加载,但是就是无法上拉/下拉,或者上拉/下拉触发的位置不对。

因水平有限,直接对mui框架进行修改实在没把握,也没那么多时间来看代码,因此选用mui已重写的上拉/下拉组件来进行修改。原始代码是Mui的demo项目里面的
pullrefresh_with_tab.html 。选这个的一个原因是在它的基础上可以很容易的实现页面的部分上拉/下拉,而其他部分不变,比如在页面最上方放一个固定的搜索框之类的。另一个原因是这是一个独立的组件,方便修改,代码也比mui框架简单和清晰。

HTML页面代码

直接采用demo的样式,把自己需要的dom添加进去就可以了

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"><span class=" mui-icon mui-icon-left-nav "></span> </a>  
            <h1 class="mui-title"></h1>  
        </header>  

        <div class="mui-content">  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <div class="mui-input-row mui-search">  
                        <input type="search" v-model="keyword" placeholder="搜索" style="margin-bottom: 0px;">  
                    </div>  

                </div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="pullrefresh" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <!--数据列表-->  
                                <ul class="mui-table-view " id="stuffs_ul" style="margin-top: 10px;">  
                                    <template v-for="stuff in stuffs ">  

    //vue加载的li元素                                </template>  

                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </body>

JS代码

对mui.pullToRefresh.js进行了一些改动,修复一些我自己使用vue碰到的问题

上拉/下拉刷新触发的时机不对

比如不管在列表的哪里下拉都触发下拉刷新这一类的问题,解决办法是在判断是否上拉/下拉时判断是否滚动到顶部/底部

_canPullUp: function() {  
            if(this.removing) {  
                return false;  
            }  

            if(this.isInScroll) {  
                var scrollId = this.element.parentNode.getAttribute('data-scroll');  
                if(scrollId) {  
                    var scrollApi = $.data[scrollId];  
                    return scrollApi.y === scrollApi.maxScrollY;  
                }  
            }  
            /**  
             * 修改上拉判断条件  
             */  
            console.log('上拉位置' + this.element.scrollTop + '  ' + this.element.clientHeight + '  ' + this.element.scrollHeight)  
            if(this.element) {  
                return this.element.scrollTop + this.element.clientHeight >= this.element.scrollHeight;  
            }  
            return window.pageYOffset + window.innerHeight + this.options.up.offset >= document.documentElement.scrollHeight;  
        },  
        _canPullDown: function() {  
            if(this.removing) {  
                return false;  
            }  
            if(this.isInScroll) {  
                var scrollId = this.element.parentNode.getAttribute('data-scroll');  
                if(scrollId) {  
                    var scrollApi = $.data[scrollId];  
                    return scrollApi.y === 0;  
                }  
            }  
            /**  
             * 修改下拉判断条件  
             */  
            console.log('下拉位置' + document.body.scrollTop + '  ' + this.element.scrollTop)  
            if(this.element) {  
                return this.element.scrollTop <= 0;  
            }  
            return document.body.scrollTop === 0;  
        },
数据加载完成后,底部的“上拉提示提示条”位置不对

比如不可见,或者显示在列表中间而不是底部等
解决办法是在上拉/下拉结束后重新获取列表的高度,然后设置底部提示条的top值


        fixBottomTip: function() {  
            if(this.element && this.element.querySelector('.mui-pull-bottom-tips')) {  
                if(!this.element.querySelector('.mui-scroll')) {  
                    this.element.querySelector('.mui-pull-bottom-tips').style.top = this.element.scrollHeight - 40 + 'px'  
                } else {  
                    this.element.querySelector('.mui-pull-bottom-tips').style.top = this.element.querySelector('.mui-scroll').scrollHeight + 'px'  
                }  
            }  
        },

另外还需要设置mui-pull-bottom-tips的position属性


.mui-pull-bottom-tips {  
    text-align: center;  
    background-color: #efeff4;  
    font-size: 15px;  
    line-height: 40px;  
    color: #777;  
    width: 100%;  
    position: absolute;  
}  

其他问题

使用vue后,上下或者左右滚动无效

这个问题产生原因应该是vue渲染dom后无法撑开它的上一级容器,具体什么原因我也搞不懂,
有个解决办法就是设置滚动的容器的overflow值为auto


.mui-content.mui-scroll-wrapper {  
    overflow: auto;  
}  

.mui-slider.mui-fullscreen .mui-slider-group .mui-control-content .mui-scroll-wrapper {  
    overflow: auto;  
}

总结

修改完成后,在手机浏览器,IOSAPP,ANDROIDAPP测试都正常,包括单webviewhe双webview

文件下载

本文链接:http://blog.betweenfriends.cn/post/vuemuiscrollfixmethod.html

继续阅读 »

MUI的上拉/下拉刷新

如果页面中只包含上拉/下拉刷新部分以及header/footer部分,那么只需要参考官方文档即可,稍微细心一点,实现起来问题不大

官方文档:下拉/上拉官方文档

由VUE负责数据加载,MUI复杂上拉/下拉

mui中用的最多,问题最多的可能就是上拉/下拉刷新还有与它关联的各种问题了,可谓千奇百怪无奇不有。

VUE与MUI整合,最常见的问题是明明数据已加载,但是就是无法上拉/下拉,或者上拉/下拉触发的位置不对。

因水平有限,直接对mui框架进行修改实在没把握,也没那么多时间来看代码,因此选用mui已重写的上拉/下拉组件来进行修改。原始代码是Mui的demo项目里面的
pullrefresh_with_tab.html 。选这个的一个原因是在它的基础上可以很容易的实现页面的部分上拉/下拉,而其他部分不变,比如在页面最上方放一个固定的搜索框之类的。另一个原因是这是一个独立的组件,方便修改,代码也比mui框架简单和清晰。

HTML页面代码

直接采用demo的样式,把自己需要的dom添加进去就可以了

        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left"><span class=" mui-icon mui-icon-left-nav "></span> </a>  
            <h1 class="mui-title"></h1>  
        </header>  

        <div class="mui-content">  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <div class="mui-input-row mui-search">  
                        <input type="search" v-model="keyword" placeholder="搜索" style="margin-bottom: 0px;">  
                    </div>  

                </div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                        <div id="pullrefresh" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <!--数据列表-->  
                                <ul class="mui-table-view " id="stuffs_ul" style="margin-top: 10px;">  
                                    <template v-for="stuff in stuffs ">  

    //vue加载的li元素                                </template>  

                                </ul>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </body>

JS代码

对mui.pullToRefresh.js进行了一些改动,修复一些我自己使用vue碰到的问题

上拉/下拉刷新触发的时机不对

比如不管在列表的哪里下拉都触发下拉刷新这一类的问题,解决办法是在判断是否上拉/下拉时判断是否滚动到顶部/底部

_canPullUp: function() {  
            if(this.removing) {  
                return false;  
            }  

            if(this.isInScroll) {  
                var scrollId = this.element.parentNode.getAttribute('data-scroll');  
                if(scrollId) {  
                    var scrollApi = $.data[scrollId];  
                    return scrollApi.y === scrollApi.maxScrollY;  
                }  
            }  
            /**  
             * 修改上拉判断条件  
             */  
            console.log('上拉位置' + this.element.scrollTop + '  ' + this.element.clientHeight + '  ' + this.element.scrollHeight)  
            if(this.element) {  
                return this.element.scrollTop + this.element.clientHeight >= this.element.scrollHeight;  
            }  
            return window.pageYOffset + window.innerHeight + this.options.up.offset >= document.documentElement.scrollHeight;  
        },  
        _canPullDown: function() {  
            if(this.removing) {  
                return false;  
            }  
            if(this.isInScroll) {  
                var scrollId = this.element.parentNode.getAttribute('data-scroll');  
                if(scrollId) {  
                    var scrollApi = $.data[scrollId];  
                    return scrollApi.y === 0;  
                }  
            }  
            /**  
             * 修改下拉判断条件  
             */  
            console.log('下拉位置' + document.body.scrollTop + '  ' + this.element.scrollTop)  
            if(this.element) {  
                return this.element.scrollTop <= 0;  
            }  
            return document.body.scrollTop === 0;  
        },
数据加载完成后,底部的“上拉提示提示条”位置不对

比如不可见,或者显示在列表中间而不是底部等
解决办法是在上拉/下拉结束后重新获取列表的高度,然后设置底部提示条的top值


        fixBottomTip: function() {  
            if(this.element && this.element.querySelector('.mui-pull-bottom-tips')) {  
                if(!this.element.querySelector('.mui-scroll')) {  
                    this.element.querySelector('.mui-pull-bottom-tips').style.top = this.element.scrollHeight - 40 + 'px'  
                } else {  
                    this.element.querySelector('.mui-pull-bottom-tips').style.top = this.element.querySelector('.mui-scroll').scrollHeight + 'px'  
                }  
            }  
        },

另外还需要设置mui-pull-bottom-tips的position属性


.mui-pull-bottom-tips {  
    text-align: center;  
    background-color: #efeff4;  
    font-size: 15px;  
    line-height: 40px;  
    color: #777;  
    width: 100%;  
    position: absolute;  
}  

其他问题

使用vue后,上下或者左右滚动无效

这个问题产生原因应该是vue渲染dom后无法撑开它的上一级容器,具体什么原因我也搞不懂,
有个解决办法就是设置滚动的容器的overflow值为auto


.mui-content.mui-scroll-wrapper {  
    overflow: auto;  
}  

.mui-slider.mui-fullscreen .mui-slider-group .mui-control-content .mui-scroll-wrapper {  
    overflow: auto;  
}

总结

修改完成后,在手机浏览器,IOSAPP,ANDROIDAPP测试都正常,包括单webviewhe双webview

文件下载

本文链接:http://blog.betweenfriends.cn/post/vuemuiscrollfixmethod.html

收起阅读 »

HBuilder在夜神模拟器上实现真机运行(关于HBuilder检测不到模拟器问题)

HBuilder在使用Android模拟器进行真机调试时,经常会出现找不到模拟器情况,接下来要介绍的运行模拟器是“夜神模拟器”。
PS:笔者在使用“夜猫模拟器”前,使用过Google提供的模拟器进行连接,老是爱掉线,并且连接不上,在使用Genymotion模拟器连接时, HBuilder根本读不到模拟器,试着使用修改端口号的方式进行让HBuilder和Genymotion进行直连,也以失败而告终。
一、下载“夜神模拟器”,https://www.yeshen.com,安装比较简单,默认安装即可。
二、安装完成后,模拟器默认会以平板模式开启,如果需更改为手机模式,点击“设置”图标,选择“高级设置”,分辨率设置为“手机版”。点击“保存设置”,模拟器重启后即可。
三、HBuilder和模拟器端口连接设置,看附件图
1.win + r (Windows)输入cmd进入dos窗口,cd 到夜神模拟器的安装目录bin下, 如:cd D:\Program Files (x86)\Nox\bin
2.然后输入命令:nox_adb connect 127.0.0.1:62001 进行连接 ,接下来使用命令:nox_adb devices 查看连接信息。
3.切换目录到HBuilder的tools目录下:cd D:\HBuilder.7.5.0.windows\HBuilder\tools
4.输入命令:adb connect 127.0.0.1:62001
5.输入命令:adb devices 查看连接信息。
四、接下来,端口设置好后,再HBuilder中就可以直接运行了,点击运行已经创建好的移动APP吧!

继续阅读 »

HBuilder在使用Android模拟器进行真机调试时,经常会出现找不到模拟器情况,接下来要介绍的运行模拟器是“夜神模拟器”。
PS:笔者在使用“夜猫模拟器”前,使用过Google提供的模拟器进行连接,老是爱掉线,并且连接不上,在使用Genymotion模拟器连接时, HBuilder根本读不到模拟器,试着使用修改端口号的方式进行让HBuilder和Genymotion进行直连,也以失败而告终。
一、下载“夜神模拟器”,https://www.yeshen.com,安装比较简单,默认安装即可。
二、安装完成后,模拟器默认会以平板模式开启,如果需更改为手机模式,点击“设置”图标,选择“高级设置”,分辨率设置为“手机版”。点击“保存设置”,模拟器重启后即可。
三、HBuilder和模拟器端口连接设置,看附件图
1.win + r (Windows)输入cmd进入dos窗口,cd 到夜神模拟器的安装目录bin下, 如:cd D:\Program Files (x86)\Nox\bin
2.然后输入命令:nox_adb connect 127.0.0.1:62001 进行连接 ,接下来使用命令:nox_adb devices 查看连接信息。
3.切换目录到HBuilder的tools目录下:cd D:\HBuilder.7.5.0.windows\HBuilder\tools
4.输入命令:adb connect 127.0.0.1:62001
5.输入命令:adb devices 查看连接信息。
四、接下来,端口设置好后,再HBuilder中就可以直接运行了,点击运行已经创建好的移动APP吧!

收起阅读 »