HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

消息推送一个好功能,90%的开发者都不知道

消息推送

1.个推报表简介

推送数据报表主要用于统计某一条消息的具体下发情况。单条推送消息下发用户总量有多少,其中成功推送到手机的数量有多少,又有多少用户看到了弹窗通知、点击了弹窗通知并打开了应用。通过消息推送报表可以很直观地看到推送消息流转情况、消息下发到达成功率、用户对消息的点击情况等。

当然推送报表不单单只有上述这一种维度,个推的推送统计主要分了三个维度:消息推送维度、APP推送维度、APP用户维度。

  • 消息推送维度:针对单个消息推送,提供单条消息推送的下发成功数,手机到达数,弹窗展示数等
  • APP推送维度:针对应用单日所有消息推送,单日所有任务的下发成功数,手机到达数,弹窗展示数等
  • APP用户维度:针对应用单日用户数据,应用单日新增用户数、在线用户数等

上述三个维度的推送数据统计则是通过个推开发者中心服务端SDK集成接口来进行输出。个推开发者中心提供详细的可视化图表,服务端SDK集成接口则提供服务端的数据记录和统计。两者的数据都是一致的,但功能和数据类型上有些许不同,使用者可以根据自己需求选用不同的方式。下面将分别从个推开发者中心服务端SDK集成接口两方面对个推报表进行阐述。

2.开发者中心

登录个推开发者中心,在产品与服务界面选择个推消息推送消息推送后进入了应用列表页面,选择相应的应用,点击数据报表即可在数据统计栏目中看到各个维度的推送统计数据。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190920160039840.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHJvaWxseQ==,size_16,color_FFFFFF,t_70 =200x300)

2.1 推送记录

推送记录中保存了所有的历史推送,通过点击 "推送数据" 可以查询该推送的任务报表情况。
在这里插入图片描述

2.2 推送数据(消息推送维度)

针对单个消息推送,提供报表数据。

  • 百日联网用户数:最近百日所有打开过APP的用户,可以理解为预计可以下发的用户总量。
  • 成功下发数:消息下发的实际用户量。APP在手机后台中存活才会进行下发,否则不会进行消息下发。
  • 到达数:成功下发到手机的消息数。到达手机后因为网络等原因,无法回执到服务端,所以成功下发数会略大于到达数。
  • 展示数:手机弹窗展示消息的数量。部分用户可能对应用设置了禁止弹窗,所以到达数会大于展示数。
  • 点击数:手机用户点击弹窗通知的数量
    在这里插入图片描述
    上图中展示的报表数据是个推+其他渠道的累加数据,点击详情即可看到各个渠道下发统计。其中的 "-" 表示不支持该字段报表
    在这里插入图片描述

2.3 推送统计(APP推送维度)

推送统计从APP推送维度出发,对APP当天所有任务的下发数据进行统计。举个例子,APP开发者15号下发的消息,可能用户16号打开手机才会收到,但是此次数据仍会统计到15号的推送统计中。针对这种情况,个推会对APP统计数据在三天内予以持续更新。所以APP推送统计数据会在之后的三天持续更新。日联网用户数:当天打开应用的用户数

  • 成功下发数、到达数、展示数、点击数:和上述一致

点击展开也能看到各个渠道的App维度统计。
在这里插入图片描述

2.5 实时性和准确性

创建一个新的推送任务,能够实时地看到推送的总体趋势,趋势数据会进行实时更新。
在这里插入图片描述

已完成推送的任务报表数据,为什么到了第二天数据会发生变化?
个推内部推送数据报表分成两种:实时报表和统计报表。第二天统计报表会对前一天的实时报表进行修正。

实时报表以实时性为主,具有实时更新的功能。APP开发者如果想查看当天下发的任务数据,可以选择实时报表。。相比起实时报表,统计报表更加注重准确性,旨在通过统计分析,对数据进行筛选、去重,得到最终的准确报表。APP开发者一般隔天就能查询到准确的报表数据。

3.服务端SDK集成接口

在官网提供的SDK Demo中就有示例程序,做了很好的封装,返回结果也做了预处理。。APP开发者只需要传入简单的参数即可完成报表查询, SDK接口提供了一些开发者平台中没有的数据统计服务,如用户数据中的最近24小时在线趋势统计、根据用户条件查询用户数等。
详细可参考 文档中心Java服务端集成文档

/**  
 * 推送结果相关demo  
 */  
public class PushResultDemo {  

    public static IGtPush gtPush = new IGtPush(APPKEY, MASTERSECRET);  

    /**  
     * 获取推送结果,可查询消息有效可下发总数,消息回执总数,用户点击数等结果。  
     * @param taskId  
     */  
    private static void getPushResultByTaskId(String taskId) {  
        Map<String, Object> ret = gtPush.getPushResult(taskId).getResponse();  
        System.out.println(JSON.toJSONString(ret));  
    }  

    /**  
     * 获取应用单日的推送数据(推送数据包括:发送总数,在线发送数,接收数,展示数,点击数)(目前只支持查询1天前的数据)  
     */  
    private static void queryAppPushDataByDate(String date) {  
        IQueryResult ret = gtPush.queryAppPushDataByDate(APPID, date);  
        Map<String, Object> res = ret.getResponse();  
        System.out.println(JSON.toJSONString(ret));  
        for(Map.Entry<String,Object> entry: res.entrySet()){  
            System.out.println(entry.getKey()+" "+entry.getValue());  
        }  
    }  

     /**  
     * 通过接口查询当前时间一天内的在线数(十分钟一个点,一小时六个点)  
     */  
    private static void getLast24HoursOnlineUserStatistics () {  
        IQueryResult queryResult = push.getLast24HoursOnlineUserStatistics(APPID);  
        System.out.println(queryResult.getResponse().get("onlineStatics"));  
    }  

    /**  
     * 获取某个应用单日的用户数据(用户数据包括:新增用户数,累计注册用户总数,在线峰值,日联网用户数)  
注:目前可查询1天前的数据  
     */  
    private static void queryAppUserDataByDate(String date) {  
        IQueryResult ret = push.queryAppUserDataByDate(APPID, date);  
        System.out.println(ret.getResponse().toString());  

        Map<String, Object> data = (Map<String, Object>) ret.getResponse().get("data");  
        System.out.println("新用户注册总数:"+data.get("newRegistCount"));  
        System.out.println("用户注册总数:"+data.get("registTotalCount"));  
        System.out.println("活跃用户数:"+data.get("activeCount"));  
        System.out.println("在线用户数:"+data.get("onlineCount"));  
    }  

}

小结

推送数据报表是个推消息推送服务中的重要组成成分,通过推送报表可以直观、准确地了解消息触达用户的详细情况,对推送数据一目了然。个推将针对报表服务不断优化,为APP开发者们提供更加完善的推送数据统计支持。

继续阅读 »

1.个推报表简介

推送数据报表主要用于统计某一条消息的具体下发情况。单条推送消息下发用户总量有多少,其中成功推送到手机的数量有多少,又有多少用户看到了弹窗通知、点击了弹窗通知并打开了应用。通过消息推送报表可以很直观地看到推送消息流转情况、消息下发到达成功率、用户对消息的点击情况等。

当然推送报表不单单只有上述这一种维度,个推的推送统计主要分了三个维度:消息推送维度、APP推送维度、APP用户维度。

  • 消息推送维度:针对单个消息推送,提供单条消息推送的下发成功数,手机到达数,弹窗展示数等
  • APP推送维度:针对应用单日所有消息推送,单日所有任务的下发成功数,手机到达数,弹窗展示数等
  • APP用户维度:针对应用单日用户数据,应用单日新增用户数、在线用户数等

上述三个维度的推送数据统计则是通过个推开发者中心服务端SDK集成接口来进行输出。个推开发者中心提供详细的可视化图表,服务端SDK集成接口则提供服务端的数据记录和统计。两者的数据都是一致的,但功能和数据类型上有些许不同,使用者可以根据自己需求选用不同的方式。下面将分别从个推开发者中心服务端SDK集成接口两方面对个推报表进行阐述。

2.开发者中心

登录个推开发者中心,在产品与服务界面选择个推消息推送消息推送后进入了应用列表页面,选择相应的应用,点击数据报表即可在数据统计栏目中看到各个维度的推送统计数据。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190920160039840.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZHJvaWxseQ==,size_16,color_FFFFFF,t_70 =200x300)

2.1 推送记录

推送记录中保存了所有的历史推送,通过点击 "推送数据" 可以查询该推送的任务报表情况。
在这里插入图片描述

2.2 推送数据(消息推送维度)

针对单个消息推送,提供报表数据。

  • 百日联网用户数:最近百日所有打开过APP的用户,可以理解为预计可以下发的用户总量。
  • 成功下发数:消息下发的实际用户量。APP在手机后台中存活才会进行下发,否则不会进行消息下发。
  • 到达数:成功下发到手机的消息数。到达手机后因为网络等原因,无法回执到服务端,所以成功下发数会略大于到达数。
  • 展示数:手机弹窗展示消息的数量。部分用户可能对应用设置了禁止弹窗,所以到达数会大于展示数。
  • 点击数:手机用户点击弹窗通知的数量
    在这里插入图片描述
    上图中展示的报表数据是个推+其他渠道的累加数据,点击详情即可看到各个渠道下发统计。其中的 "-" 表示不支持该字段报表
    在这里插入图片描述

2.3 推送统计(APP推送维度)

推送统计从APP推送维度出发,对APP当天所有任务的下发数据进行统计。举个例子,APP开发者15号下发的消息,可能用户16号打开手机才会收到,但是此次数据仍会统计到15号的推送统计中。针对这种情况,个推会对APP统计数据在三天内予以持续更新。所以APP推送统计数据会在之后的三天持续更新。日联网用户数:当天打开应用的用户数

  • 成功下发数、到达数、展示数、点击数:和上述一致

点击展开也能看到各个渠道的App维度统计。
在这里插入图片描述

2.5 实时性和准确性

创建一个新的推送任务,能够实时地看到推送的总体趋势,趋势数据会进行实时更新。
在这里插入图片描述

已完成推送的任务报表数据,为什么到了第二天数据会发生变化?
个推内部推送数据报表分成两种:实时报表和统计报表。第二天统计报表会对前一天的实时报表进行修正。

实时报表以实时性为主,具有实时更新的功能。APP开发者如果想查看当天下发的任务数据,可以选择实时报表。。相比起实时报表,统计报表更加注重准确性,旨在通过统计分析,对数据进行筛选、去重,得到最终的准确报表。APP开发者一般隔天就能查询到准确的报表数据。

3.服务端SDK集成接口

在官网提供的SDK Demo中就有示例程序,做了很好的封装,返回结果也做了预处理。。APP开发者只需要传入简单的参数即可完成报表查询, SDK接口提供了一些开发者平台中没有的数据统计服务,如用户数据中的最近24小时在线趋势统计、根据用户条件查询用户数等。
详细可参考 文档中心Java服务端集成文档

/**  
 * 推送结果相关demo  
 */  
public class PushResultDemo {  

    public static IGtPush gtPush = new IGtPush(APPKEY, MASTERSECRET);  

    /**  
     * 获取推送结果,可查询消息有效可下发总数,消息回执总数,用户点击数等结果。  
     * @param taskId  
     */  
    private static void getPushResultByTaskId(String taskId) {  
        Map<String, Object> ret = gtPush.getPushResult(taskId).getResponse();  
        System.out.println(JSON.toJSONString(ret));  
    }  

    /**  
     * 获取应用单日的推送数据(推送数据包括:发送总数,在线发送数,接收数,展示数,点击数)(目前只支持查询1天前的数据)  
     */  
    private static void queryAppPushDataByDate(String date) {  
        IQueryResult ret = gtPush.queryAppPushDataByDate(APPID, date);  
        Map<String, Object> res = ret.getResponse();  
        System.out.println(JSON.toJSONString(ret));  
        for(Map.Entry<String,Object> entry: res.entrySet()){  
            System.out.println(entry.getKey()+" "+entry.getValue());  
        }  
    }  

     /**  
     * 通过接口查询当前时间一天内的在线数(十分钟一个点,一小时六个点)  
     */  
    private static void getLast24HoursOnlineUserStatistics () {  
        IQueryResult queryResult = push.getLast24HoursOnlineUserStatistics(APPID);  
        System.out.println(queryResult.getResponse().get("onlineStatics"));  
    }  

    /**  
     * 获取某个应用单日的用户数据(用户数据包括:新增用户数,累计注册用户总数,在线峰值,日联网用户数)  
注:目前可查询1天前的数据  
     */  
    private static void queryAppUserDataByDate(String date) {  
        IQueryResult ret = push.queryAppUserDataByDate(APPID, date);  
        System.out.println(ret.getResponse().toString());  

        Map<String, Object> data = (Map<String, Object>) ret.getResponse().get("data");  
        System.out.println("新用户注册总数:"+data.get("newRegistCount"));  
        System.out.println("用户注册总数:"+data.get("registTotalCount"));  
        System.out.println("活跃用户数:"+data.get("activeCount"));  
        System.out.println("在线用户数:"+data.get("onlineCount"));  
    }  

}

小结

推送数据报表是个推消息推送服务中的重要组成成分,通过推送报表可以直观、准确地了解消息触达用户的详细情况,对推送数据一目了然。个推将针对报表服务不断优化,为APP开发者们提供更加完善的推送数据统计支持。

收起阅读 »

uni-app展示富文本内容,图片的宽度溢出屏幕,解决方案!

这个问题虽然已经过去有一段时间了,但是我还是要写出来和大家分享!毕竟一个人或者是两个人写的也不一定会符合自己想要的结果,我也不知道会帮到多少人,还是要写一下,供大家参考。。。
现在的项目已经进入尾声,之前遇到这个问题解决了一段时间,在网上找了各种各种,说的不符合我。刚开始我是使用v-html这个api是可以加载富文本的(开始不了解rich-text),加载的富文本因为有图片,图片一直就是溢出屏幕的状态,在网上看了别人说的html.replace()做替换,根据标签替换的html.p.img{width:100% }试过了一遍都不好使,最后一个朋友说是用这个方法比较靠谱。确实很实用的一种方案,下边我写出来供参考:
html: <rich-text :nodes="content"></rich-text>
js: var richtext = res.data.list.Content;
const regex = new RegExp('<img', 'gi');
this.content = richtext.replace(regex, <img style="max-width: 100%;");

但是也有弊端:

继续阅读 »

这个问题虽然已经过去有一段时间了,但是我还是要写出来和大家分享!毕竟一个人或者是两个人写的也不一定会符合自己想要的结果,我也不知道会帮到多少人,还是要写一下,供大家参考。。。
现在的项目已经进入尾声,之前遇到这个问题解决了一段时间,在网上找了各种各种,说的不符合我。刚开始我是使用v-html这个api是可以加载富文本的(开始不了解rich-text),加载的富文本因为有图片,图片一直就是溢出屏幕的状态,在网上看了别人说的html.replace()做替换,根据标签替换的html.p.img{width:100% }试过了一遍都不好使,最后一个朋友说是用这个方法比较靠谱。确实很实用的一种方案,下边我写出来供参考:
html: <rich-text :nodes="content"></rich-text>
js: var richtext = res.data.list.Content;
const regex = new RegExp('<img', 'gi');
this.content = richtext.replace(regex, <img style="max-width: 100%;");

但是也有弊端:

收起阅读 »

注册变量时调用函数,微信小程序端无法在第一次渲染时传值到组件

uniapp

注册变量时调用函数,微信小程序端无法在第一次渲染时传值到组件,需要在onLoad中更新变量重新渲染,希望后期版本能够支持,让源码变得更加简洁

注册变量时调用函数,微信小程序端无法在第一次渲染时传值到组件,需要在onLoad中更新变量重新渲染,希望后期版本能够支持,让源码变得更加简洁

iOS13即将到来,iOS推送DeviceToken适配方案详解

iOS 消息推送

随着苹果iOS13系统即将发布,个推提前推出DeviceToken适配方案,以确保新版本的兼容与APP推送服务的正常使用。iOS13的一个重要变化是"[deviceToken description]" 会受不同运行环境及系统的影响而发生变化,如果未及时做好适配工作,会导致SDK绑定到错误的DeviceToken,从而影响APN推送。请各位开发者根据当前运行环境做出相应的更新与优化,以保障用户在iOS13系统上有更好的使用体验。

在Xcode11、iOS13运行时"[deviceToken description]",情况如下图所示:

在Xcode11、iOS12或Xcode10及以下版本运行时"[deviceToken description]",情况如下图所示:

针对开发者注册DeviceToken的不同场景,个推提出了相应的iOS推送SDK适配方案。

若使用“[GeTuiSdk registerDeviceTokenData:]”方法来注册DeviceToken,如下图所示:

适配方案(推荐):因老版个推推送SDK未适配Xcode11、iOS13变化,可以选择升级个推SDK版本至 “2.4.1.0”(http://docs.getui.com/getui/mobile/ios/xcode/)。此方案的代码处理最为简便。

若使用“[GeTuiSdk registerDeviceToken:]”方法来注册DeviceToken,如下图所示:

适配方案:因获取DeviceToken字符串的过程就是将NSData转换成HexString,在"[deviceToken description]"发出变化后,就需要开发者修改转换方案,参考代码如下图:

DeviceToken的适配对iOS推送SDK的集成至关重要。请大家尽早选择相应的适配方案,以更好地兼容苹果新版本。如有任何问题,请随时与我们联系(QQ:3007288158)。感谢大家对个推的支持与配合。

继续阅读 »

随着苹果iOS13系统即将发布,个推提前推出DeviceToken适配方案,以确保新版本的兼容与APP推送服务的正常使用。iOS13的一个重要变化是"[deviceToken description]" 会受不同运行环境及系统的影响而发生变化,如果未及时做好适配工作,会导致SDK绑定到错误的DeviceToken,从而影响APN推送。请各位开发者根据当前运行环境做出相应的更新与优化,以保障用户在iOS13系统上有更好的使用体验。

在Xcode11、iOS13运行时"[deviceToken description]",情况如下图所示:

在Xcode11、iOS12或Xcode10及以下版本运行时"[deviceToken description]",情况如下图所示:

针对开发者注册DeviceToken的不同场景,个推提出了相应的iOS推送SDK适配方案。

若使用“[GeTuiSdk registerDeviceTokenData:]”方法来注册DeviceToken,如下图所示:

适配方案(推荐):因老版个推推送SDK未适配Xcode11、iOS13变化,可以选择升级个推SDK版本至 “2.4.1.0”(http://docs.getui.com/getui/mobile/ios/xcode/)。此方案的代码处理最为简便。

若使用“[GeTuiSdk registerDeviceToken:]”方法来注册DeviceToken,如下图所示:

适配方案:因获取DeviceToken字符串的过程就是将NSData转换成HexString,在"[deviceToken description]"发出变化后,就需要开发者修改转换方案,参考代码如下图:

DeviceToken的适配对iOS推送SDK的集成至关重要。请大家尽早选择相应的适配方案,以更好地兼容苹果新版本。如有任何问题,请随时与我们联系(QQ:3007288158)。感谢大家对个推的支持与配合。

收起阅读 »

UniPush离线集成指南——Android

uniapp unipush

准备

  1. 通过官方途径申请UniPush账号,参考使用指南
  2. 离线SDK

配置

  • 依赖文件
    将aps-unipush-release.aar、aps-release.aar拷贝到已有项目libs文件夹下。

  • gradle配置
    打开build.gradle,在defaultConfig添加manifestPlaceholders节点,如下图所示,将io.dcloud.HBuilder替换成自己的应用包名,将appid等信息替换成申请之后的appid等。

    android {  
    defaultConfig {  
        manifestPlaceholders = [  
                "plus.unipush.appid" : "pPyZWvH3Fa6PXba19ID0091",  
                "plus.unipush.appkey" : "b7dOGlNPHR7pqwUxcXPVi44",  
                "plus.unipush.appsecret": "IxVYAT9qws8dlNElacmSg12",  
                "apk.applicationId":"io.dcloud.HBuilder"  
        ]  
    }  
    }  
  • 厂商配置
    添加下列内容到androidmanifest.xml中(未申请平台无需添加)

        <meta-data  
            android:name="MIPUSH_APPID"  
            android:value="XM_${XIAOMI_APP_ID}" />  
        <meta-data  
            android:name="MIPUSH_APPKEY"  
            android:value="XM_${XIAOMI_APP_KEY}" />  
        <meta-data  
            android:name="MEIZUPUSH_APPID"  
            android:value="MZ_${MEIZU_APP_ID}" />  
        <meta-data  
            android:name="MEIZUPUSH_APPKEY"  
            android:value="MZ_${MEIZU_APP_KEY}" />  
        <meta-data  
            android:name="com.huawei.hms.client.appid"  
            android:value="${HUAWEI_APP_ID}" />  
        <meta-data  
            android:name="OPPOPUSH_APPKEY"  
            android:value="OP_${OPPO_APP_KEY}" />  
        <meta-data  
            android:name="OPPOPUSH_APPSECRET"  
            android:value="OP_${OPPO_APP_SECRET}" />  
        <meta-data  
            android:name="com.vivo.push.app_id"  
            android:value="${VIVO_APP_ID}" />  
        <meta-data  
            android:name="com.vivo.push.api_key"  
            android:value="${VIVO_APP_KEY}" />  

    修改build.gradle,添加对应平台申请的appkey或appid(键名必须统一,如XIAOMI_APP_ID比如同时存在于build.gradle文件和Androidmanifest.xml文件中),如下所示:

    android {  
    defaultConfig {  
        manifestPlaceholders = [  
                "plus.unipush.appid" : "pPyZWvH3Fa6PXba19ID0091",  
                "plus.unipush.appkey" : "b7dOGlNPHR7pqwUxcXPVi45",  
                "plus.unipush.appsecret": "IxVYAT9qws8dlNElacmSg12",  
                "apk.applicationId":"io.dcloud.HBuilder",  
                "XIAOMI_APP_ID":"ccccccccc"  
        ]  
    }  
    }  
  • dcloud_properties.xml配置
    在properties中添加如下配置,features节点与services节点必须同时配置!

    <properties>  
    <features>  
        <feature name="Push" value="io.dcloud.feature.aps.APSFeatureImpl">  
            <module name="unipush" value="io.dcloud.feature.unipush.GTPushService"/>  
        </feature>  
    </features>     
    <services>  
        <service name="push" value="io.dcloud.feature.aps.APSFeatureImpl"/>  
    </services>  
    </properties>  
  • 其余配置
    oppo集成UniPush时需在Androidmanifest.xml的入口activity中添加如下配置:

    <activity  
            android:name="io.dcloud.PandoraEntry">  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  
                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
            /*oppo配置开始*/  
            <intent-filter>  
                <action android:name="android.intent.action.oppopush" />  
                <category android:name="android.intent.category.DEFAULT" />  
            </intent-filter>  
            /*oppo配置结束*/  
        </activity>  

注意

  • UniPush与个推及小米推送存在冲突,使用时请确保小米推送及个推相关文件已删除。
  • 上述账号信息仅为展示使用,使用时需替换成自己申请的appkey等信息。
  • 为了最大化的减少配置,权限及其他厂商配置统统放入aar中。
  • 集成UniPush时,原Androidmanifest.xml中对应的小米和个推的配置也需删除。
继续阅读 »

准备

  1. 通过官方途径申请UniPush账号,参考使用指南
  2. 离线SDK

配置

  • 依赖文件
    将aps-unipush-release.aar、aps-release.aar拷贝到已有项目libs文件夹下。

  • gradle配置
    打开build.gradle,在defaultConfig添加manifestPlaceholders节点,如下图所示,将io.dcloud.HBuilder替换成自己的应用包名,将appid等信息替换成申请之后的appid等。

    android {  
    defaultConfig {  
        manifestPlaceholders = [  
                "plus.unipush.appid" : "pPyZWvH3Fa6PXba19ID0091",  
                "plus.unipush.appkey" : "b7dOGlNPHR7pqwUxcXPVi44",  
                "plus.unipush.appsecret": "IxVYAT9qws8dlNElacmSg12",  
                "apk.applicationId":"io.dcloud.HBuilder"  
        ]  
    }  
    }  
  • 厂商配置
    添加下列内容到androidmanifest.xml中(未申请平台无需添加)

        <meta-data  
            android:name="MIPUSH_APPID"  
            android:value="XM_${XIAOMI_APP_ID}" />  
        <meta-data  
            android:name="MIPUSH_APPKEY"  
            android:value="XM_${XIAOMI_APP_KEY}" />  
        <meta-data  
            android:name="MEIZUPUSH_APPID"  
            android:value="MZ_${MEIZU_APP_ID}" />  
        <meta-data  
            android:name="MEIZUPUSH_APPKEY"  
            android:value="MZ_${MEIZU_APP_KEY}" />  
        <meta-data  
            android:name="com.huawei.hms.client.appid"  
            android:value="${HUAWEI_APP_ID}" />  
        <meta-data  
            android:name="OPPOPUSH_APPKEY"  
            android:value="OP_${OPPO_APP_KEY}" />  
        <meta-data  
            android:name="OPPOPUSH_APPSECRET"  
            android:value="OP_${OPPO_APP_SECRET}" />  
        <meta-data  
            android:name="com.vivo.push.app_id"  
            android:value="${VIVO_APP_ID}" />  
        <meta-data  
            android:name="com.vivo.push.api_key"  
            android:value="${VIVO_APP_KEY}" />  

    修改build.gradle,添加对应平台申请的appkey或appid(键名必须统一,如XIAOMI_APP_ID比如同时存在于build.gradle文件和Androidmanifest.xml文件中),如下所示:

    android {  
    defaultConfig {  
        manifestPlaceholders = [  
                "plus.unipush.appid" : "pPyZWvH3Fa6PXba19ID0091",  
                "plus.unipush.appkey" : "b7dOGlNPHR7pqwUxcXPVi45",  
                "plus.unipush.appsecret": "IxVYAT9qws8dlNElacmSg12",  
                "apk.applicationId":"io.dcloud.HBuilder",  
                "XIAOMI_APP_ID":"ccccccccc"  
        ]  
    }  
    }  
  • dcloud_properties.xml配置
    在properties中添加如下配置,features节点与services节点必须同时配置!

    <properties>  
    <features>  
        <feature name="Push" value="io.dcloud.feature.aps.APSFeatureImpl">  
            <module name="unipush" value="io.dcloud.feature.unipush.GTPushService"/>  
        </feature>  
    </features>     
    <services>  
        <service name="push" value="io.dcloud.feature.aps.APSFeatureImpl"/>  
    </services>  
    </properties>  
  • 其余配置
    oppo集成UniPush时需在Androidmanifest.xml的入口activity中添加如下配置:

    <activity  
            android:name="io.dcloud.PandoraEntry">  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  
                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
            /*oppo配置开始*/  
            <intent-filter>  
                <action android:name="android.intent.action.oppopush" />  
                <category android:name="android.intent.category.DEFAULT" />  
            </intent-filter>  
            /*oppo配置结束*/  
        </activity>  

注意

  • UniPush与个推及小米推送存在冲突,使用时请确保小米推送及个推相关文件已删除。
  • 上述账号信息仅为展示使用,使用时需替换成自己申请的appkey等信息。
  • 为了最大化的减少配置,权限及其他厂商配置统统放入aar中。
  • 集成UniPush时,原Androidmanifest.xml中对应的小米和个推的配置也需删除。
收起阅读 »

HBuilder eslint 代码格式化 自动保存格式化

HBuilder
  1. 安装eslint插件
    工具 -> 插件安装 -> eslint-plugin-vue -> 安装
  2. 修改eslint配置,支持保存时eslint自动格式化
    打开package.json插件配置文件: 工具 -> 插件配置 -> eslint-vue -> package.json
    {  
    // 忽略其它属性  
    "external": {  
    "commands": [{  
        // 默认使用编辑器级eslint插件  
        "id": "default-eslint-vue",  
        "command": [  
          "${programPath}",  
          "--no-eslintrc",  
          "-c",  
          "${pluginPath}/.eslintrc.js",  
          // 添加根据校验规则修复文件选项  
          "${file}",  
          "--fix"  
        ],  
        // 保存时执行该命令  
        "onDidSaveExecution": true  
      }  
    ]  
    }  
    }
  3. 修改完成后 重启生效
  4. 通过.eslintrc.js进行格式规则的控制
继续阅读 »
  1. 安装eslint插件
    工具 -> 插件安装 -> eslint-plugin-vue -> 安装
  2. 修改eslint配置,支持保存时eslint自动格式化
    打开package.json插件配置文件: 工具 -> 插件配置 -> eslint-vue -> package.json
    {  
    // 忽略其它属性  
    "external": {  
    "commands": [{  
        // 默认使用编辑器级eslint插件  
        "id": "default-eslint-vue",  
        "command": [  
          "${programPath}",  
          "--no-eslintrc",  
          "-c",  
          "${pluginPath}/.eslintrc.js",  
          // 添加根据校验规则修复文件选项  
          "${file}",  
          "--fix"  
        ],  
        // 保存时执行该命令  
        "onDidSaveExecution": true  
      }  
    ]  
    }  
    }
  3. 修改完成后 重启生效
  4. 通过.eslintrc.js进行格式规则的控制
收起阅读 »

HBuilder X 任务栏正常显示,窗口无法显示的解决方案

HBuilderX

某些极端情况下,启动HBuilderX后,发现HBuilder X 任务栏正常显示,窗口无法显示

解决方案:

  1. 问题根源:配置文件的问题
  2. 进入C:\Users\Administrator\AppData\Roaming\HBuilder X目录,Administrator换成你自己的电脑用户
  3. 打开编辑HBuilder X.ini文件
  4. 找到window\xwindow\y,设置值为整数,比如400
继续阅读 »

某些极端情况下,启动HBuilderX后,发现HBuilder X 任务栏正常显示,窗口无法显示

解决方案:

  1. 问题根源:配置文件的问题
  2. 进入C:\Users\Administrator\AppData\Roaming\HBuilder X目录,Administrator换成你自己的电脑用户
  3. 打开编辑HBuilder X.ini文件
  4. 找到window\xwindow\y,设置值为整数,比如400
收起阅读 »

nvue就是个坑人的东西,weex的模块压根引入不了

nvue

白折腾了2天,果断马上放弃了

白折腾了2天,果断马上放弃了

hbuilderx 本地打包

Hbuilderx 本地打包,个人感觉比较麻烦,先生成一个包,然后用Android Studio在重新编译生成apk包, hbuilderx能不能,直接做一个生成apk的功能,不用在通过第三方的软件去生成apk。

Hbuilderx 本地打包,个人感觉比较麻烦,先生成一个包,然后用Android Studio在重新编译生成apk包, hbuilderx能不能,直接做一个生成apk的功能,不用在通过第三方的软件去生成apk。

杀千刀的微信支付解决方法(也许可以解决)

微信支付
      上次用uniapp遇到微信支付问题([https://ask.dcloud.net.cn/question/74068](https://ask.dcloud.net.cn/question/74068)),许久没上论坛看到有人问我解决没有,于是想起把方法分享下,不一定是对的,只是作为一个参考。  

       我当时的症状是,确定下单返回的数据是对的,但是就是支付各种提示错误,骚的是模拟器一次就成功,然后就再也不行了,后来搞了很久,总算搞定了  

      1:配置问题,首先检查包名是否正确(一般这个不会错)  
      2:获取安卓包签名,我是在手机端用的[http://pan.baidu.com/s/1gdD3LYF](http://),然后输入包名,效果如下  
         MD5     :    59:20:1C:F6:58:92:02:CB:2C:DA:B2:67:52:47:21:12  
         SHA1   :    BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58  
      其中我配置支付宝和百度地图填写签名都是SHA1,都是正常使用没错,但是微信支付就很骚,成功了一次,因为支付宝和百度成功了,没任何问题,微信成功一次,我压根想不到是这个SB参数错了。后面搞了好久才在角落里翻到微信要md5版签名,而且要去掉:号,大写转小写,按上面的就是:59201cf6589202cb2cdab26752472112  
      3:到这一部还是提示错误,那么清掉微信的缓存,有缓存配置对了也白搭。最好是拿新的没手机登下微信试试秒,我是在原生开发的那里看到的,也是被腾讯折腾的。  

   最后不得不吐槽腾讯这SB,就爱标新立异,VUE很好用结果模仿个更难用的小程序语法,文档到处坑,记得第一次做微信支付的签名字段都改了800年了,文档就是不该,还得我搞了个通宵
继续阅读 »
      上次用uniapp遇到微信支付问题([https://ask.dcloud.net.cn/question/74068](https://ask.dcloud.net.cn/question/74068)),许久没上论坛看到有人问我解决没有,于是想起把方法分享下,不一定是对的,只是作为一个参考。  

       我当时的症状是,确定下单返回的数据是对的,但是就是支付各种提示错误,骚的是模拟器一次就成功,然后就再也不行了,后来搞了很久,总算搞定了  

      1:配置问题,首先检查包名是否正确(一般这个不会错)  
      2:获取安卓包签名,我是在手机端用的[http://pan.baidu.com/s/1gdD3LYF](http://),然后输入包名,效果如下  
         MD5     :    59:20:1C:F6:58:92:02:CB:2C:DA:B2:67:52:47:21:12  
         SHA1   :    BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58  
      其中我配置支付宝和百度地图填写签名都是SHA1,都是正常使用没错,但是微信支付就很骚,成功了一次,因为支付宝和百度成功了,没任何问题,微信成功一次,我压根想不到是这个SB参数错了。后面搞了好久才在角落里翻到微信要md5版签名,而且要去掉:号,大写转小写,按上面的就是:59201cf6589202cb2cdab26752472112  
      3:到这一部还是提示错误,那么清掉微信的缓存,有缓存配置对了也白搭。最好是拿新的没手机登下微信试试秒,我是在原生开发的那里看到的,也是被腾讯折腾的。  

   最后不得不吐槽腾讯这SB,就爱标新立异,VUE很好用结果模仿个更难用的小程序语法,文档到处坑,记得第一次做微信支付的签名字段都改了800年了,文档就是不该,还得我搞了个通宵
收起阅读 »

公司团队接外包项目,开发过多款成熟大型的uniapp项目,丰富的小程序开发经验,熟悉各平台规则。

外包

公司官网:www.ichangjie.com

有意联系微信:17771806167
电话:17771806167(蔡)

公司官网:www.ichangjie.com

有意联系微信:17771806167
电话:17771806167(蔡)

uniapp之tabBar自定义底部导航

uniapp模板 uniapp

uni-app原生导航tabBar功能也挺好,不过有时为了满足多样化的项目需求,如:背景色渐变、字体图标,一些特殊图标凸显效果,这时候就只能自定义tabbar来实现功能了。
如下图:分别在H5端、小程序、APP端实现的自定义tabbar效果

新建tabbar.vue组件

<block v-for="(item,index) in tabList" :key="index">  
    <view class="navigator" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)">  
        <view class="icon">  
            <text class="iconfont" :class="item.icon" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"></text>  
            <text v-if="item.badge" class="uni_badge">{{item.badge}}</text>  
            <text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text>  
            </view>  
        <view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view>  
    </view>  
</block>
<script>  
    export default {  
        data() {  
            return {  
                tabList: [  
                    {  
                        icon: 'icon-emotion',  
                        text: 'tab01',  
                        badge: 1  
                    },  
                    {  
                        icon: 'icon-qianbao',  
                        text: 'tab02',  
                    },  
                    {  
                        icon: 'icon-choose01',  
                        text: 'tab03',  
                        badgeDot: true  
                    }  
                ],  
                currentTabIndex: this.current  
            }  
        },  
        props: {  
            current: { type: [Number, String], default: 0 },  
            backgroundColor: { type: String, default: '#fbfbfb' },  
            color: { type: String, default: '#999' },  
            tintColor: { type: String, default: '#42b983' }  
        },  
        methods: {  
            switchTab(index){  
                this.currentTabIndex = index  
                this.$emit('click', index)  
            }  
        },  
    }  
</script>

在main.js里面引入全局组件

import tabBar from './components/tabbar.vue'  
Vue.component('tab-bar', tabBar)

此时的tab-bar已经是全局组件了,只需在需要的视图页面引用即可

<tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tab-bar>

<tab-bar :current="2" backgroundColor="#1a4065" color="#c3daf1" tintColor="#02f32b" @click="tabClick"></tab-bar>


最后附上uni-app自定义导航栏,希望能喜欢~~
uni-app自定义顶部导航器:https://ask.dcloud.net.cn/article/36388

继续阅读 »

uni-app原生导航tabBar功能也挺好,不过有时为了满足多样化的项目需求,如:背景色渐变、字体图标,一些特殊图标凸显效果,这时候就只能自定义tabbar来实现功能了。
如下图:分别在H5端、小程序、APP端实现的自定义tabbar效果

新建tabbar.vue组件

<block v-for="(item,index) in tabList" :key="index">  
    <view class="navigator" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)">  
        <view class="icon">  
            <text class="iconfont" :class="item.icon" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"></text>  
            <text v-if="item.badge" class="uni_badge">{{item.badge}}</text>  
            <text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text>  
            </view>  
        <view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view>  
    </view>  
</block>
<script>  
    export default {  
        data() {  
            return {  
                tabList: [  
                    {  
                        icon: 'icon-emotion',  
                        text: 'tab01',  
                        badge: 1  
                    },  
                    {  
                        icon: 'icon-qianbao',  
                        text: 'tab02',  
                    },  
                    {  
                        icon: 'icon-choose01',  
                        text: 'tab03',  
                        badgeDot: true  
                    }  
                ],  
                currentTabIndex: this.current  
            }  
        },  
        props: {  
            current: { type: [Number, String], default: 0 },  
            backgroundColor: { type: String, default: '#fbfbfb' },  
            color: { type: String, default: '#999' },  
            tintColor: { type: String, default: '#42b983' }  
        },  
        methods: {  
            switchTab(index){  
                this.currentTabIndex = index  
                this.$emit('click', index)  
            }  
        },  
    }  
</script>

在main.js里面引入全局组件

import tabBar from './components/tabbar.vue'  
Vue.component('tab-bar', tabBar)

此时的tab-bar已经是全局组件了,只需在需要的视图页面引用即可

<tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tab-bar>

<tab-bar :current="2" backgroundColor="#1a4065" color="#c3daf1" tintColor="#02f32b" @click="tabClick"></tab-bar>


最后附上uni-app自定义导航栏,希望能喜欢~~
uni-app自定义顶部导航器:https://ask.dcloud.net.cn/article/36388

收起阅读 »