
App发起微信支付
1.测试微信支付时使用自定义基座,不然会提示包名和微信开放平台中配置的包名不一致(我这里是这样)
2.uni-app发起支付方法requestPayment中有一个参数provider,参数值是固定的,微信支付就是wxpay,需要在manifest.json中进行参数配置,在发起支付的时候打印一下,看一下是否是wxpay,如果没有获取到就会报支付模块不存在
3.orderInfo是一个字符串,uni-app的文档没有说什么内容,json中的值都是从后台获取,微信支付文档上有其含义app支付,尤其注意Json中的package和参数package的值不是一样的,json中是固定格式,参数package中的值是prepay_id=xx
uni.requestPayment({
provider: c.provider[0],
orderInfo: JSON.stringify({
appid: res.data.map.appid,
noncestr: res.data.map.nonceStr,
package:"Sign=WXPay",
partnerid: res.data.map.partnerid,
prepayid: res.data.map.prepayid,
timestamp: res.data.map.timeStamp,
sign: res.data.map.paySign,
}),
timeStamp: JSON.stringify(res.data.map.timeStamp),
nonceStr: res.data.map.nonceStr,
package: res.data.map.package,
signType: res.data.map.signType,
success: (res) => {
},
fail: (res) => {
}
})
1.测试微信支付时使用自定义基座,不然会提示包名和微信开放平台中配置的包名不一致(我这里是这样)
2.uni-app发起支付方法requestPayment中有一个参数provider,参数值是固定的,微信支付就是wxpay,需要在manifest.json中进行参数配置,在发起支付的时候打印一下,看一下是否是wxpay,如果没有获取到就会报支付模块不存在
3.orderInfo是一个字符串,uni-app的文档没有说什么内容,json中的值都是从后台获取,微信支付文档上有其含义app支付,尤其注意Json中的package和参数package的值不是一样的,json中是固定格式,参数package中的值是prepay_id=xx
uni.requestPayment({
provider: c.provider[0],
orderInfo: JSON.stringify({
appid: res.data.map.appid,
noncestr: res.data.map.nonceStr,
package:"Sign=WXPay",
partnerid: res.data.map.partnerid,
prepayid: res.data.map.prepayid,
timestamp: res.data.map.timeStamp,
sign: res.data.map.paySign,
}),
timeStamp: JSON.stringify(res.data.map.timeStamp),
nonceStr: res.data.map.nonceStr,
package: res.data.map.package,
signType: res.data.map.signType,
success: (res) => {
},
fail: (res) => {
}
})
收起阅读 »

安卓原生与uniapp 互相通讯 (原生发送数据给uniapp uniapp 发送数据给原生)
首先我们要写三个java (类|接口)
1 .事件对象 用来传递数据的
package test;
public class MyEvent {
//数据
private Object data;
//事件来源 字符串
private String source;
//触发对象
private Object trigger;
public MyEvent(Object data) {
this.data = data;
}
public Object getTrigger() {
return trigger;
}
@Override
public String toString() {
return "MyEvent{" +
"data=" + data +
", source='" + source + '\'' +
", trigger=" + trigger +
'}';
}
public void setTrigger(Object trigger) {
this.trigger = trigger;
}
public MyEvent(Object data, String source) {
this.data = data;
this.source = source;
}
public MyEvent() {
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public String getSource() {
return source;
}
public void setSource(String source) {
this.source = source;
}
}
2.监听器接口
package test;
import java.util.EventListener;
public interface MyListener extends EventListener {
void onChange(MyEvent myEvent);
}
3.事件管理器 用来 处理 事件 与通知 监听器
package test;
import android.util.Log;
import java.util.*;
/***
* 自定义事件管理类
*/
public class MyEventManager {
private static MyEventManager myEventManager;
private Map<String, Collection<MyListener>> listeners;
/**
* 不能外部 new 实例化
*/
private MyEventManager() {
this.listeners = new HashMap<String, Collection<MyListener>>();
}
/**
* 返回监听 总数
*
* @return
*/
public int getSize() {
int size = 0;
for (String str : listeners.keySet()) {
size = size + listeners.get(str).size();
}
return size;
}
public Map<String, Collection<MyListener>> getListeners() {
return listeners;
}
/**
* 单例模式
*
* @return
*/
public static MyEventManager getMyEventManager() {
if (myEventManager == null) {
synchronized (MyEventManager.class) {
if (myEventManager == null) {
myEventManager = new MyEventManager();
}
}
}
return myEventManager;
}
/***
* 添加事件
* @param listener 事件对象
* @param source 来源
*/
public MyListener addListener(MyListener listener, String source) {
if (listener != null && source != null) {
Collection<MyListener> myListeners = listeners.get(source);
if (myListeners == null) {
myListeners = new HashSet<MyListener>();
listeners.put(source, myListeners);
}
myListeners.add(listener);
}
return listener;
}
/***
* 添加事件
* @param source 来源
* @param listener 事件对象
*/
public MyListener addListener(String source, MyListener listener) {
return addListener(listener, source);
}
/**
* 移除监听
*
* @param listener
*/
public void removeListener(MyListener listener) {
if (listeners == null || listener == null) {
return;
}
//变量所有 找出相同的 删除
for (String str : listeners.keySet()) {
Collection collection = listeners.get(str);
Iterator<MyListener> iter = collection.iterator();
while (iter.hasNext()) {
MyListener next = (MyListener) iter.next();
if (next == listener) {
collection.remove(next);
return;
}
}
}
}
/***
* 发送数据
* @param data 数据
* @param source 来源
* @return
*/
public static MyEvent postMsg(Object data, String source) {
MyEventManager myEventManager = MyEventManager.getMyEventManager();
MyEvent myEvent = new MyEvent(data);
myEvent.setSource(source);
if (myEventManager.listeners == null)
return myEvent;
myEventManager.notifyListeners(myEvent, myEvent.getSource());
return myEvent;
}
/**
* 通知所有的myListener 相同的 (source) 来源才通知
*/
private void notifyListeners(MyEvent event, String source) {
//取出 key为source 的 监听器集合
Collection<MyListener> collection = listeners.get(source);
Log.i(MyEventManager.class.getName(), source + "--->" + event.getData());
if (collection == null) {
return;
}
//遍历监听器集合
Iterator<MyListener> iter = collection.iterator();
while (iter.hasNext()) {
MyListener next = iter.next();
//通知回调
next.onChange(event);
}
//销毁事件对象
event = null;
}
}
uniapp 添加监听器 监听 原生或者 uniapp 其他页面 传过来的数据
this.myEventManager = plus.android.importClass("test.MyEventManager");
this.eventManager = this.myEventManager.getMyEventManager();
//新建监听器
this.myListener = plus.android.implements("test.MyListener", {
onChange:function(event){
//导入类
plus.android.importClass(event);
//获取数据
console.log(event.getData());
//获取来源
console.log(event.getSource();
}
})
//添加监听器
this.eventManager.addListener("onShowXX",this.myListener);
uniapp 发送数据给 原生 获取其他页面 看清 onShowXX字符串 我随意写的 只要和添加监听器的字符串 保持一致就能通知到 类似 weex 的 数据传递
this.myEventManager = plus.android.importClass("test.MyEventManager");
this.eventManager = this.myEventManager.getMyEventManager();
this.myEventManager.postMsg("app 显示了","onShowXX");
原生 接收 从uniapp 或者原生传过来的数据
MyEventManager.getMyEventManager().addListener(new MyListener() {
@Override
public void onChange(MyEvent myEvent) {
//从uniapp 或者原生传过来的数据
Object data = myEvent.getData();
}
},"onShowXX");
原生发数据 到 原生或者 uniapp
MyEventManager.postMsg("我是从原生发来的数据","onShowXX");
具体例子 app显示就发数据给原生或者 uniapp
<script>
export default {
onLaunch: function() {
console.log('App Launch')
this.myEventManager = plus.android.importClass("test.MyEventManager");
this.eventManager = this.myEventManager.getMyEventManager();
//新建监听器
this.myListener = plus.android.implements("test.MyListener", {
onChange:function(event){
//导入类
plus.android.importClass(event);
//获取数据
console.log(event.getData());
//获取来源
console.log(event.getSource();
}
})
//添加监听器
this.eventManager.addListener("onShow",this.myListener);
},
onShow: function() {
//发送数据
this.myEventManager.postMsg("app 显示了","onShow");
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
首先我们要写三个java (类|接口)
1 .事件对象 用来传递数据的
package test;
public class MyEvent {
//数据
private Object data;
//事件来源 字符串
private String source;
//触发对象
private Object trigger;
public MyEvent(Object data) {
this.data = data;
}
public Object getTrigger() {
return trigger;
}
@Override
public String toString() {
return "MyEvent{" +
"data=" + data +
", source='" + source + '\'' +
", trigger=" + trigger +
'}';
}
public void setTrigger(Object trigger) {
this.trigger = trigger;
}
public MyEvent(Object data, String source) {
this.data = data;
this.source = source;
}
public MyEvent() {
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
public String getSource() {
return source;
}
public void setSource(String source) {
this.source = source;
}
}
2.监听器接口
package test;
import java.util.EventListener;
public interface MyListener extends EventListener {
void onChange(MyEvent myEvent);
}
3.事件管理器 用来 处理 事件 与通知 监听器
package test;
import android.util.Log;
import java.util.*;
/***
* 自定义事件管理类
*/
public class MyEventManager {
private static MyEventManager myEventManager;
private Map<String, Collection<MyListener>> listeners;
/**
* 不能外部 new 实例化
*/
private MyEventManager() {
this.listeners = new HashMap<String, Collection<MyListener>>();
}
/**
* 返回监听 总数
*
* @return
*/
public int getSize() {
int size = 0;
for (String str : listeners.keySet()) {
size = size + listeners.get(str).size();
}
return size;
}
public Map<String, Collection<MyListener>> getListeners() {
return listeners;
}
/**
* 单例模式
*
* @return
*/
public static MyEventManager getMyEventManager() {
if (myEventManager == null) {
synchronized (MyEventManager.class) {
if (myEventManager == null) {
myEventManager = new MyEventManager();
}
}
}
return myEventManager;
}
/***
* 添加事件
* @param listener 事件对象
* @param source 来源
*/
public MyListener addListener(MyListener listener, String source) {
if (listener != null && source != null) {
Collection<MyListener> myListeners = listeners.get(source);
if (myListeners == null) {
myListeners = new HashSet<MyListener>();
listeners.put(source, myListeners);
}
myListeners.add(listener);
}
return listener;
}
/***
* 添加事件
* @param source 来源
* @param listener 事件对象
*/
public MyListener addListener(String source, MyListener listener) {
return addListener(listener, source);
}
/**
* 移除监听
*
* @param listener
*/
public void removeListener(MyListener listener) {
if (listeners == null || listener == null) {
return;
}
//变量所有 找出相同的 删除
for (String str : listeners.keySet()) {
Collection collection = listeners.get(str);
Iterator<MyListener> iter = collection.iterator();
while (iter.hasNext()) {
MyListener next = (MyListener) iter.next();
if (next == listener) {
collection.remove(next);
return;
}
}
}
}
/***
* 发送数据
* @param data 数据
* @param source 来源
* @return
*/
public static MyEvent postMsg(Object data, String source) {
MyEventManager myEventManager = MyEventManager.getMyEventManager();
MyEvent myEvent = new MyEvent(data);
myEvent.setSource(source);
if (myEventManager.listeners == null)
return myEvent;
myEventManager.notifyListeners(myEvent, myEvent.getSource());
return myEvent;
}
/**
* 通知所有的myListener 相同的 (source) 来源才通知
*/
private void notifyListeners(MyEvent event, String source) {
//取出 key为source 的 监听器集合
Collection<MyListener> collection = listeners.get(source);
Log.i(MyEventManager.class.getName(), source + "--->" + event.getData());
if (collection == null) {
return;
}
//遍历监听器集合
Iterator<MyListener> iter = collection.iterator();
while (iter.hasNext()) {
MyListener next = iter.next();
//通知回调
next.onChange(event);
}
//销毁事件对象
event = null;
}
}
uniapp 添加监听器 监听 原生或者 uniapp 其他页面 传过来的数据
this.myEventManager = plus.android.importClass("test.MyEventManager");
this.eventManager = this.myEventManager.getMyEventManager();
//新建监听器
this.myListener = plus.android.implements("test.MyListener", {
onChange:function(event){
//导入类
plus.android.importClass(event);
//获取数据
console.log(event.getData());
//获取来源
console.log(event.getSource();
}
})
//添加监听器
this.eventManager.addListener("onShowXX",this.myListener);
uniapp 发送数据给 原生 获取其他页面 看清 onShowXX字符串 我随意写的 只要和添加监听器的字符串 保持一致就能通知到 类似 weex 的 数据传递
this.myEventManager = plus.android.importClass("test.MyEventManager");
this.eventManager = this.myEventManager.getMyEventManager();
this.myEventManager.postMsg("app 显示了","onShowXX");
原生 接收 从uniapp 或者原生传过来的数据
MyEventManager.getMyEventManager().addListener(new MyListener() {
@Override
public void onChange(MyEvent myEvent) {
//从uniapp 或者原生传过来的数据
Object data = myEvent.getData();
}
},"onShowXX");
原生发数据 到 原生或者 uniapp
MyEventManager.postMsg("我是从原生发来的数据","onShowXX");
具体例子 app显示就发数据给原生或者 uniapp
<script>
export default {
onLaunch: function() {
console.log('App Launch')
this.myEventManager = plus.android.importClass("test.MyEventManager");
this.eventManager = this.myEventManager.getMyEventManager();
//新建监听器
this.myListener = plus.android.implements("test.MyListener", {
onChange:function(event){
//导入类
plus.android.importClass(event);
//获取数据
console.log(event.getData());
//获取来源
console.log(event.getSource();
}
})
//添加监听器
this.eventManager.addListener("onShow",this.myListener);
},
onShow: function() {
//发送数据
this.myEventManager.postMsg("app 显示了","onShow");
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
收起阅读 »

uni-app项目瀑布流布局
插件预览图
使用教程
1.插件代码拷贝
- 下载后把components目录下waterfall.vue文件拷贝到自己项目目录下
2.插件全局配置
- 在项目里main.js中配置如下代码
import waterfall from './components/waterfall.vue'
Vue.component('waterfall',waterfall)
3.插件使用
- vue页面使用
<template>
<view>
<!-- 瀑布流(display: flex) H5 IOS Android支持 -->
<waterfall></waterfall>
</view>
</template>
兼容性
uni-app项目中使用都兼容
插件预览图
使用教程
1.插件代码拷贝
- 下载后把components目录下waterfall.vue文件拷贝到自己项目目录下
2.插件全局配置
- 在项目里main.js中配置如下代码
import waterfall from './components/waterfall.vue'
Vue.component('waterfall',waterfall)
3.插件使用
- vue页面使用
<template>
<view>
<!-- 瀑布流(display: flex) H5 IOS Android支持 -->
<waterfall></waterfall>
</view>
</template>
兼容性
uni-app项目中使用都兼容
收起阅读 »
Dcloud 5+App 案例Demo、问题总结、小技巧
Github: Dcloud 5+App 案例Demo、问题总结、小技巧
简要介绍
案例基于5+App实现,uni-app可参考代码和思路进行转换实现,下载后导入Hbuilder运行,因为使用了plus接口,必须真机运行才能看到效果。
案例列表
-
六位密码输入框
-
数据选择器
-
时间选择器
-
Toast提示(美化)
-
输入框输入值限制
-
底部原生TAB&数字角标
-
IOS输入框点击输入延迟问题解决
-
国际化-Jquery实现
-
国际化-Vue实现
-
iframe中访问plus接口
Github: Dcloud 5+App 案例Demo、问题总结、小技巧
简要介绍
案例基于5+App实现,uni-app可参考代码和思路进行转换实现,下载后导入Hbuilder运行,因为使用了plus接口,必须真机运行才能看到效果。
案例列表
-
六位密码输入框
-
数据选择器
-
时间选择器
-
Toast提示(美化)
-
输入框输入值限制
-
底部原生TAB&数字角标
-
IOS输入框点击输入延迟问题解决
-
国际化-Jquery实现
-
国际化-Vue实现
-
iframe中访问plus接口

uniapp自定view作为导航栏(隐藏导航栏,获取导航栏的高度)
1.在pages.json里面隐藏导航栏,{
"style": {
"navigationStyle":"custom",
"app-plus":{
"titleView":false
}
}
},
2.自定义一个view,当然需要知道view的高度需要用API获取状态栏的高度
data() {
return {
titleHeight: 0, //状态栏和导航栏的总高度
statusBarHeight: 0 ,//状态栏高度
naviBarHeight:0,//导航栏高度
}
},
onLoad() {
const res = uni.getSystemInfoSync()
const system = res.platform
this.statusBarHeight = res.statusBarHeight
if (system === 'android') {
this.titleHeight = (48 + this.statusBarHeight)
} else if (system === 'ios') {
this.titleHeight = (44 + this.statusBarHeight)
}
this.naviBarHeight = this.titleHeight - this.statusBarHeight
},
3.最后设置整个view的高度//注意单位是 'px'
<view class="naviBarView" :style="{height: titleHeight + 'px'}"></view>
1.在pages.json里面隐藏导航栏,{
"style": {
"navigationStyle":"custom",
"app-plus":{
"titleView":false
}
}
},
2.自定义一个view,当然需要知道view的高度需要用API获取状态栏的高度
data() {
return {
titleHeight: 0, //状态栏和导航栏的总高度
statusBarHeight: 0 ,//状态栏高度
naviBarHeight:0,//导航栏高度
}
},
onLoad() {
const res = uni.getSystemInfoSync()
const system = res.platform
this.statusBarHeight = res.statusBarHeight
if (system === 'android') {
this.titleHeight = (48 + this.statusBarHeight)
} else if (system === 'ios') {
this.titleHeight = (44 + this.statusBarHeight)
}
this.naviBarHeight = this.titleHeight - this.statusBarHeight
},
3.最后设置整个view的高度//注意单位是 'px'
<view class="naviBarView" :style="{height: titleHeight + 'px'}"></view>

关于安卓使用websocket的问题
安卓目前已经支持websocket
websocket = new WebSocket("ws://地址");
websocket.onopen = function(evnt) {
plus.nativeUI.toast("建立socket连接");
};
websocket.onmessage = function(evnt) {
plus.nativeUI.toast("接收到消息"+evnt.data);
};
websocket.onerror = function(evnt) {
plus.nativeUI.toast("连接错误"+evnt);
};
已经完全可以用了
安卓目前已经支持websocket
websocket = new WebSocket("ws://地址");
websocket.onopen = function(evnt) {
plus.nativeUI.toast("建立socket连接");
};
websocket.onmessage = function(evnt) {
plus.nativeUI.toast("接收到消息"+evnt.data);
};
websocket.onerror = function(evnt) {
plus.nativeUI.toast("连接错误"+evnt);
};
已经完全可以用了
收起阅读 »
本地数据缓存 - 白名单
uni.clearStorageSync()
添加白名单
不删除白名单缓存
希望添加这个
uni.clearStorageSync()
添加白名单
不删除白名单缓存
希望添加这个

uni-app 集成个推 经验分享
-
开发之前的配置:
这个去看个推官网就行
ios需要两个 推送证书 !推送证书 !推送证书 !
ios的推送证书分为开发和生产两个环境,我是直接上的生产环境的推送证书;
CID:设备的唯一标识 安装好app之后作为推送的唯一标识 用户在设备登陆的时候可以与用户相关联
// #ifdef APP-PLUS
// 获取设备CID
var pinf = plus.push.getClientInfo();
cid = pinf.clientid;//客户端标识
that.$store.dispatch("getcid",cid)
console.log('cid:'+cid)
// #endif、
个推官网填完信息 上传证书
manifest配置 填完
2,推送消息配置
推荐直接使用透传消息:个推官网也有透传消息的模板,可以拿来参考
官网也有手动创建消息的功能
APNS主要是后端配置 主要作用是 ios 处于离线状态下个推去通过苹果官方去给app推送消息 ios在线的话直接通过个推去推送消息
后端代码看官方文档
各种各样的都有
3.前端代码
需要有两个监听事件去处理 一个是接收到推送事件 一个是点击推送消息的事件
前端收到透传消息的时候会触发plus.push.addEventListener("receive", function(msg) { }) 这个时候手机是没有消息提醒的,需要 plus.push.createMessage(msg.content, msg.payload, options); 去创建消息 msg是后台传过来的消息 需要前端去解析一下,或者加入些判断(是否登录呀,或者账户是否在其他设备登录呀)再plus.push.createMessage(msg.content, msg.payload, options); 创建消息
直接上代码
做了vuex去判断用户是否登录 做了依据个推去实现唯一账户登录
接收到消息需要做一下json解析处理
可以自己运行自定义基座 plus.push.addEventListener("receive", function(msg) {}) 输出一下msg就知道格式了
plus.push.addEventListener("click", function(msg) {
//根据payload传递过来的数据,打开一个详情
console.log(msg);
console.log(that.$store.state.userInfo);
var payload = msg.payload;
if (that.$store.state.userInfo != null) {
uni.navigateTo({
url: '/pages/my/mymessage/mymessage'
})
console.log(msg)
} else {
console.log('click未登录')
}
}, false);
//监听receive事件//监听推送的接受事件
plus.push.addEventListener("receive", function(msg) {
console.log(msg)
console.log(that.$store.state.userInfo);
if (that.$store.state.userInfo != null) { //判断是否登录
if (typeof(msg) != "object") {
var msg = JSON.parse(msg);
}
if (plus.os.name != 'iOS') {
var options = {};
options.title = msg.title;
if (msg.title == "下线通知") {
uni.reLaunch({
url: '/pages/index/login?sate=true',
})
}
plus.push.createMessage(msg.content, msg.payload, options);
} else if (msg.aps) {
console.log(msg.aps)
} else {
switch (msg.payload) {
case "LocalMSG"://ios进入判断 如果msg.payload为LocalMSG则不创建本地消息
break;
default:
//创建本地消息
var iosmsgstr = msg.content.replace(/\'/g, '"')
var iosmsg = JSON.parse(iosmsgstr);//处理下消息内容
var options = {
cover: false
};
//如果接收到下线推送
if (iosmsg.title == "下线通知") {
uni.reLaunch({
url: '/pages/index/login?sate=true',
})
}
//创建消息并设置本地消息的msg.payload=LocalMSG(唯一标识)下次进入receive则直接break;
plus.push.createMessage(iosmsg.content, "LocalMSG", options);
break;
}
}
} else {
console.log('receive未登录')
}
}, false);
4.遇到的坑
1:ios接收消息后本地创建消息之后一直无限创建
是应为收到个推的透传消息后 plus.push.addEventListener receive监听到了消息再去createMessage创建消息,但是ios同时也会监听到你createMessage第一次创建的消息,然后一直监听到了消息 再一直创建消息 然后就陷入了死循环 需要在代码里面处理下 给第一次创建的消息加个标识 然后他创建消息成功后再次进入监听的时候再加个判断,这样就不会一直循环了
switch (msg.payload) {
case "LocalMSG"://ios进入判断 如果msg.payload为LocalMSG则不创建本地消息
break;
default:
//创建本地消息
var iosmsgstr = msg.content.replace(/\'/g, '"')
var iosmsg = JSON.parse(iosmsgstr);//处理下消息内容
var options = {
cover: false
};
//如果接收到下线推送
if (iosmsg.title == "下线通知") {
uni.reLaunch({
url: '/pages/index/login?sate=true',
})
}
//创建消息并设置本地消息的msg.payload=LocalMSG(唯一标识)下次进入receive则直接break;
plus.push.createMessage(iosmsg.content, "LocalMSG", options);
break;
}
2:监听ios透传消息 ios会默认执行一次click 用户再点击通知会再次执行click click 加起来会执行两次 安卓正常 ios太恶心了
需要后端设置 content-available:0;
-
开发之前的配置:
这个去看个推官网就行
ios需要两个 推送证书 !推送证书 !推送证书 !
ios的推送证书分为开发和生产两个环境,我是直接上的生产环境的推送证书;
CID:设备的唯一标识 安装好app之后作为推送的唯一标识 用户在设备登陆的时候可以与用户相关联
// #ifdef APP-PLUS
// 获取设备CID
var pinf = plus.push.getClientInfo();
cid = pinf.clientid;//客户端标识
that.$store.dispatch("getcid",cid)
console.log('cid:'+cid)
// #endif、
个推官网填完信息 上传证书
manifest配置 填完
2,推送消息配置
推荐直接使用透传消息:个推官网也有透传消息的模板,可以拿来参考
官网也有手动创建消息的功能
APNS主要是后端配置 主要作用是 ios 处于离线状态下个推去通过苹果官方去给app推送消息 ios在线的话直接通过个推去推送消息
后端代码看官方文档
各种各样的都有
3.前端代码
需要有两个监听事件去处理 一个是接收到推送事件 一个是点击推送消息的事件
前端收到透传消息的时候会触发plus.push.addEventListener("receive", function(msg) { }) 这个时候手机是没有消息提醒的,需要 plus.push.createMessage(msg.content, msg.payload, options); 去创建消息 msg是后台传过来的消息 需要前端去解析一下,或者加入些判断(是否登录呀,或者账户是否在其他设备登录呀)再plus.push.createMessage(msg.content, msg.payload, options); 创建消息
直接上代码
做了vuex去判断用户是否登录 做了依据个推去实现唯一账户登录
接收到消息需要做一下json解析处理
可以自己运行自定义基座 plus.push.addEventListener("receive", function(msg) {}) 输出一下msg就知道格式了
plus.push.addEventListener("click", function(msg) {
//根据payload传递过来的数据,打开一个详情
console.log(msg);
console.log(that.$store.state.userInfo);
var payload = msg.payload;
if (that.$store.state.userInfo != null) {
uni.navigateTo({
url: '/pages/my/mymessage/mymessage'
})
console.log(msg)
} else {
console.log('click未登录')
}
}, false);
//监听receive事件//监听推送的接受事件
plus.push.addEventListener("receive", function(msg) {
console.log(msg)
console.log(that.$store.state.userInfo);
if (that.$store.state.userInfo != null) { //判断是否登录
if (typeof(msg) != "object") {
var msg = JSON.parse(msg);
}
if (plus.os.name != 'iOS') {
var options = {};
options.title = msg.title;
if (msg.title == "下线通知") {
uni.reLaunch({
url: '/pages/index/login?sate=true',
})
}
plus.push.createMessage(msg.content, msg.payload, options);
} else if (msg.aps) {
console.log(msg.aps)
} else {
switch (msg.payload) {
case "LocalMSG"://ios进入判断 如果msg.payload为LocalMSG则不创建本地消息
break;
default:
//创建本地消息
var iosmsgstr = msg.content.replace(/\'/g, '"')
var iosmsg = JSON.parse(iosmsgstr);//处理下消息内容
var options = {
cover: false
};
//如果接收到下线推送
if (iosmsg.title == "下线通知") {
uni.reLaunch({
url: '/pages/index/login?sate=true',
})
}
//创建消息并设置本地消息的msg.payload=LocalMSG(唯一标识)下次进入receive则直接break;
plus.push.createMessage(iosmsg.content, "LocalMSG", options);
break;
}
}
} else {
console.log('receive未登录')
}
}, false);
4.遇到的坑
1:ios接收消息后本地创建消息之后一直无限创建
是应为收到个推的透传消息后 plus.push.addEventListener receive监听到了消息再去createMessage创建消息,但是ios同时也会监听到你createMessage第一次创建的消息,然后一直监听到了消息 再一直创建消息 然后就陷入了死循环 需要在代码里面处理下 给第一次创建的消息加个标识 然后他创建消息成功后再次进入监听的时候再加个判断,这样就不会一直循环了
switch (msg.payload) {
case "LocalMSG"://ios进入判断 如果msg.payload为LocalMSG则不创建本地消息
break;
default:
//创建本地消息
var iosmsgstr = msg.content.replace(/\'/g, '"')
var iosmsg = JSON.parse(iosmsgstr);//处理下消息内容
var options = {
cover: false
};
//如果接收到下线推送
if (iosmsg.title == "下线通知") {
uni.reLaunch({
url: '/pages/index/login?sate=true',
})
}
//创建消息并设置本地消息的msg.payload=LocalMSG(唯一标识)下次进入receive则直接break;
plus.push.createMessage(iosmsg.content, "LocalMSG", options);
break;
}
2:监听ios透传消息 ios会默认执行一次click 用户再点击通知会再次执行click click 加起来会执行两次 安卓正常 ios太恶心了
需要后端设置 content-available:0;
收起阅读 »
配置好了!原生标题栏的分享按钮点击还是没反应,缺什么?
已经引入plusShare.js
前段页面也放了myshare
<script type="text/javascript">
function myshare() {
if(navigator.userAgent.indexOf("Html5Plus") > -1) {
window.plusShare({
title: "标题",
content: "描述",
href: location.href,
thumbs: [""]
}, function(result) {
});
}
};
</script>
为什么原生标题栏的分享按钮,点击还是没反应?还缺什么?
已经引入plusShare.js
前段页面也放了myshare
<script type="text/javascript">
function myshare() {
if(navigator.userAgent.indexOf("Html5Plus") > -1) {
window.plusShare({
title: "标题",
content: "描述",
href: location.href,
thumbs: [""]
}, function(result) {
});
}
};
</script>
为什么原生标题栏的分享按钮,点击还是没反应?还缺什么?
收起阅读 »
个推推送标识有时候获取不到解决办法,plus.push.getClientInfo().clientid
mui.plusReady(function() {
localStorage.tuisong0843 = plus.push.getClientInfo().clientid;
console.log(localStorage.tuisong0843);
if (!localStorage.tuisong0843) {
function uuidxunhuan1304() {
console.log('开始循环获取');
localStorage.tuisong0843 = plus.push.getClientInfo().clientid;
if (localStorage.tuisong0843) {
console.log('获取成功');
return;
} else {
console.log('没有获取成功');
window.setTimeout(function() {
uuidxunhuan1304();
}, 1000);
}
}
uuidxunhuan1304();
}
})
mui.plusReady(function() {
localStorage.tuisong0843 = plus.push.getClientInfo().clientid;
console.log(localStorage.tuisong0843);
if (!localStorage.tuisong0843) {
function uuidxunhuan1304() {
console.log('开始循环获取');
localStorage.tuisong0843 = plus.push.getClientInfo().clientid;
if (localStorage.tuisong0843) {
console.log('获取成功');
return;
} else {
console.log('没有获取成功');
window.setTimeout(function() {
uuidxunhuan1304();
}, 1000);
}
}
uuidxunhuan1304();
}
})
收起阅读 »