
[android端] 用百度推送替换个推推送,js端继续使用官方api。
-
介绍
===- 这是一个dcloud集成百度推送的教程(android端)。
- 这是一个离线打包配置的教程。
- 本项目用百度推送去替换dcloud默认集成的个推推送,使修改对于web层是完全透明的,也就是说js端的推送逻辑基本不用做修改。
-
使用
===- 按照dcloud官方教程集成个推推送。
- 下载百度推送sdk,导入sdk中的jar包和so文件,so文件只需导入armeabi、armeabi-v7a、x86文件夹下的。
- 删除个推jar包GetuiSdk2.5.0.0.jar、GetuiExt-2.0.3.jar、aps-igexin.jar,导入本项目libs目录中的baidu-gexing.jar。
- 在AndroidManifest.xml中注释掉个推推送的所有配置,添加以下配置:
<!-- baidu push开始 -->
<!-- 用于操作本地创建的通知 -->
<receiver android:name="io.dcloud.feature.aps.NotificationReceiver" >
<!-- 如下配置用于处理推送消息 -->
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="cn.tomygo.app.v2.CREATE_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.__REMOVE_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.CLEAR_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.__CLILK_NOTIFICATION" />
</intent-filter>
</receiver>
<!-- 原本用于个推的配置,同样用于百度推送 -->
<meta-data
android:name="PUSH_APPID"
android:value="填写你的appid" />
<meta-data
android:name="PUSH_APPKEY"
android:value="填写你的appkey" />
<meta-data
android:name="PUSH_APPSECRET"
android:value="填写你的appsecret" />
<!-- Push service 运行需要的权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_DOWNLOAD_MANAGER"/>
<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.EXPAND_STATUS_BAR" />
<!-- 4.6版本新增的Activity声明,提升Push后台存活率 -->
<activity
android:name="com.baidu.android.pushservice.PushKeepAlive"
android:theme="@android:style/Theme.Translucent.NoTitleBar"/>
<!-- push service start -->
<!-- 用于接收系统消息以保证PushService正常运行 -->
<receiver android:name="com.baidu.android.pushservice.PushServiceReceiver"
android:process=":bdservice_v1" >
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="android.net.conn.CONNECTIVITY_CHANGE" />
<action android:name="com.baidu.android.pushservice.action.notification.SHOW" />
<action android:name="com.baidu.android.pushservice.action.media.CLICK" />
<!-- 以下四项为可选的action声明,可大大提高service存活率和消息到达速度 -->
<action android:name="android.intent.action.MEDIA_MOUNTED" />
<action android:name="android.intent.action.USER_PRESENT" />
<action android:name="android.intent.action.ACTION_POWER_CONNECTED" />
<action android:name="android.intent.action.ACTION_POWER_DISCONNECTED" />
</intent-filter>
</receiver>
<!-- Push服务接收客户端发送的各种请求-->
<receiver android:name="com.baidu.android.pushservice.RegistrationReceiver"
android:process=":bdservice_v1" >
<intent-filter>
<action android:name="com.baidu.android.pushservice.action.METHOD" />
<action android:name="com.baidu.android.pushservice.action.BIND_SYNC" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.PACKAGE_REMOVED" />
<data android:scheme="package" />
</intent-filter>
</receiver>
<service android:name="com.baidu.android.pushservice.PushService" android:exported="true"
android:process=":bdservice_v1" >
<intent-filter >
<action android:name="com.baidu.android.pushservice.action.PUSH_SERVICE" />
</intent-filter>
</service>
<!-- 4.4版本新增的CommandService声明,提升小米和魅族手机上的实际推送到达率 -->
<service android:name="com.baidu.android.pushservice.CommandService"
android:exported="true" />
<!-- 此处Receiver名字修改为当前包名路径 -->
<receiver android:name="io.dcloud.feature.apsGt.MyPushMessageReceiver">
<intent-filter>
<!-- 接收push消息 -->
<action android:name="com.baidu.android.pushservice.action.MESSAGE" />
<!-- 接收bind、setTags等method的返回结果-->
<action android:name="com.baidu.android.pushservice.action.RECEIVE" />
<!-- 接收通知点击事件,和通知自定义内容 -->
<action android:name="com.baidu.android.pushservice.action.notification.CLICK" />
</intent-filter>
</receiver>
<!-- baidu push结束 -->
* 配置完成。
3.说明
===
* 百度中推送的附加字段的内容放在消息对象的payload字段中:
```javascript
//js打印附加字段
plus.push.addEventListener( "click", function( msg ) {
console.log("附加字段:"+msg.payload);
}, false );
-
介绍
===- 这是一个dcloud集成百度推送的教程(android端)。
- 这是一个离线打包配置的教程。
- 本项目用百度推送去替换dcloud默认集成的个推推送,使修改对于web层是完全透明的,也就是说js端的推送逻辑基本不用做修改。
-
使用
===- 按照dcloud官方教程集成个推推送。
- 下载百度推送sdk,导入sdk中的jar包和so文件,so文件只需导入armeabi、armeabi-v7a、x86文件夹下的。
- 删除个推jar包GetuiSdk2.5.0.0.jar、GetuiExt-2.0.3.jar、aps-igexin.jar,导入本项目libs目录中的baidu-gexing.jar。
- 在AndroidManifest.xml中注释掉个推推送的所有配置,添加以下配置:
<!-- baidu push开始 -->
<!-- 用于操作本地创建的通知 -->
<receiver android:name="io.dcloud.feature.aps.NotificationReceiver" >
<!-- 如下配置用于处理推送消息 -->
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="cn.tomygo.app.v2.CREATE_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.__REMOVE_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.CLEAR_NOTIFICATION" />
<action android:name="cn.tomygo.app.v2.__CLILK_NOTIFICATION" />
</intent-filter>
</receiver>
<!-- 原本用于个推的配置,同样用于百度推送 -->
<meta-data
android:name="PUSH_APPID"
android:value="填写你的appid" />
<meta-data
android:name="PUSH_APPKEY"
android:value="填写你的appkey" />
<meta-data
android:name="PUSH_APPSECRET"
android:value="填写你的appsecret" />
<!-- Push service 运行需要的权限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_DOWNLOAD_MANAGER"/>
<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.EXPAND_STATUS_BAR" />
<!-- 4.6版本新增的Activity声明,提升Push后台存活率 -->
<activity
android:name="com.baidu.android.pushservice.PushKeepAlive"
android:theme="@android:style/Theme.Translucent.NoTitleBar"/>
<!-- push service start -->
<!-- 用于接收系统消息以保证PushService正常运行 -->
<receiver android:name="com.baidu.android.pushservice.PushServiceReceiver"
android:process=":bdservice_v1" >
<intent-filter>
<action android:name="android.intent.action.BOOT_COMPLETED" />
<action android:name="android.net.conn.CONNECTIVITY_CHANGE" />
<action android:name="com.baidu.android.pushservice.action.notification.SHOW" />
<action android:name="com.baidu.android.pushservice.action.media.CLICK" />
<!-- 以下四项为可选的action声明,可大大提高service存活率和消息到达速度 -->
<action android:name="android.intent.action.MEDIA_MOUNTED" />
<action android:name="android.intent.action.USER_PRESENT" />
<action android:name="android.intent.action.ACTION_POWER_CONNECTED" />
<action android:name="android.intent.action.ACTION_POWER_DISCONNECTED" />
</intent-filter>
</receiver>
<!-- Push服务接收客户端发送的各种请求-->
<receiver android:name="com.baidu.android.pushservice.RegistrationReceiver"
android:process=":bdservice_v1" >
<intent-filter>
<action android:name="com.baidu.android.pushservice.action.METHOD" />
<action android:name="com.baidu.android.pushservice.action.BIND_SYNC" />
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.PACKAGE_REMOVED" />
<data android:scheme="package" />
</intent-filter>
</receiver>
<service android:name="com.baidu.android.pushservice.PushService" android:exported="true"
android:process=":bdservice_v1" >
<intent-filter >
<action android:name="com.baidu.android.pushservice.action.PUSH_SERVICE" />
</intent-filter>
</service>
<!-- 4.4版本新增的CommandService声明,提升小米和魅族手机上的实际推送到达率 -->
<service android:name="com.baidu.android.pushservice.CommandService"
android:exported="true" />
<!-- 此处Receiver名字修改为当前包名路径 -->
<receiver android:name="io.dcloud.feature.apsGt.MyPushMessageReceiver">
<intent-filter>
<!-- 接收push消息 -->
<action android:name="com.baidu.android.pushservice.action.MESSAGE" />
<!-- 接收bind、setTags等method的返回结果-->
<action android:name="com.baidu.android.pushservice.action.RECEIVE" />
<!-- 接收通知点击事件,和通知自定义内容 -->
<action android:name="com.baidu.android.pushservice.action.notification.CLICK" />
</intent-filter>
</receiver>
<!-- baidu push结束 -->
* 配置完成。
3.说明
===
* 百度中推送的附加字段的内容放在消息对象的payload字段中:
```javascript
//js打印附加字段
plus.push.addEventListener( "click", function( msg ) {
console.log("附加字段:"+msg.payload);
}, false );
收起阅读 »

[BUG?] plus.storage.removeItem删不干净
plus.storage.removeItem 删除某个键值对的时候好像删不干净,再去取删除掉的键时有时候还可以取到. 有没有人遇到同样的问题?
plus.storage.removeItem 删除某个键值对的时候好像删不干净,再去取删除掉的键时有时候还可以取到. 有没有人遇到同样的问题?

Hybrid APP开发工程师招聘(西安高新区)
Hybrid APP开发工程师招聘,工作地点西安
1、掌握JavaScript语言开发基础,熟悉Javascript面向对象编码者优先;
2、精通Html、Div+Css布局,掌握W3C标准及各种浏览器兼容性调试;
3、熟练Dreamweaver、Fireworks、Photoshop、Webstorm等常用网页、UI设计工具;
4、了解一种以上前端开发框架,如Jquery、Angularjs、ExtJS、LigerUI等;
5、熟悉XML/JSON前端开发技术,了解BootStrap;
熟悉Java开发者优先,具备MUI、AngularJS经验者优先,具备APP Hybrid设计经验者优先;
Hybrid APP开发工程师招聘,工作地点西安
1、掌握JavaScript语言开发基础,熟悉Javascript面向对象编码者优先;
2、精通Html、Div+Css布局,掌握W3C标准及各种浏览器兼容性调试;
3、熟练Dreamweaver、Fireworks、Photoshop、Webstorm等常用网页、UI设计工具;
4、了解一种以上前端开发框架,如Jquery、Angularjs、ExtJS、LigerUI等;
5、熟悉XML/JSON前端开发技术,了解BootStrap;
熟悉Java开发者优先,具备MUI、AngularJS经验者优先,具备APP Hybrid设计经验者优先;

使用Uploader上传文件,Java做后端的处理方法
由于刚刚接触HTML5+开发APP,对于后端处理不太了解,昨天还发帖询问呢,但是没有人回答,经过不懈的努力,终于搞定了,现将后端处理的代码分享上来!
此程序需要的jar包如下:
commons-fileupload-1.2.1.jar
commons-io-1.4.jar
需将两个jar包放到工程的lib文件夹下,上传页面的代码我用的是HelloH5+项目的uploader.html,这个应该很好找,后端的上传处理我用的是Servlet,具体的配置方法就不讲了,直接来代码:
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Calendar;
import java.util.Iterator;
import java.util.List;
import java.util.Random;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Apache组件上传
*
* @author 于世海
* @date 2016-02-17
*/
public class UploadHandleServlet extends HttpServlet {
private static final long serialVersionUID = 5827821285414610443L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 上传文件目录
String uploadDir = this.getServletContext().getRealPath("/upload");
DiskFileItemFactory factory = new DiskFileItemFactory();
// 设置内存区块大小4KB
factory.setSizeThreshold(4 * 1024);
// 设置暂存容器,当上传文件大于设置的内存块大小时,用暂存容器做中转
factory.setRepository(new File(this.getServletContext().getRealPath(
"/temp")));
ServletFileUpload fileUpload = new ServletFileUpload(factory);
fileUpload.setSizeMax(1024 * 1024 * 100);
//fileUpload.setFileSizeMax(1024 * 1024 * 10);
List<FileItem> fileItemList = null;
try {
fileItemList = fileUpload.parseRequest(request);
} catch (Exception e) {
e.printStackTrace();
}
Iterator<FileItem> fileItemIterator = fileItemList.iterator();
FileItem fileItem = null;
while (fileItemIterator.hasNext()) {
fileItem = fileItemIterator.next();
// 普通文件框上传
if (fileItem.isFormField()) {
String filedName = fileItem.getFieldName();
String filedValue = fileItem.getString("GBK");// 编码格式
System.out.println(filedName);// 文件框名称
System.out.println(filedValue);// 文件的值
} else {
String filedName = fileItem.getFieldName();// 文件上传框的名称
// 获取文件上传的文件名
String OriginalFileName = takeOutFileName(fileItem.getName());
System.out.println("原始文件名:"+OriginalFileName);
if (!"".equals(OriginalFileName)) {
// 根据上传的文件名重新命名
String newFileName = getNewFileName(OriginalFileName);
System.out.println("重新名:"+newFileName);
File writeToFile = new File(uploadDir + File.separator
+ newFileName);
try {
fileItem.write(writeToFile);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
}
private String takeOutFileName(String filePath) {
String fileName = filePath;
if (null != filePath && !"".equals(filePath)) {
int port = filePath.lastIndexOf("\\");
if(port != -1){
fileName = filePath.substring(port+1);
}
}
return fileName;
}
private String getNewFileName(String originalFileName) {
StringBuffer newFileName = new StringBuffer();
if (null != originalFileName && !"".equals(originalFileName)) {
int port = originalFileName.lastIndexOf(".");
String type = "";
String fileName = "";
if (port != -1) {
type = originalFileName.substring(port + 1);
fileName = originalFileName.substring(0, port);
} else {
fileName = originalFileName;
}
StringBuffer suffix = new StringBuffer("_");
suffix.append(Calendar.getInstance().getTimeInMillis());
suffix.append("_");
suffix.append(new Random().nextInt(100));
newFileName.append(fileName);
newFileName.append(suffix);
newFileName.append(".");
newFileName.append(type);
}
return newFileName.toString();
}
}
其他的处理代码直接修改就可以了!
由于刚刚接触HTML5+开发APP,对于后端处理不太了解,昨天还发帖询问呢,但是没有人回答,经过不懈的努力,终于搞定了,现将后端处理的代码分享上来!
此程序需要的jar包如下:
commons-fileupload-1.2.1.jar
commons-io-1.4.jar
需将两个jar包放到工程的lib文件夹下,上传页面的代码我用的是HelloH5+项目的uploader.html,这个应该很好找,后端的上传处理我用的是Servlet,具体的配置方法就不讲了,直接来代码:
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Calendar;
import java.util.Iterator;
import java.util.List;
import java.util.Random;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadBase;
import org.apache.commons.fileupload.ProgressListener;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
/**
* Apache组件上传
*
* @author 于世海
* @date 2016-02-17
*/
public class UploadHandleServlet extends HttpServlet {
private static final long serialVersionUID = 5827821285414610443L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 上传文件目录
String uploadDir = this.getServletContext().getRealPath("/upload");
DiskFileItemFactory factory = new DiskFileItemFactory();
// 设置内存区块大小4KB
factory.setSizeThreshold(4 * 1024);
// 设置暂存容器,当上传文件大于设置的内存块大小时,用暂存容器做中转
factory.setRepository(new File(this.getServletContext().getRealPath(
"/temp")));
ServletFileUpload fileUpload = new ServletFileUpload(factory);
fileUpload.setSizeMax(1024 * 1024 * 100);
//fileUpload.setFileSizeMax(1024 * 1024 * 10);
List<FileItem> fileItemList = null;
try {
fileItemList = fileUpload.parseRequest(request);
} catch (Exception e) {
e.printStackTrace();
}
Iterator<FileItem> fileItemIterator = fileItemList.iterator();
FileItem fileItem = null;
while (fileItemIterator.hasNext()) {
fileItem = fileItemIterator.next();
// 普通文件框上传
if (fileItem.isFormField()) {
String filedName = fileItem.getFieldName();
String filedValue = fileItem.getString("GBK");// 编码格式
System.out.println(filedName);// 文件框名称
System.out.println(filedValue);// 文件的值
} else {
String filedName = fileItem.getFieldName();// 文件上传框的名称
// 获取文件上传的文件名
String OriginalFileName = takeOutFileName(fileItem.getName());
System.out.println("原始文件名:"+OriginalFileName);
if (!"".equals(OriginalFileName)) {
// 根据上传的文件名重新命名
String newFileName = getNewFileName(OriginalFileName);
System.out.println("重新名:"+newFileName);
File writeToFile = new File(uploadDir + File.separator
+ newFileName);
try {
fileItem.write(writeToFile);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
}
private String takeOutFileName(String filePath) {
String fileName = filePath;
if (null != filePath && !"".equals(filePath)) {
int port = filePath.lastIndexOf("\\");
if(port != -1){
fileName = filePath.substring(port+1);
}
}
return fileName;
}
private String getNewFileName(String originalFileName) {
StringBuffer newFileName = new StringBuffer();
if (null != originalFileName && !"".equals(originalFileName)) {
int port = originalFileName.lastIndexOf(".");
String type = "";
String fileName = "";
if (port != -1) {
type = originalFileName.substring(port + 1);
fileName = originalFileName.substring(0, port);
} else {
fileName = originalFileName;
}
StringBuffer suffix = new StringBuffer("_");
suffix.append(Calendar.getInstance().getTimeInMillis());
suffix.append("_");
suffix.append(new Random().nextInt(100));
newFileName.append(fileName);
newFileName.append(suffix);
newFileName.append(".");
newFileName.append(type);
}
return newFileName.toString();
}
}
其他的处理代码直接修改就可以了!
收起阅读 »
这个是一篇好文章
这是非常好的文章,偶然间读到这个文章,感觉非常有用,但是当时疏忽没有拷贝url,本以为还可以再找到。
关闭页面后开始编程,过一会想找这个页面就找不到了,找了整整3个小时才找到。
以下是链接,没看过的一定要看一下,看过的略过
http://ask.dcloud.net.cn/article/25
,感觉社区目录排版有些混乱,或许是刚来的原因。
支持Dcloud!!
这是非常好的文章,偶然间读到这个文章,感觉非常有用,但是当时疏忽没有拷贝url,本以为还可以再找到。
关闭页面后开始编程,过一会想找这个页面就找不到了,找了整整3个小时才找到。
以下是链接,没看过的一定要看一下,看过的略过
http://ask.dcloud.net.cn/article/25
,感觉社区目录排版有些混乱,或许是刚来的原因。
支持Dcloud!!

Andriod下拉刷新失效,pullRefresh问题
今天做一个下拉刷新评论的模块,iOS版本上面正常,在Andriod上面却失效,查了很久最后发现原因是初始化载入数据的问题;
Andriod机器上,如果我一初始化瞬间就加载数据(loadComment),会导致整个下拉失效,后来发现需要延迟一点才可以,所以再plusReady防法上写了下面代码;
mui.plusReady(function(){
//加载评论
if(mui.os.android){
//Andriod容易加载太快导致初始化下拉失败
setTimeout('loadComment()',800);
}else{
loadComment();
}
});
mui.init({
pullRefresh: {
container: '#pullrefresh',
down:{
callback: pulldownRefresh
}
}
});
浪费了很多时间,所以写出来希望能给朋友们一些思路;
今天做一个下拉刷新评论的模块,iOS版本上面正常,在Andriod上面却失效,查了很久最后发现原因是初始化载入数据的问题;
Andriod机器上,如果我一初始化瞬间就加载数据(loadComment),会导致整个下拉失效,后来发现需要延迟一点才可以,所以再plusReady防法上写了下面代码;
mui.plusReady(function(){
//加载评论
if(mui.os.android){
//Andriod容易加载太快导致初始化下拉失败
setTimeout('loadComment()',800);
}else{
loadComment();
}
});
mui.init({
pullRefresh: {
container: '#pullrefresh',
down:{
callback: pulldownRefresh
}
}
});
浪费了很多时间,所以写出来希望能给朋友们一些思路;
收起阅读 »
H5国际化的实现[基于i18n]
要过年啦,客户的项目还没开始动工,客户就喊着要 客户端支持国际化,要中英文双语的。
....度娘....,果然还是有解决方案的。 依然是基于 jquery 的,学名:i18n
首先呢,还是加引用,可以是这样的。
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.i18n.properties-min-1.0.9.js"></script>
其次呢,Dom结构咯;这里我就简单的放了俩按钮,第一个是表现的,第二个用来点击触发改变用的;
<div class="mui-content">
<button id='btn'></button>
<button id='changelanguage'></button>
</div>
最后呢,就是js代码了
``````javascript
<script>
var lang = '';
$(function() {
lang = (jQuery.i18n.browserLang().substring(0, 2)); //默认从浏览器语言读取
jQuery.i18n.properties({
name: 'strings',
path: 'i18n/', //资源文件路径
mode: 'map', //用Map的方式使用资源文件中的值
language: lang,
callback: function() { //加载成功后设置显示内容
$('#btn').html($.i18n.prop('btn'));
$('#changelanguage').html($.i18n.prop('changelanguage'));
}
});
})
document.getElementById("changelanguage").addEventListener('tap', function() {
if ('zh' == lang) {
lang = 'en';
} else {
lang = 'zh';
}
jQuery.i18n.properties({
name: 'strings',
path: 'i18n/', //资源文件路径
mode: 'map', //用Map的方式使用资源文件中的值
language: lang,
callback: function() { //加载成功后设置显示内容
$('#btn').html($.i18n.prop('btn'));
$('#changelanguage').html($.i18n.prop('changelanguage'));
}
});
});
</script>
好了,上面都是页面上代码了,最最后就是对应的配置文件了,你不配置,代码怎么知道你的英文要先显示成什么中文呢??
只要指定要配置的id就行。比如上面的按钮的id是 btn,所以这里配置文件里 写btn;
没了。就这么多了,最后附上包
要过年啦,客户的项目还没开始动工,客户就喊着要 客户端支持国际化,要中英文双语的。
....度娘....,果然还是有解决方案的。 依然是基于 jquery 的,学名:i18n
首先呢,还是加引用,可以是这样的。
<script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.i18n.properties-min-1.0.9.js"></script>
其次呢,Dom结构咯;这里我就简单的放了俩按钮,第一个是表现的,第二个用来点击触发改变用的;
<div class="mui-content">
<button id='btn'></button>
<button id='changelanguage'></button>
</div>
最后呢,就是js代码了
``````javascript
<script>
var lang = '';
$(function() {
lang = (jQuery.i18n.browserLang().substring(0, 2)); //默认从浏览器语言读取
jQuery.i18n.properties({
name: 'strings',
path: 'i18n/', //资源文件路径
mode: 'map', //用Map的方式使用资源文件中的值
language: lang,
callback: function() { //加载成功后设置显示内容
$('#btn').html($.i18n.prop('btn'));
$('#changelanguage').html($.i18n.prop('changelanguage'));
}
});
})
document.getElementById("changelanguage").addEventListener('tap', function() {
if ('zh' == lang) {
lang = 'en';
} else {
lang = 'zh';
}
jQuery.i18n.properties({
name: 'strings',
path: 'i18n/', //资源文件路径
mode: 'map', //用Map的方式使用资源文件中的值
language: lang,
callback: function() { //加载成功后设置显示内容
$('#btn').html($.i18n.prop('btn'));
$('#changelanguage').html($.i18n.prop('changelanguage'));
}
});
});
</script>
好了,上面都是页面上代码了,最最后就是对应的配置文件了,你不配置,代码怎么知道你的英文要先显示成什么中文呢??
只要指定要配置的id就行。比如上面的按钮的id是 btn,所以这里配置文件里 写btn;
没了。就这么多了,最后附上包

MUI的TAP事件在部分手机上会执行2次
已经验证HBuilder 版本 HBuilder 6.9.2.201601052351
MUI框架的事件tap在很多机器上都会被执行2次,换成click事件问题立即解决。
绝对不是两个窗体或者2次绑定引起的。已经在INSPECT里面调试过了。只有一个窗体实例,元素上也只有1个TAP监听。
我一直要求员工都用MUI的TAP事件。例如用TAP打开一个窗口。造成窗口都要闪烁2次,我原来以为是加速造成,结果发现完全是TAP引起的。。一次偶然,用TAP事件上,绑定了一个plus.nativeUI.alert,结果弹了2次框,我这才发现这个问题。。立即把所有TAP都改成CLICK了,结果所有因2次执行引起的闪烁全部消失。
以上问题不是在全部机器上都出现。。我用自己的NOTE5出现,用一个华为的手机出现。。有些小米手机出现,有些不出现。。未深究TAP的JS代码,有时间多的高人看看有没有更好的解决方案。
已经验证HBuilder 版本 HBuilder 6.9.2.201601052351
MUI框架的事件tap在很多机器上都会被执行2次,换成click事件问题立即解决。
绝对不是两个窗体或者2次绑定引起的。已经在INSPECT里面调试过了。只有一个窗体实例,元素上也只有1个TAP监听。
我一直要求员工都用MUI的TAP事件。例如用TAP打开一个窗口。造成窗口都要闪烁2次,我原来以为是加速造成,结果发现完全是TAP引起的。。一次偶然,用TAP事件上,绑定了一个plus.nativeUI.alert,结果弹了2次框,我这才发现这个问题。。立即把所有TAP都改成CLICK了,结果所有因2次执行引起的闪烁全部消失。
以上问题不是在全部机器上都出现。。我用自己的NOTE5出现,用一个华为的手机出现。。有些小米手机出现,有些不出现。。未深究TAP的JS代码,有时间多的高人看看有没有更好的解决方案。
收起阅读 »
【分享】常见字符集,字符编码编码和相互之间的转换以及Base64加密
最近在用JS时,涉及到了不同编码之间的转换.于是汇总了一些网上的资料,整合成了自己的文档.
知识点涉及:
1.字符编码基础,几种常见字符编码的基本概念
- 不同编码之间的转换,如UTF-8转UTF-16,如UTF-16转GBK;
- Base64加密,GBK型与UTF-8型加密等
- 示例demo(js实现),比如如何用js将utf-16编码(js内置编码)转为UTF-8和GBK;比如如何将UTF-16编码的字符串(js内部的字符串)进行base64GBK和UTF-8编码
基础知识:(感谢@maq的提醒,这里普及下,字符集和字符编码的区别)
字符集(Charset):是一个系统支持的所有抽象字符的集合。字符是各种文字和符号的总称,包括各国家文字、标点符号、图形符号、数字等。
字符编码(Character Encoding):是一套法则,使用该法则能够对自然语言的字符的一个集合(如字母表或音节表),与其他东西的一个集合(如号码或电脉冲)进行配对。即在符号集合与数字系统之间建立对应关系,它是信息处理的一项基本技术。通常人们用符号集合(一般情况下就是文字)来表达信息。而以计算机为基础的信息处理系统则是利用元件(硬件)不同状态的组合来存储和处理信息的。元件不同状态的组合能代表数字系统的数字,因此字符编码就是将符号转换为计算机可以接受的数字系统的数,称为数字代码
常用字符集和字符编码
常见字符集名称:ASCII字符集、GB2312字符集、BIG5字符集、GB18030字符集、Unicode字符集等。计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。经常说的GB2312即是字符集也是字符编码,所以经常将字符集和字符编码混着说.
参考来源:http://www.cnblogs.com/skynet/archive/2011/05/03/2035105.html
注:原文是在csdn博客上的,这里就不重复了.直接给出链接.(里面包含demo)
最近在用JS时,涉及到了不同编码之间的转换.于是汇总了一些网上的资料,整合成了自己的文档.
知识点涉及:
1.字符编码基础,几种常见字符编码的基本概念
- 不同编码之间的转换,如UTF-8转UTF-16,如UTF-16转GBK;
- Base64加密,GBK型与UTF-8型加密等
- 示例demo(js实现),比如如何用js将utf-16编码(js内置编码)转为UTF-8和GBK;比如如何将UTF-16编码的字符串(js内部的字符串)进行base64GBK和UTF-8编码
基础知识:(感谢@maq的提醒,这里普及下,字符集和字符编码的区别)
字符集(Charset):是一个系统支持的所有抽象字符的集合。字符是各种文字和符号的总称,包括各国家文字、标点符号、图形符号、数字等。
字符编码(Character Encoding):是一套法则,使用该法则能够对自然语言的字符的一个集合(如字母表或音节表),与其他东西的一个集合(如号码或电脉冲)进行配对。即在符号集合与数字系统之间建立对应关系,它是信息处理的一项基本技术。通常人们用符号集合(一般情况下就是文字)来表达信息。而以计算机为基础的信息处理系统则是利用元件(硬件)不同状态的组合来存储和处理信息的。元件不同状态的组合能代表数字系统的数字,因此字符编码就是将符号转换为计算机可以接受的数字系统的数,称为数字代码
常用字符集和字符编码
常见字符集名称:ASCII字符集、GB2312字符集、BIG5字符集、GB18030字符集、Unicode字符集等。计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。经常说的GB2312即是字符集也是字符编码,所以经常将字符集和字符编码混着说.
参考来源:http://www.cnblogs.com/skynet/archive/2011/05/03/2035105.html
注:原文是在csdn博客上的,这里就不重复了.直接给出链接.(里面包含demo)
http://blog.csdn.net/u010979495/article/details/50601511
收起阅读 »
webview页面中的子webview之间相互操作
今天开发中遇到A 页面中嵌套了B页面,然后B页面中的数据收到的值变化时,切A页面的稿件的参数也要变化见图!
开始一直通过plus.webview.getWebviewById('URL').evalJS();去操控A页面的函数方法,但是一直不可以,拿不到A的webview,后来去认
真看了API文档后才发现自己进入到了一个误区!
因为是嵌套的webview所以,我们可以先拿到当前我们操作的这个页面,就是我所谓的B页面的webview;
var centerView= plus.webview.currentWebview();
然后我们再去拿到B页面的父页面,就是所谓的A webview页面;
var par=centerView.parent();
关于parent这个方法参考地址:http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.parent
这样我们就拿到了最外层的的父webview,然后操控par.evalJS();就可以执行A页面的函数了!
虽然我的描述方式差,逻辑差,文笔也差,这点东西也算不上什么,给予那些正需要的人的一点帮助吧!因为我就是没有在论坛找到相应
的解决办法(也可能有,但是我没有搜索对关键词,其次就是这个网站的搜索太垃圾了!嘻嘻),才去看文档的,不过建议还是多看文档!
今天开发中遇到A 页面中嵌套了B页面,然后B页面中的数据收到的值变化时,切A页面的稿件的参数也要变化见图!
开始一直通过plus.webview.getWebviewById('URL').evalJS();去操控A页面的函数方法,但是一直不可以,拿不到A的webview,后来去认
真看了API文档后才发现自己进入到了一个误区!
因为是嵌套的webview所以,我们可以先拿到当前我们操作的这个页面,就是我所谓的B页面的webview;
var centerView= plus.webview.currentWebview();
然后我们再去拿到B页面的父页面,就是所谓的A webview页面;
var par=centerView.parent();
关于parent这个方法参考地址:http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.parent
这样我们就拿到了最外层的的父webview,然后操控par.evalJS();就可以执行A页面的函数了!
虽然我的描述方式差,逻辑差,文笔也差,这点东西也算不上什么,给予那些正需要的人的一点帮助吧!因为我就是没有在论坛找到相应
的解决办法(也可能有,但是我没有搜索对关键词,其次就是这个网站的搜索太垃圾了!嘻嘻),才去看文档的,不过建议还是多看文档!

M站、WAP站改造流应用指南
在wap2app推出后,开发者根据wap2app即可快速完成app及流应用提交。
具体见http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13425
============以下内容已过期=================
背景和问题
流应用本身是可以达到原生app的体验的,从应用体验来讲,c/s方式比b/s方式体验更好:
- c/s的首页启动更快;
- c/s的页面转场更快;
- c/s具有脱线访问性。
所以如果开发新app,我们建议开发者使用mui框架,开发一次多端发布,流应用、wap、app都自动生成。
不过实际情况中大量开发商已经有了wap站和原生app,但仍需要制作流应用,那么此时他们需要一种在开发成本和用户体验之间取得平衡的一种方法。
如何基于m站快速改造出流应用,体验还不错,并维持版本的统一更新发布,这是本文讲解的内容。
前提准备
m站的体验本身要好,控件风格app化而不是浏览器化。
反面例子:有的m站的列表仍然是超链接方式,而不是list方式,体验就很差。举例:http://www.beijing.gov.cn/sjbsy/
正面例子:卖座电影
这些链接如果在pc上打开,请在浏览器控制台里调整为手机模式观看。
当然大多数m站的实际状态是处于2者之间的。
在改造方面,有两种大的思路。
- 修改m站源码,根据ua动态引用增强的js,发现ua包含html5plus或stream时,动态引入一些js,实现对HTML5+扩展能力的调用
- 不修改m站源码,利用wap2app框架进行wap站配置,完成增强体验,wap2app教程建议从《wap2app快速体验》开始入手。
因为wap2app相对成熟,有完整的教程,本文不做过多解释,重点讲解第一种思路,即:修改m站源码,实现流应用的发布。
改造工作
-
首页
如果是直接改wap站源码,那么在首页引入一个streamapp.js的文件,然后在这个js里编写代码控制整个app的体验强化。
同时注意在这个js要拦截所有页面切换请求,点击首页后的所有窗体切换均为新开webview,保证首页的webview一直存在,否则强化的js文件也会不见掉,导致无法再生效。我们需要在HBuilder里新建一个移动app项目,才能提交流应用。新建工程时注意调整manifest.json:
a) 项目首页就是wap站地址
b) 项目的manifest.json 加 popGesture":"close"
c) 控制页create显示webview时,webview style设置popGesture为none
不调整的话,在iOS上左滑屏幕返回时会露出空白的控制webview。
d) 强制打开硬件加速,具体参考http://ask.dcloud.net.cn/article/94 -
登陆注册体验
很多wap站的用户登陆cookie有效期只有一周,一周后需要用户重新输入用户名密码,app可不会这么设计。如果用户在桌面安装了一个流应用,就不应该让他一周后重新输入用户名密码登陆。开发者可根据流应用引擎的ua(包括steamapp)判断,设置流应用的cookie有效期为永久。
还有很多wap站在登陆时需要输入验证码,这都是比较糟糕的体验,同样也需要判断ua,去掉验证码。注册优化也是很重要的问题,对于技术人员而言,未必关心从app激活到注册之间的折损,但产品负责人和运营是非常关心这个数据的。
流应用提供了优化注册折损的方案,通过plus.oauth,可以调用一键登入,如果wap站本身有单点登陆接口,尽量支持好流应用的一键登陆。
尤其是用户注册基数不大或品牌不强的新app,如果用户体验产品或消费下单前有比较高的注册门槛,很容易折损流失。
需要开发单点登陆的开发商,除了客户端调用plus.oauth外还需要服务器对接。请加入底部显示的流应用qq群,与管理员沟通,我们会单独提供服务器端对接的文档和api。 -
back处理
浏览器的back是非常难用的,它的顺序是用户访问页面的先后顺序,而不是app的逻辑顺序,流应用的back逻辑需要单独处理。
Android的back按键需要通过plus.key来监听和处理,不能简单的走网页的前进后退,要按app的逻辑处理后退。
比如,页面A跳转到B时发现需要登陆,进入了登陆页C,登陆后又进入了页面B,此时点back,要求回页面A,而不是后退到登陆页。
再比如,从首页点了一个栏目1,back回首页,然后点了栏目2,再back回首页,此时按back,应该提醒是否退出app而不是后退到栏目1里。一般在首页里按back一定是提醒退出app而不是走浏览器的history back。
另外注意有的列表页面滚动后,点一个列表项进入下一个页面,点back回到刚才的列表页面,但滚动条跑最顶部了,这种情况体验太差,要处理。
流应用需要在首页监听back按键,设计退出逻辑,比如连续按2下back退出,或者按一下back弹出confirm框,询问用户是否退出。
如果用户是push或wap导流来的,那么退出时,应提示用户下次可以从桌面直接启动,不然会有不少用户不知道桌面多了一个图标。
除了页面切换的back,当页面中出现一个div选择层,此时点back应该是关闭选择层而不是整体后退。
参考http://www.html5plus.org/doc/zh_cn/key.html -
页面切换等待
页面切换不能白屏,不能依赖浏览器的进度条,切换过程要有自己的模态进度指示如转雪花,避免在新页面切换完成前用户连续点击引发问题。
参考http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.Waiting
由于wap网页的载入速度较慢,一般的体验优化做法是在首页注入的控制js里绘制一个原生的title,使用plus.nativeobj里的原生view绘制title,可以快速展现title出来,然后title下面加载wap页面。 -
去wap的展现形式
有些wap页面底部有电脑版、手机版,还有版权或icp信息,还有原生app的下载banner,这都不是app感觉,都需要去掉;实现方案参考:如何在流应用环境下去wap化展现 -
原生定位
如果业务涉及定位,把HTML5的定位改为plus的原生定位。
HTML5的定位会弹框让用户选择是否允许某网页访问位置,体验太差,而且HTML5的定位速度、精度都不够。改调原生定位又快又准又不弹框。
流应用提供的定位是高德定位的坐标系。
在物流相关业务里,配送地址可以通过流应用的api查询到街道信息,可以自动填写到送货地址的输入框中,避免用户敲太多字。
用户有可能未开启手机的gps或未给应用赋予定位权限,对于强定位需求的app,需要写代码调用流应用的api判断并提醒用户开启gps或相应权限,在弹出框跳转到系统设置里开启定位或赋权并返回后,应自动刷新重调定位api。
参考:http://html5plus.org/doc/zh_cn/geolocation.html
参考:http://ask.dcloud.net.cn/question/11890 -
原生支付
流应用提供了原生的支付宝支付和微信支付能力,开发商可参考流应用提供的原生支付api,改进支付体验。
目前支付宝和微信支付,都支持通过h5的schemes调起本机的原生app进行原生支付,体验比较好,wap站改造量也比较小。
关于微信的h5支付,需要开发商向微信申请微信wap支付资格,有了该资格,可以在HTML5页面里直接调起微信的原生支付。
微信wap支付其实就是微信公众号里的支付方式,可以放大到不止是在微信浏览器里可支付,在外部浏览器里也可以再调起微信来完成支付。
目前大大小小很多开发商都申请到了wap支付资格,比如京东、唯品会、卖座电影、蛋糕叔叔…
开发商之前的M站的支付宝支付都是wap支付,要输入较长的用户名、密码,体验差、折损高。
目前看到的数据是用户点微信和支付宝的占比基本是55开,这两种支付方式都应该优化到位。 -
硬件加速
如果是使用控制webview创建显示webview的方式做流应用,注意在显示webview创建时对webview开启硬件加速,以提升页面滚动流畅度。
参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyle 里的hardwareAccelerated -
网络异常处理
网络异常导致页面打不开或ajax请求失败,需要单独控制。因为在浏览器里有工具栏和刷新按钮,用户可以自己刷新,但在流应用里没有刷新按钮。而且一旦进入404界面会很难看。
推荐的体验是流应用的本地代码有网络监听判断,如果用户没有开启网络,则应该提醒用户开启,如果用户网络异常,应弹出提示框,让用户选择重试或退出。
参考 http://www.html5plus.org/doc/zh_cn/device.html#plus.networkinfo
参考 http://ask.dcloud.net.cn/question/1475 -
Titile处理
有些wap页面没有title或title不能固定,在全屏app界面里不应该出现这种情况,需要每个界面都有title、并且保持固定在顶部。除首页外每个界面的左上角都应该有返回按钮,不能仅依赖back按键来返回。 -
桌面快捷方式修复
桌面快捷方式驻留是流应用留存率的基础。可以从桌面直接启动才能增加次日或7日留存。
用户可能会误删除桌面上的某流应用的快捷方式。所以需要app在关于界面或其他合适位置放置快捷方式修复的按钮。
体验参考 大众点评外卖流应用的右上角关于按钮。
代码参考:http://ask.dcloud.net.cn/article/406 -
打点统计
流应用是可以采集imei的,流应用的统计不是按uv统计,而是按imei的激活统计。
流应用启动后,应像App一样给后台App统计系统报数打点。
DCloud给所有流应用开发商提供了数据报表,因为流应用客户端包的下载和更新是在我们的服务器上,并且每个流应用每次启动时会自动检查更新,所以我们可以给开发商完善的报表数据,包括下载、激活、日活、留存、总设备数以及下载来源分析,比如是搜索下载、快码下载、分享下载、wap导量下载、push下载...。DCloud还有订单回传接口,开发商调用后还可在DCloud提供的报表系统里看到订单统计。
大开发商一般要求自己的后台也需要报数统计,并m站的uv统计是现成的。但是uv不如imei准,有些开发商发现自己统计的uv多于DCloud报表里提供的日活,建议开发商把uv统计里的cookie id值设为imei,通过plus.device取imei,这样开发商的uv和DCloud报表里的激活能对上。
如果想采集本机是否安装了本公司的其他app产品或竞品的安装情况,也是可以采集的。
参考:http://www.html5plus.org/doc/zh_cn/device.html
参考:http://ask.dcloud.net.cn/question/7604 -
快码和直通车
快码和分享直通车是流应用的重要功能,对于拉新和二次传播作用明显,建议使用。
快码无需开发,在HBuilder的菜单发行里申请即可。
这里是快码的介绍和申请指南:http://ask.dcloud.net.cn/article/492直通车需要开发,但社交直购等分享直通车的功能价值很明显。
体验参考 大众点评外卖流应用的右上角关于按钮里的快码和饭馆分享里的分享直通车。
视频参考:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_r0171bswy6f.html
代码参考 Hello H5+里的分享源代码。 -
其他细节
如果涉及到照片选择上传、文件上传、摄像头麦克风控制,也请将HTML5的代码替换为HTML5+的代码,以得到更好的体验。
参考:http://www.html5plus.org/doc/
关于一次开发多端发布
通过条件编译工具如glup,可以做到一套代码同时输出m站和流应用,避免多处维护业务逻辑变更的烦恼。
Mui框架本身是支持多端发布的,Hello mui是一个浏览器、流应用、Android app、iOS app一套代码多端均可使用的示例,可参考Hello mui的代码。
案例推荐
关于把M站改造为流应用,可以参考如下案例。
唯品会
唯品会是wap站改造流应用里做的体验较好的应用。
唯品会的业务特点决定了其页面里大量动态内容,其原生app里也有很多wap页面。
流应用版的唯品会和原生版的唯品会差异很小。
请使用360手助扫码体验
合作支持
对于有较大流量的wap站,可以发邮件到stream@dcloud.io,说明wap站地址和联系方式,我们可以提供电话咨询,协助快速完成转换。
在wap2app推出后,开发者根据wap2app即可快速完成app及流应用提交。
具体见http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/13425
============以下内容已过期=================
背景和问题
流应用本身是可以达到原生app的体验的,从应用体验来讲,c/s方式比b/s方式体验更好:
- c/s的首页启动更快;
- c/s的页面转场更快;
- c/s具有脱线访问性。
所以如果开发新app,我们建议开发者使用mui框架,开发一次多端发布,流应用、wap、app都自动生成。
不过实际情况中大量开发商已经有了wap站和原生app,但仍需要制作流应用,那么此时他们需要一种在开发成本和用户体验之间取得平衡的一种方法。
如何基于m站快速改造出流应用,体验还不错,并维持版本的统一更新发布,这是本文讲解的内容。
前提准备
m站的体验本身要好,控件风格app化而不是浏览器化。
反面例子:有的m站的列表仍然是超链接方式,而不是list方式,体验就很差。举例:http://www.beijing.gov.cn/sjbsy/
正面例子:卖座电影
这些链接如果在pc上打开,请在浏览器控制台里调整为手机模式观看。
当然大多数m站的实际状态是处于2者之间的。
在改造方面,有两种大的思路。
- 修改m站源码,根据ua动态引用增强的js,发现ua包含html5plus或stream时,动态引入一些js,实现对HTML5+扩展能力的调用
- 不修改m站源码,利用wap2app框架进行wap站配置,完成增强体验,wap2app教程建议从《wap2app快速体验》开始入手。
因为wap2app相对成熟,有完整的教程,本文不做过多解释,重点讲解第一种思路,即:修改m站源码,实现流应用的发布。
改造工作
-
首页
如果是直接改wap站源码,那么在首页引入一个streamapp.js的文件,然后在这个js里编写代码控制整个app的体验强化。
同时注意在这个js要拦截所有页面切换请求,点击首页后的所有窗体切换均为新开webview,保证首页的webview一直存在,否则强化的js文件也会不见掉,导致无法再生效。我们需要在HBuilder里新建一个移动app项目,才能提交流应用。新建工程时注意调整manifest.json:
a) 项目首页就是wap站地址
b) 项目的manifest.json 加 popGesture":"close"
c) 控制页create显示webview时,webview style设置popGesture为none
不调整的话,在iOS上左滑屏幕返回时会露出空白的控制webview。
d) 强制打开硬件加速,具体参考http://ask.dcloud.net.cn/article/94 -
登陆注册体验
很多wap站的用户登陆cookie有效期只有一周,一周后需要用户重新输入用户名密码,app可不会这么设计。如果用户在桌面安装了一个流应用,就不应该让他一周后重新输入用户名密码登陆。开发者可根据流应用引擎的ua(包括steamapp)判断,设置流应用的cookie有效期为永久。
还有很多wap站在登陆时需要输入验证码,这都是比较糟糕的体验,同样也需要判断ua,去掉验证码。注册优化也是很重要的问题,对于技术人员而言,未必关心从app激活到注册之间的折损,但产品负责人和运营是非常关心这个数据的。
流应用提供了优化注册折损的方案,通过plus.oauth,可以调用一键登入,如果wap站本身有单点登陆接口,尽量支持好流应用的一键登陆。
尤其是用户注册基数不大或品牌不强的新app,如果用户体验产品或消费下单前有比较高的注册门槛,很容易折损流失。
需要开发单点登陆的开发商,除了客户端调用plus.oauth外还需要服务器对接。请加入底部显示的流应用qq群,与管理员沟通,我们会单独提供服务器端对接的文档和api。 -
back处理
浏览器的back是非常难用的,它的顺序是用户访问页面的先后顺序,而不是app的逻辑顺序,流应用的back逻辑需要单独处理。
Android的back按键需要通过plus.key来监听和处理,不能简单的走网页的前进后退,要按app的逻辑处理后退。
比如,页面A跳转到B时发现需要登陆,进入了登陆页C,登陆后又进入了页面B,此时点back,要求回页面A,而不是后退到登陆页。
再比如,从首页点了一个栏目1,back回首页,然后点了栏目2,再back回首页,此时按back,应该提醒是否退出app而不是后退到栏目1里。一般在首页里按back一定是提醒退出app而不是走浏览器的history back。
另外注意有的列表页面滚动后,点一个列表项进入下一个页面,点back回到刚才的列表页面,但滚动条跑最顶部了,这种情况体验太差,要处理。
流应用需要在首页监听back按键,设计退出逻辑,比如连续按2下back退出,或者按一下back弹出confirm框,询问用户是否退出。
如果用户是push或wap导流来的,那么退出时,应提示用户下次可以从桌面直接启动,不然会有不少用户不知道桌面多了一个图标。
除了页面切换的back,当页面中出现一个div选择层,此时点back应该是关闭选择层而不是整体后退。
参考http://www.html5plus.org/doc/zh_cn/key.html -
页面切换等待
页面切换不能白屏,不能依赖浏览器的进度条,切换过程要有自己的模态进度指示如转雪花,避免在新页面切换完成前用户连续点击引发问题。
参考http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.Waiting
由于wap网页的载入速度较慢,一般的体验优化做法是在首页注入的控制js里绘制一个原生的title,使用plus.nativeobj里的原生view绘制title,可以快速展现title出来,然后title下面加载wap页面。 -
去wap的展现形式
有些wap页面底部有电脑版、手机版,还有版权或icp信息,还有原生app的下载banner,这都不是app感觉,都需要去掉;实现方案参考:如何在流应用环境下去wap化展现 -
原生定位
如果业务涉及定位,把HTML5的定位改为plus的原生定位。
HTML5的定位会弹框让用户选择是否允许某网页访问位置,体验太差,而且HTML5的定位速度、精度都不够。改调原生定位又快又准又不弹框。
流应用提供的定位是高德定位的坐标系。
在物流相关业务里,配送地址可以通过流应用的api查询到街道信息,可以自动填写到送货地址的输入框中,避免用户敲太多字。
用户有可能未开启手机的gps或未给应用赋予定位权限,对于强定位需求的app,需要写代码调用流应用的api判断并提醒用户开启gps或相应权限,在弹出框跳转到系统设置里开启定位或赋权并返回后,应自动刷新重调定位api。
参考:http://html5plus.org/doc/zh_cn/geolocation.html
参考:http://ask.dcloud.net.cn/question/11890 -
原生支付
流应用提供了原生的支付宝支付和微信支付能力,开发商可参考流应用提供的原生支付api,改进支付体验。
目前支付宝和微信支付,都支持通过h5的schemes调起本机的原生app进行原生支付,体验比较好,wap站改造量也比较小。
关于微信的h5支付,需要开发商向微信申请微信wap支付资格,有了该资格,可以在HTML5页面里直接调起微信的原生支付。
微信wap支付其实就是微信公众号里的支付方式,可以放大到不止是在微信浏览器里可支付,在外部浏览器里也可以再调起微信来完成支付。
目前大大小小很多开发商都申请到了wap支付资格,比如京东、唯品会、卖座电影、蛋糕叔叔…
开发商之前的M站的支付宝支付都是wap支付,要输入较长的用户名、密码,体验差、折损高。
目前看到的数据是用户点微信和支付宝的占比基本是55开,这两种支付方式都应该优化到位。 -
硬件加速
如果是使用控制webview创建显示webview的方式做流应用,注意在显示webview创建时对webview开启硬件加速,以提升页面滚动流畅度。
参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyle 里的hardwareAccelerated -
网络异常处理
网络异常导致页面打不开或ajax请求失败,需要单独控制。因为在浏览器里有工具栏和刷新按钮,用户可以自己刷新,但在流应用里没有刷新按钮。而且一旦进入404界面会很难看。
推荐的体验是流应用的本地代码有网络监听判断,如果用户没有开启网络,则应该提醒用户开启,如果用户网络异常,应弹出提示框,让用户选择重试或退出。
参考 http://www.html5plus.org/doc/zh_cn/device.html#plus.networkinfo
参考 http://ask.dcloud.net.cn/question/1475 -
Titile处理
有些wap页面没有title或title不能固定,在全屏app界面里不应该出现这种情况,需要每个界面都有title、并且保持固定在顶部。除首页外每个界面的左上角都应该有返回按钮,不能仅依赖back按键来返回。 -
桌面快捷方式修复
桌面快捷方式驻留是流应用留存率的基础。可以从桌面直接启动才能增加次日或7日留存。
用户可能会误删除桌面上的某流应用的快捷方式。所以需要app在关于界面或其他合适位置放置快捷方式修复的按钮。
体验参考 大众点评外卖流应用的右上角关于按钮。
代码参考:http://ask.dcloud.net.cn/article/406 -
打点统计
流应用是可以采集imei的,流应用的统计不是按uv统计,而是按imei的激活统计。
流应用启动后,应像App一样给后台App统计系统报数打点。
DCloud给所有流应用开发商提供了数据报表,因为流应用客户端包的下载和更新是在我们的服务器上,并且每个流应用每次启动时会自动检查更新,所以我们可以给开发商完善的报表数据,包括下载、激活、日活、留存、总设备数以及下载来源分析,比如是搜索下载、快码下载、分享下载、wap导量下载、push下载...。DCloud还有订单回传接口,开发商调用后还可在DCloud提供的报表系统里看到订单统计。
大开发商一般要求自己的后台也需要报数统计,并m站的uv统计是现成的。但是uv不如imei准,有些开发商发现自己统计的uv多于DCloud报表里提供的日活,建议开发商把uv统计里的cookie id值设为imei,通过plus.device取imei,这样开发商的uv和DCloud报表里的激活能对上。
如果想采集本机是否安装了本公司的其他app产品或竞品的安装情况,也是可以采集的。
参考:http://www.html5plus.org/doc/zh_cn/device.html
参考:http://ask.dcloud.net.cn/question/7604 -
快码和直通车
快码和分享直通车是流应用的重要功能,对于拉新和二次传播作用明显,建议使用。
快码无需开发,在HBuilder的菜单发行里申请即可。
这里是快码的介绍和申请指南:http://ask.dcloud.net.cn/article/492直通车需要开发,但社交直购等分享直通车的功能价值很明显。
体验参考 大众点评外卖流应用的右上角关于按钮里的快码和饭馆分享里的分享直通车。
视频参考:http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_r0171bswy6f.html
代码参考 Hello H5+里的分享源代码。 -
其他细节
如果涉及到照片选择上传、文件上传、摄像头麦克风控制,也请将HTML5的代码替换为HTML5+的代码,以得到更好的体验。
参考:http://www.html5plus.org/doc/
关于一次开发多端发布
通过条件编译工具如glup,可以做到一套代码同时输出m站和流应用,避免多处维护业务逻辑变更的烦恼。
Mui框架本身是支持多端发布的,Hello mui是一个浏览器、流应用、Android app、iOS app一套代码多端均可使用的示例,可参考Hello mui的代码。
案例推荐
关于把M站改造为流应用,可以参考如下案例。
唯品会
唯品会是wap站改造流应用里做的体验较好的应用。
唯品会的业务特点决定了其页面里大量动态内容,其原生app里也有很多wap页面。
流应用版的唯品会和原生版的唯品会差异很小。
请使用360手助扫码体验
合作支持
对于有较大流量的wap站,可以发邮件到stream@dcloud.io,说明wap站地址和联系方式,我们可以提供电话咨询,协助快速完成转换。
收起阅读 »