Github： Dcloud 5+App 案例Demo、问题总结、小技巧

简要介绍

案例基于5+App实现，uni-app可参考代码和思路进行转换实现，下载后导入Hbuilder运行，因为使用了plus接口，必须真机运行才能看到效果。

案例列表

• 六位密码输入框

• 数据选择器

• 时间选择器

• Toast提示（美化）

• 输入框输入值限制

• 底部原生TAB&数字角标

• IOS输入框点击输入延迟问题解决

• 国际化-Jquery实现

• 国际化-Vue实现

• iframe中访问plus接口

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 = 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()
添加白名单
不删除白名单缓存
希望添加这个

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；

已经引入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>

为什么原生标题栏的分享按钮，点击还是没反应？还缺什么？

    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();  
            }  
        })

将以下代码放到自定义vue代码块中，在其他页面输入uniapp回车即可显示出模板，名字可以改。

如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。

首先注意2个前提：1、你的web站是适合手机屏幕的；2、你的H5代码是全后端分离的，uni-app只处理前端代码。

一切从新建一个uni-app项目开始。然后依次进行

文件处理

1. 把之前的vue web项目的前端代码copy到新项目下
2. 如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节点为template、script、style，template节点下必须且只能有一个根view节点，所有内容写在这个根view节点下。
3. 处理页面路由
   uni-app默认是小程序的路由方式，在pages.json里管理页面。如果你使用vue router的话，一种是改造为pages.json方式，另一种是使用三方插件，比如vue router for uni-app
4. 静态文件（如图片）挪到static目录
   uni-app工程目录下有个static目录，用于存放静态文件，这个目录不编译，直接整体copy到发行代码里的。
   如果你希望自定义静态资源目录，可以在vue.config.js中自定义。

标签代码处理

1. 相同功能的组件自动转换
   uni-app的标签组件与小程序相同，比如<div>变成了<view>，<span>变成了<text>。
   但uni-app的编译器已经自动处理了这部分转换，如果源码中写了可自动转换的组件，在编译到非H5端时会被自动转换（再编译回到H5端时div还是div）。
   • div 改成 view
   • span、font 改成 text
   • a 改成 navigator
   • img 改成 image
   • select 改成 picker
   • iframe 改成 web-view
   • ul、li没有了，都用view替代
2. 区域滚动使用scroll-view，不再使用div的区域滚动处理方式
3. 左右、上下滑动切换，有专门的swiper组件，不要使用div模拟
4. input的search，原来的type没用了，改成confirmtype，详见
5. audio组件不再推荐使用，改成api方式，背景音频api文档
6. 之前的v-html，可以在H5端和App端（需v3编译器）使用，不能在小程序中使用。如需要在小程序使用，请使用rich-text组件或uparse扩展插件，详见

js代码处理

uni-app的非H5端，不管是App还是各种小程序，都不支持window、navigator、document等web专用对象。
uni-app的API与小程序保持一致，需要处理这些不同的API写法

1. 处理window api
   • ajax 改成 uni.request。（插件市场也有适配uni-app的axios、flyio等封装拦截器）
   • cookie、session.storage 没有了，改用 uni.storage 吧；local.storage 也改成 uni.storage。另外插件市场有一个垫片mp-storage，可使用之前的代码，兼容运行在uni-app上，
   • alert,confirm 改成 uni.showmodel
   • window的resize 改为了 uni.onWindowResize
2. 处理navigator api
   • geolocation 的定位方式改为 uni.getLocation
   • useragent的设备api没有了，改用uni.getSystemInfo
3. 处理dom api
   • 如果使用标准vue的数据绑定，是不需要操作dom来修改界面内容的。如果没有使用vue数据绑定，仍然混写了jquery等dom操作，需要改为纯数据绑定
   • 有时获取dom并不是为了修改显示内容，而是为了获取元素的长宽尺寸来做布局。此时uni-app提供了同小程序的另一种API，uni.createSelectorQuery
4. 其他js api
   web中还有canvas、video、audio、websocket、webgl、webbluetooth、webnfc，这些在uni-app中都有专门的API。
5. 生命周期
   uni-app补充了一批类小程序的声明周期，包括App的启动、页面的加载，详见https://uniapp.dcloud.io/collocation/frame/lifetime
   vue h5一般在created或者mounted中请求数据，而在uni-app的页面中，使用onLoad或者onShow中请求数据。（组件仍然是created或者mounted）
6. 少量不常用的vue语法在非h5端仍不支持，data必须以return的方式编写，注意事项详见

注意：如果你使用了一些三方ui框架、js库，其中引用了包括一些使用了dom、window、navigator的三方库，除非你只做H5端，否则需要更换。去uni-app的插件市场寻找替代品。如果找不到对应库，必须使用for web的库，在App端可以使用renderjs来引入这些for web的库。

css代码处理

uni-app发布到App(非nvue)、小程序时，显示页面仍然由webview渲染，css大部分是支持的。但需要注意

• 不支持 *选择器
• 没有body元素选择器，改用page元素选择器。（编译到非H5时，编译器会自动处理。所以不改也行）
• div等元素选择器改为view、span和font改为text、a改为navigator、img改为image...（编译到非H5时，编译器会自动处理。所以不改也行）
• 不同端的浏览器兼容性仍然存在，避免使用太新的css语法，否则发布为App时，Android低端机（Android 4.4、5.x），会有样式错误。当然在App端也可以引用x5浏览器内核来抹平浏览器差异。

本文是思路，不是工具。我们鼓励和欢迎开发者编写垫片API和转换器，方便更多人使用。

使用场景是商品详情页 多张大图 基本没有复杂样式

uparse碰到的问题是，图片加载卡顿，需要等一段时间才能适应全屏

使用rich-text h5下没有太大问题 其他平台图片可能超出屏幕宽度

使用方法

data() {  
            return {  
                content:`<img style='' src='/static/image/Businessmen.png'></img>`  
            }  
        },  
        onLoad() {  
                this.content=htmlBeautify(this.content,{  
                                                                                                  img: {  
                                                                                           "max-width": "100%"  
                                                                                             }  
                                                                                               })  
        },

/**  
 * 给html添加指定样式 常用于rich text的子节点  
 * @param {*} html 需要处理的html文本  
 * @param {*} rule {  
            img: {  
                "max-width": "100%"  
            }  
        }   增加的样式规则 {元素名称:{css名称:属性}}  
 */  
const htmlBeautify = (html, rule) => {  
    if (!rule) {  
        rule = {  
            img: {  
                "max-width": "100%"  
            }  
        }  
    }  

    for (const key in rule) {  
        if (rule.hasOwnProperty(key)) {  
            const element = rule[key];  
            let style = ';'  
            for (const k in element) {  
                if (element.hasOwnProperty(k)) {  
                    const v = element[k];  
                    style += `${k}:${v};`  
                }  
            }  

            // let reg = new RegExp(`<${key}>`, 'g')  
            var reg = new RegExp(`(i?)(\<${key})(?!(.*?style=[\'\"](.*)[\'\"])[^\>]+\>)`, "gmi");  
            let reg1 = new RegExp(`<${key}(.*?)style=[\'\"](.*?)[\'\"]`, 'gmi')  

            html = html.replace(reg, `$2 style="" $3`).replace(reg1, `<${key} $1 style="$2${style}"`)  
        }  
    }  
    // html = html.replace(/<p>/, '<p style="">').replace(/<p(.*?)style=[\'\"](.*?)[\'\"]/g, `<p $1 style="$2;max-width:100%;background:#333;"`)  

    console.log(html)  
    return html  
}