HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

App发起微信支付

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 发送数据给原生)

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项目瀑布流布局

Vue uniapp

github地址,喜欢的可以star下哦

插件预览图

使用教程

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项目中使用都兼容

继续阅读 »

github地址,喜欢的可以star下哦

插件预览图

使用教程

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、问题总结、小技巧

i18n 国际化 toast HTML5+

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 集成个推 经验分享

推送插件配置指南 个性推送 uni_app 个推
  1. 开发之前的配置:

    这个去看个推官网就行

    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;

继续阅读 »
  1. 开发之前的配置:

    这个去看个推官网就行

    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;

收起阅读 »

配置好了!原生标题栏的分享按钮点击还是没反应,缺什么?

wap2app

已经引入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();  
            }  
        })
收起阅读 »