DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-04-11 00:07
  • 更新:2017-04-11 00:07
  • 阅读:5771

应用退出时,通过toast提醒用户反馈意见

分类:流应用

尽可能多且准确地采集用户意见,对于产品改进至关重要;常见的用户反馈入口有两种:

  • 主动弹框提醒:用户需要中断当前操作,手动关闭弹框,体验不好
  • 深藏设置菜单:用户一般很少看设置界面,很少看到问题反馈入口

如何高频提醒但又不打扰用户业务操作呢?我们提供了一种在应用退出的toast信息中,增加"反馈意见"的入口,效果图如下:

实现如上效果图,思路比较简单:

  • 重写首页的mui.back,用户按下back键时校验是否存在退出的toast;若存在toast,则直接退出应用;否则显示toast信息;
  • toast信息中传入HTML代码,增加一个“反馈意见”的链接
  • 点击“反馈意见”链接,打开问题反馈页面

备注:plus环境下使用div模式的toast,需保证mui版本在v3.5.0以上;

根据如上思路,我们可以写出如下框架代码:

/**  
 * 打开问题反馈页面  
 */  
 window.__openFeed = function() {  
     //TODO 实现打开问题反馈页面逻辑  
 }  

var _toast = false;  
/**  
 * 重写mui.back,用户退出时提示反馈使用体验  
 */  
mui.back = function() {  
    if(!_toast || !_toast.isVisible()) {  
        _toast = mui.toast('再按一次返回键退出<br>点此可&nbsp;<span style="border-bottom:1px solid #fff" onclick="__openFeed();">反馈意见</span>', {  
            duration: 'long',  
            type: 'div'  
        });  
    } else {  
        plus.runtime.quit();  
    }  
}

接下来的工作就是实现打开问题反馈页面的window.__openFeed方法,这里有两种实现思路:

  • 打开本地问题反馈页面
  • 打开云端问题反馈页面

打开本地问题反馈页面

mui很早就发布了问题反馈的页面模板,在HBuilder中新建HTML页面时选择"mui问题反馈"模板组即可,如下图所示:

然后填充如上代码中的window.__openFeed方法,如下:

//打开本地问题反馈页面  
window.__openFeed = function() {  
    plus.nativeUI.showWaiting();  
    //feedback.html路径根据实际工程代码调整  
    var feedbackWebview = plus.webview.create("feedback.html", "__W2A_FEEDBACK");  
    feedbackWebview.addEventListener('titleUpdate', function() {  
        plus.nativeUI.closeWaiting();  
        feedbackWebview.show('slide-in-right', 300);  
    });  
}

该模式的优缺点如下:

  • 优点:支持自定义,可随意修改样式、快捷输入内容等
  • 缺点:增加应用资源包大小

打开云端问题反馈页面(流应用下推荐)

DCloud同时提供了云端问题反馈页面,开发者无需在项目中集成feedback页面模板资源,直接打开在线反馈地址,同样可以完成问题反馈;这种模式的实现代码如下:

/*****开发者需修改的部分   开始*****/  
var _appinfo = {  
    app_name: "", //应用名称  
    about: "" //关于页面路径,注意需要_www前缀  
}  
/*****开发者需修改的部分   结束*****/  

/**  
 * 打开在线问题反馈页面  
 */  
 window.__openFeed = function() {  
    plus.nativeUI.showWaiting();  
    var _p = plus.os.name === 'Android' ? 'a' : plus.os.name === 'iOS' ? 'i' : '';  
    //TODO:这里使用的是FeedBack云地址,开发者也可以替换为本地页面地址  
    var url = 'https://service.dcloud.net.cn/feedback?p=' + _p;  
    url += "&plus_version=" + plus.runtime.innerVersion;  
    url += "&vendor=" + plus.device.vendor;  
    url += "&md=" + plus.device.model;  
    _appinfo.app_name && (url += "&app_name=" + encodeURIComponent(_appinfo.app_name));  
    _appinfo.about && (url += "&about=" + _appinfo.about);  

    var feedbackWebview = plus.webview.create(url, "__W2A_FEEDBACK");  
    feedbackWebview.addEventListener('titleUpdate', function() {  
        plus.nativeUI.closeWaiting();  
        feedbackWebview.show('slide-in-right', 300);  
    });  
}

_appinfo中的字段均为选填项:

  • app_name若填写,以这里的app_name为准;若未填写,则自动读取manifest.json中的name节点;
  • about为关于页面地址,若填写,则可从云端“问题反馈”页面,跳转到本地的关于页面;

该模式的优缺点如下:

  • 优点:在线打开,减少应用资源包大小,提高发行效率
  • 缺点:可定制性较弱

备注:云端问题反馈页面对于5+ App和流应用均适用。

云端查看数据

不管以何种模式打开问题反馈页面,云端查看数据的方式都是一致的,都是登录开发者中心,选择对应应用查看,具体参考问题反馈云服务已上线

2 关注 分享
Trust goto_217@163.com

要回复文章请先登录注册

nuqut@qq.com

nuqut@qq.com

谢谢谢谢
2018-07-28 06:37
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 GuLai:
这个toast就是div模拟的,你通过chrome查看css样式,复写css即可。
2018-04-24 10:50
GuLai

GuLai

toast的样式可以设置么?怎么设置
2018-04-23 17:31
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 1184738342@qq.com:
和appid绑定的,登录dev.dcloud.net.cn后台,查看该应用对应的appid,点击左侧的应用名称,可以查看应用相关统计数据及问题反馈内容
2018-03-11 20:54
1184738342@qq.com

1184738342@qq.com

这个上传数据后我怎么在我注册的账号中查看?
app如何和DCloud绑定关联?
2018-03-09 11:38