Android打包时使用自己生成的密钥出现的小坑
我开发快捎项目时,在最后进行打包测试时,使用keytool生成了一个私钥,准备进行Android打包,但却报错说私钥密码有误,我设置了一个keypass和一个storepass, 两个密码都填入去试过了,都说是私钥密码有误,顿时蒙逼。在网上搜索了好久,才发现大多数是在ios打包时出现问题,直到看到这个问题及答案(http://ask.dcloud.net.cn/question/4507),才找到了解决方案。这里有必要提示一下,在生成密钥时,一定要注意:
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
我开发快捎项目时,在最后进行打包测试时,使用keytool生成了一个私钥,准备进行Android打包,但却报错说私钥密码有误,我设置了一个keypass和一个storepass, 两个密码都填入去试过了,都说是私钥密码有误,顿时蒙逼。在网上搜索了好久,才发现大多数是在ios打包时出现问题,直到看到这个问题及答案(http://ask.dcloud.net.cn/question/4507),才找到了解决方案。这里有必要提示一下,在生成密钥时,一定要注意:
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
》》》 keypass 和storepass要一致,要一致
header 和 mui-scroll冲突,header渐变失效[ 已解决 ]
页面中同时使用header渐变和 mui-scroll,header渐变失效的解决方法:
mui('.mui-bar-transparent').transparent({
top: 0,
offset: 150,
duration: 16,
scrollby: document.querySelector('.mui-scroll-wrapper')
})
页面中同时使用header渐变和 mui-scroll,header渐变失效的解决方法:
mui('.mui-bar-transparent').transparent({
top: 0,
offset: 150,
duration: 16,
scrollby: document.querySelector('.mui-scroll-wrapper')
})
解决刷新列表
问题:
在列表上新增转到新页面,新增成功要返回列表,刷新列表,实现方法??
当前页面代码
mui.init({
beforeback: function(){
//获得你要前往页面的webview id
var Scanner = plus.webview.getWebviewById('lists');
//触发前往页面的自定义事件(例:AddNew),从而进行数据刷新
mui.fire(Scanner,'AddNew');
//返回true,继续页面关闭逻辑
return true;
}
});
前往页面lists.html代码
//添加AddNew自定义事件监听
window.addEventListener('AddNew',function(){
plus.webview.getWebviewById('刷新页面的ID lists').reload();
});
问题:
在列表上新增转到新页面,新增成功要返回列表,刷新列表,实现方法??
当前页面代码
mui.init({
beforeback: function(){
//获得你要前往页面的webview id
var Scanner = plus.webview.getWebviewById('lists');
//触发前往页面的自定义事件(例:AddNew),从而进行数据刷新
mui.fire(Scanner,'AddNew');
//返回true,继续页面关闭逻辑
return true;
}
});
前往页面lists.html代码
//添加AddNew自定义事件监听
window.addEventListener('AddNew',function(){
plus.webview.getWebviewById('刷新页面的ID lists').reload();
});
页面之间传值
从列表页传递商品id,页面跳转到详情页:
列表页:
1) 首先预加载详情页
mui.init({
preloadPages:[{
id:'info.html',
url:'info.html',
}]
});
2) 批量点击事件
mui("#Gallery").on('tap','.mui-table-view-cell a',function(){
//获取id
var id = this.getAttribute("id");
var infoPage = null;
//传值给详情页面,通知加载新数据
if(!infoPage){
infoPage = plus.webview.getWebviewById('info.html');
}
//触发详情页面的newsId事件
mui.fire(infoPage,'newsId',{
id:id
});
//打开详情页面
mui.openWindow({
id:'info.html'
});
})
详情页监听事件:
window.addEventListener('newsId',function(event){
var id = event.detail.id;
//得到传递来的产品id,访问相应接口, 进行相应的 ajax处理
}) 从列表页传递商品id,页面跳转到详情页:
列表页:
1) 首先预加载详情页
mui.init({
preloadPages:[{
id:'info.html',
url:'info.html',
}]
});
2) 批量点击事件
mui("#Gallery").on('tap','.mui-table-view-cell a',function(){
//获取id
var id = this.getAttribute("id");
var infoPage = null;
//传值给详情页面,通知加载新数据
if(!infoPage){
infoPage = plus.webview.getWebviewById('info.html');
}
//触发详情页面的newsId事件
mui.fire(infoPage,'newsId',{
id:id
});
//打开详情页面
mui.openWindow({
id:'info.html'
});
})
详情页监听事件:
window.addEventListener('newsId',function(event){
var id = event.detail.id;
//得到传递来的产品id,访问相应接口, 进行相应的 ajax处理
}) 收起阅读 »
复选框实现全选全不选功能,可用于购物车
(function (m){
document.getElementById('xuan').addEventListener('change',function(e){
var list = m('.cart_select');
if(e.target.checked){
list.each(function(){
var ele = this;
ele.checked = true;
})
}else{
list.each(function(){
var ele = this;
ele.checked = false;
})
}
})
})(mui); (function (m){
document.getElementById('xuan').addEventListener('change',function(e){
var list = m('.cart_select');
if(e.target.checked){
list.each(function(){
var ele = this;
ele.checked = true;
})
}else{
list.each(function(){
var ele = this;
ele.checked = false;
})
}
})
})(mui); 收起阅读 »
getAttribute() 用法
getAttribute() 方法返回指定属性名的属性值。
例如:
document.getElementsByTagName("a")[0].getAttribute("target");
结果: _blank
实例:
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
//获取id
var id = this.getAttribute("id");
//传值给详情页面,通知加载新数据
mui.fire(detail,'getDetail',{id:id});
//打开新闻详情
mui.openWindow({ id:'detail', url:'detail.html' });
}) getAttribute() 方法返回指定属性名的属性值。
例如:
document.getElementsByTagName("a")[0].getAttribute("target");
结果: _blank
实例:
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
//获取id
var id = this.getAttribute("id");
//传值给详情页面,通知加载新数据
mui.fire(detail,'getDetail',{id:id});
//打开新闻详情
mui.openWindow({ id:'detail', url:'detail.html' });
}) 收起阅读 »
解决mui跨境访问问题
浅析遇到的问题~~~
入门第一坑: 跨境问题
解决方法:
1)在PHP文件(接口文档)中设置文件头:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
header("Access-Control-Allow-Headers: Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
注: 官方中提供的ajax实例模板
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/json'},
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
在具体操作时,要去掉 headers:{'Content-Type':'application/json'},
浅析遇到的问题~~~
入门第一坑: 跨境问题
解决方法:
1)在PHP文件(接口文档)中设置文件头:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
header("Access-Control-Allow-Headers: Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
注: 官方中提供的ajax实例模板
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/json'},
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
在具体操作时,要去掉 headers:{'Content-Type':'application/json'},
iOS打开系统设置定位、通讯录、相册权限设置
设置URL Scheme即可,如打开无线可用:
plus.runtime.launchApplication({
action: 'App-Prefs:root=WIFI'
}, function(e) {
console.log(JSON.stringify(e));
});
跳转设置本应用权限较复杂,详情请加819954692
设置URL Scheme即可,如打开无线可用:
plus.runtime.launchApplication({
action: 'App-Prefs:root=WIFI'
}, function(e) {
console.log(JSON.stringify(e));
});
跳转设置本应用权限较复杂,详情请加819954692
收起阅读 »Mac系统svn无法使用,svn版本过低,提示javaHL not available
发现Dcloud根本不考虑mac系统下开发者的死活啊,特别像我们这种老程序员只会用svn不会git,居然就不给支持了~
今天在mac的Hbuider里面准备svn一个项目下来,结果就是卡死,一直连不上。中途还报了一个错误:
立马我就反应过来,javaHL不对了,马上查询了svn接口如下:
当时就开始安装javaHL,mac系统安装javaHL比较麻烦,还要使用homebrew,所以先用mac终端安装了homebrew。
然后再用homebrew安装javaHL。(具体自行Google去)
安装完成之后,又蒙圈了。这种方式只能安装最新版的javaHL,我安装的时候是1.12.x,版本很高了。根据官方说的,对应的svn必须用1.12,
默认的Hbuider只有svn 1.6版本,看了论坛里面,居然有官方的人说内核不支持1.6以上。真是坑爹啊~
不服气的我决定看看通过eclipse市场能不能搞定:
居然还真的安装成功了~
然后svn倒入项目,一切顺利,OK!
发现Dcloud根本不考虑mac系统下开发者的死活啊,特别像我们这种老程序员只会用svn不会git,居然就不给支持了~
今天在mac的Hbuider里面准备svn一个项目下来,结果就是卡死,一直连不上。中途还报了一个错误:
立马我就反应过来,javaHL不对了,马上查询了svn接口如下:
当时就开始安装javaHL,mac系统安装javaHL比较麻烦,还要使用homebrew,所以先用mac终端安装了homebrew。
然后再用homebrew安装javaHL。(具体自行Google去)
安装完成之后,又蒙圈了。这种方式只能安装最新版的javaHL,我安装的时候是1.12.x,版本很高了。根据官方说的,对应的svn必须用1.12,
默认的Hbuider只有svn 1.6版本,看了论坛里面,居然有官方的人说内核不支持1.6以上。真是坑爹啊~
不服气的我决定看看通过eclipse市场能不能搞定:
居然还真的安装成功了~
然后svn倒入项目,一切顺利,OK!
收起阅读 »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开发实战 - 新闻客户端【免费】
知识点 : 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仍需加油努力!将产品的核心功能做到万无一失!
收起阅读 »









