基于UniApp自定义弹出框uniPop组件、实现了uniapp仿微信、android、ios弹窗效果

uniPop组件含有多种动画效果、皮肤类型ios/android、可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置、自动关闭秒数、遮罩层透明度及点击遮罩是否关闭

如下图：H5/小程序/App三端效果兼容性一致。(后续大图均展示App端)

uniPop组件引入方式
以下两种引入方式均可：

• 在main.js里引入全局组件
  import uniPop from './components/uniPop/uniPop.vue'
  Vue.component('uni-pop', uniPop)
• 在页面引入组件

<template>  
    <view class="container">  
        ...  

        <!-- 弹窗模板 -->  
        <uni-pop ref="uniPop"></uni-pop>  
    </view>  
</template>  

<script>  
    import uniPop from './components/uniPop/uniPop.vue'  
    export default {  
        data() {  
            return {  
                ...  
            }  
        },  
        components:{  
            uniPop  
        },  
        ...  
    }  
</script>

调用方式 this.$refs.uniPop.show({...})

this.$refs.uniPop.show({  
    content: 'msg消息提示框（5s后窗口关闭）',  
    shade: true,  
    shadeClose: false,  
    time: 5,  
    anim: 'fadeIn',  
})

uniPop.vue自定义弹窗模板

/**  
  * @tpl        uni-app自定义弹窗组件 - uniPop.vue  
  * @author     andy by 2019-09-20  
  * @about      Q：282310962  wx：xy190310  
  */  

<template>  
    <view v-if="opts.isVisible" class="uniPop" :class="opts.isCloseCls">  
        <view class="unipop__ui_panel">  
            <view v-if="opts.shade" class="unipop__ui_mask" @tap="shadeTaped"></view>  
            <view class="unipop__ui_main">  
                <view class="unipop__ui_child" :style="opts.style">  
                    <!-- 标题 -->  
                    <view v-if="opts.title" class="unipop__ui_tit">{{opts.title}}</view>  
                    <!-- 内容 -->  
                    <view v-if="opts.content" class="unipop__ui_cnt" :style="opts.contentStyle">  
                        {{opts.content}}  
                    </view>  
                    <view v-if="opts.btns" class="unipop__ui_btns">  
                        <text v-for="(item,index) in opts.btns" :key="index" class="btn" :style="item.style" @tap="btnTaped(item)">{{item.text}}</text>  
                    </view>  
                </view>  
                <!-- xclose -->  
                <view v-if="opts.xclose" class="unipop__xclose" @tap="close"></view>  
            </view>  
        </view>  
    </view>  
</template>

data() {  
    return {  
        defaultOptions: {  
            isVisible: false,       //是否显示弹窗  

            title: '',              //标题  
            content: '',            //内容  
            contentStyle: '',       //内容样式  
            style: null,            //自定义弹窗样式  
            skin: '',               //弹窗风格  
            icon: '',               //弹窗图标  
            xclose: false,          //自定义关闭按钮  

            shade: true,            //遮罩层  
            shadeClose: true,       //点击遮罩关闭  
            opacity: '',            //遮罩透明度  
            time: 0,                //自动关闭秒数  
            end: null,              //销毁弹窗回调函数  

            anim: 'scaleIn',        //弹窗动画  scaleIn(默认) | fadeIn | shake | top | right | bottom | left  
            position: '',           //弹窗位置  top | right | bottom | left  

            btns: null,             //弹窗按钮  
        },  
        opts: {},  
        timer: null  
    }  
},

作者：xiaoyan2015
链接： https://cloud.tencent.com/developer/column/3374
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

记录一下
根据真机运行常见问题：http://ask.dcloud.net.cn/article/97 各种排查都没有问题还是连接不上,
记录:清除之前hbuilderx的错误配置,重新来过.
执行hbuilderx安装目录下的 reset.bat命令.

此文档不再维护，请参考新文档地址：https://uniapp.dcloud.io/tutorial/app-sec-confusion

App的安装包都可以解压。前端资源，一般都是明文存放在安装包中，为防止解压后泄露敏感信息，需要进行安全处理。

由此DCloud提供了App端的js/nvue文件的原生混淆。5+ App/Wap2App支持对指定的js进行原生混淆。uni-app支持对指定的nvue文件原生混淆。

原生混淆后的安装包，解压后看到的都是乱码。

但需要注意：

1. 没有绝对的安全，非常重要的信息，应该保存在服务器而不是前端
2. 运行期对资源代码解密是影响执行性能的。不建议全包混淆，仅挑选需要保护的个别文件处理即可
3. uni-app项目制作wgt包不支持原生混淆加密（即使配置也不会生效），HBuilderX3.1.0+版本后支持
4. 为了保证加密数据的安全性，加密算法和key不对外公开，因此离线打包无法支持原生混淆加密，标准基座或自定义基座真机运行也不支持原生混淆加密（只有正式云打包才支持）

具体使用方式如下：

第一步、在manifest.json文件中配置要混淆的文件列表

打开manifest.json文件，切换到“源码视图”，按不同项目类型进行配置。

uni-app项目

uni-app的js运行在独立的jscore中，而不是webview中，所以不受iOS平台WKWebview不支持原生混淆的限制。
uni-app的vue页面中的js，是整体编译到一个大js文件中的，它经过编译，已经不再是vue源码了，但还不是乱码。对这个统一的大文件进行混淆会有影响性能。
所以uni-app只支持独立混淆nvue/js文件。

• vue页面
  HBuilderX2.6.3+版本v3编译器支持对独立的js文件进行原生混淆，开发者可以将要保护的js代码写到独立的js文件中，在vue页面中使用import引用；如果此js同时被nvue页面import引用，则nvue页面也需要配置原生混淆才有效。另外main.js也可以原生混淆。
  老版本不支持vue页面的原生混淆，开发者只能将要保护的js代码写到nvue文件中进行保护。
• nvue页面
  HBuilderX2.3.4+版本支持nvue文件的原生混淆。
  如果nvue页面引入了外部的js文件，会被一起原生混淆。但如果这个js还被其他不加密的文件引用，则该js仍然会暴露在安装包中。
• vue页面和nvue页面同时使用加密js里的数据或方法（HBuilderX2.6.3+版本v3编译器）
  配置该js加密，并在App.vue中引用该js，把该js中的数据或方法赋值给全局对象，如globalData，vue和nvue中通过访问getApp访问共享数据或方法即可，无需配置nvue页面加密。

如果要发布多端的话，要保护的js最好写在app-plus的条件编译中，否则发布到其他端，还是无法原生混淆。

HBuilderX2.3.4版本开始，uni-app项目支持对nvue文件进行原生混淆

在"app-plus" -> "confusion" -> "resources"节点下添加要混淆的nvue文件列表：

    "app-plus": {   
        "confusion": {    
            "description": "NVUE原生混淆",    
            "resources": {    
                "pages/barcode/barcode.nvue": {     
                },     
                "pages/map/map.nvue": {     
                }     
            }     
        },    
        // ...    
    }

resource下的键名为nvue文件路径（相对于应用根目录），值为空JSON对象（大括号）。

<a id="vuejs"></a>
HBuilderX2.6.3+版本开始，uni-app项目使用v3编译器支持对vue页面中引用的js文件进行原生混淆

在manifest.json文件中添加要混淆的js文件列表：

    "app-plus": {   
        "confusion": {    
            "description": "原生混淆",    
            "resources": {    
                "common/test.js" : {}  
            }     
        },    
        // ...    
    }

在vue文件中引用混淆的js文件：

import test from '../common/test.js';  
//test.join();  //调用引用js中的方法

注意：uni-app中vue页面的webview组件支持加载使用加密混淆hybrid、static目录中的js文件，nvue页面的webview组件不支持。

5+ App/Wap2App项目

应用运行期间在页面打开时需要消耗更多时间进行混淆文件还原，为减少对运行速度的影响，5+App/wap2app仅支持对js文件进行原生混淆。
在"plus" -> "confusion" -> "resources"节点下添加要混淆的js文件列表：

    "plus": {   
        "confusion": {    
            "description": "JS原生混淆",    
            "resources": {    
                "js/common.js": {     
                },     
                "js/immersed.js": {     
                }     
            }     
        },    
        // ...    
    }

resource下的键名为js文件路径（相对于应用根目录），值为空JSON对象（大括号）。

<a id="wkwebview"></a>
HBuilderX2.6.11+版本开始，在iOS11+设备上使用WKWebview也可以支持JS原生混淆
WKWebview使用了更加严格的安全机制，使用原生混淆的js文件在html页面中必须使用自定义协议头plus-confusion://来引用：

<script type="text/javascript" src="plus-confusion://../js/common.js"></script>  
<!-- plus-confusion://后面为js文件路径，相对于当前html页面的路径 -->

在manifest.json的"plus" -> "confusion" -> "resources"节点下添加要混淆的js文件列表。
在"confusion"节点下添加 "supportWKWebview": true 支持WKWebview。
由于自定义协议仅在iOS11及以上设备才支持，建议配置应用支持的最低版本deploymentTarget为11.0：

    "plus": {   
        "confusion": {    
            "description": "JS原生混淆",   
            "supportWKWebview": true,   
            "resources": {    
                "js/common.js": {     
                }  
            }     
        },  
        "distribute": {  
            "apple": {  
                "deploymentTarget": "11.0"     //设置应用仅支持iOS11及以上设备  
                //...  
            }  
        }  
        // ...    
    }

注意：iOS平台WKWebview需iOS11+系统才支持原生混淆。5+App/wap2app项目，如果要兼容iOS11以下设备只能强制使用UIWebview内核，但苹果将要废弃UIWebview（详情）。如对原生混淆很重视，从长远考虑，建议改造升级uni-app

第二步、提交云端打包

配置好原生混淆的文件列表后，需要提交云端打包，注意在App云端打包对话框中需要勾选“对配置的js文件进行原生混淆”

再次强调：为了保证加密数据的安全性，加密算法和key不对外公开，因此离线打包无法支持原生混淆。
熟悉原生的开发者可将敏感信息存放于原生代码中，再与js进行交互。

对安全性要求较高的开发者，除了对前端js进行加密外，还应该对整个apk再进行一次加固。市面上很多加固服务可以选择，比如360加固、爱加密等。

本案例是上传图片案例，可以进行图片选择和拍照操作。
使用时主要修改有以下几个：
1、var head_pho = document.getElementById('head_pho');这里修改成获取事件id
2、task.addData('token', token); 在此可以设置参数
3、task.addFile(filepath, { key: "personImage" }); filepath为图片路径，key是服务端接收图片的参数
4、plus.uploader.createUpload 在这里设置成服务端上传图片接口
以下为代码

var head_pho = document.getElementById('head_pho');  
mui.plusReady(function() {  
    // 文件路径  
    var filepath;  
    head_pho.addEventListener('tap', function() {  
        if (mui.os.plus) {  
            var a = [{  
                title: '拍照'  
            }, {  
                title: '从手机相册选择'  
            }];  
            plus.nativeUI.actionSheet({  
                title: '修改头像',  
                cancel: '取消',  
                buttons: a  
            }, function(b) {  
                switch (b.index) {  
                    case 0:  
                        break;  
                    case 1:  
                        //拍照  
                        getImages();  
                        break;  
                    case 2:  
                        //打开相册  
                        galleryImages();  
                        break;  
                    default:  
                        break;  
                }  
            }, false);  
        }  
    });  

    //拍照  
    function getImages() {  
        var mobileCamera = plus.camera.getCamera();  
        mobileCamera.captureImage(function(e) {  
            plus.io.resolveLocalFileSystemURL(e, function(entry) {  
                var path = entry.toLocalURL() + '?version=' + new Date().getTime();  
                var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径    
                compressImage(path, dstname, 0);  
            }, function(err) {  
                console.log("读取拍照文件错误");  
            });  
        }, function(e) {  
            console.log("er", err);  
        }, function() {  
            filename: '_doc/head.png';  
        });  
    }  

    //从本地相册选择  
    function galleryImages() {  
        plus.gallery.pick(function(a) {  
            plus.io.resolveLocalFileSystemURL(a, function(entry) {  
                plus.io.resolveLocalFileSystemURL('_doc/', function(root) {  
                    root.getFile('head.png', {}, function(file) {  
                        //文件已经存在  
                        file.remove(function() {  
                            console.log("文件移除成功");  
                            entry.copyTo(root, 'head.png', function(e) {  
                                var path = e.fullPath + '?version=' + new Date().getTime();  

                                var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径    
                                compressImage(path, dstname, 270);  
                            }, function(err) {  
                                console.log("copy image fail: ", err);  
                            });  
                        }, function(err) {  
                            console.log("删除图片失败：（" + JSON.stringify(err) + ")");  
                        });  
                    }, function(err) {  
                        //打开文件失败  
                        entry.copyTo(root, 'head.png', function(e) {  
                            var path = e.fullPath + '?version=' + new Date().getTime();  
                            uploadHeadImg(path);  
                        }, function(err) {  
                            console.log("上传图片失败：（" + JSON.stringify(err) + ")");  
                        });  
                    });  
                }, function(e) {  
                    console.log("读取文件夹失败：（" + JSON.stringify(err) + ")");  
                });  
            });  
        }, function(err) {  
            console.log("读取拍照文件失败: ", err);  
        }, {  
            filter: 'image'  
        });  
    }  

    // 产生一个随机数    
    function getUid() {  
        return Math.floor(Math.random() * 100000000 + 10000000).toString();  
    }  

    // 上传操作  
    function upload() {  
        var task = plus.uploader.createUpload(getUrl() + 'com_uploadPersonImage.action', {  
                method: "POST"  
            },  
            function(t, status) { //上传完成    
                if (status == 200) {  
                    console.log(t.responseText);  
                    // imgdiv.innerHTML = '<img id="userImg" src="' + t.responseText + '"/>';  
                } else {  
                    console.log("上传失败：" + status);  
                }  
            });  
        task.addData('token', token);  
        task.addFile(filepath, {  
            key: "personImage"  
        });  
        task.start();  
    }  

    // 进行图片压缩  
    function compressImage(src, dstname, rotate) {  
        plus.zip.compressImage({  
                src: src,  
                dst: dstname,  
                overwrite: true,  
                quality: 20,  
                rotate: rotate  
            },  
            function(event) {  
                console.log("Compress success:" + event.target);  
                filepath = event.target;  
                upload();  
            },  
            function(error) {  
                console.log(error);  
            });  
    }  
})

详细问题描述

目前我们要实现的需求为：
1、长按触发 showActionSheet
2、长按的元素在长按期间有页面滚动或者页面滑动时不触发长按
在小程序端没问题，在 H5 端滑动或者滚动的时候仍然会触发长按

[内容]

重现步骤

[步骤] H5 端列表元素长按时滑动

[结果] 滑动没有阻止长按事件的触发

[期望] 在长按触发前如果有页面滑动或者滚动时阻止长按触发

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号] 2.3.3.20190923

[windows版本号]

[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序？] h5
[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试] HBuilderX创建

[编译模式是老模板模式还是新的自定义组件模式？] 自定义组件模式

1:44:58.250 44:57.623 20949 21138 E console : [ERROR] reportJSException >>>> exception function:callReportCrash, exception:weex core process crash and restart exception
11:44:58.440 Error: [JS Framework] Using invalid instance id "1" when calling destroyInstance.
11:44:59.879 App Launch at App.vue:48
11:45:00.745 45:00.127 20949 21154 E console : [ERROR] reportJSException >>>> exception function:callReportCrash, exception:weex core process crash and restart exception
11:45:00.918 Error: [JS Framework] Using invalid instance id "2" when calling destroyInstance.
11:45:02.355 App Launch at App.vue:48
11:45:03.150 45:02.533 20949 21170 E console : [ERROR] reportJSException >>>> exception function:callReportCrash, exception:weex core process crash and restart exception
11:45:03.441 Error: [JS Framework] Using invalid instance id "3" when calling destroyInstance.

首先，我成功的完成HBuilder真机运行连接逍遥模拟器或mumu模拟器。

而，我的项目中大量用到了plus.storage.getItem('_token');来获取token；

但是在模拟器上成功运行项目后，测试发现所有的token获取均为null。

所以，关于在模拟器上开发应用，目前道路难行。

最新版本的hbuildx推送ios真机调试无法HTTP通信。没有响应。应该是又被启用了ats验证了吧。

js版serialize 实现

function serialize (obj, prefix) {  
  const str = []  
  let p  
  if (obj.length === 0) {  
    //  str.push(encodeURIComponent(prefix) + '=1')  
  } else {  
    for (p in obj) {  
      if (obj.hasOwnProperty(p)) {  
        const k = prefix ? prefix + '[' + p + ']' : p  
        let v = obj[p]  
        if (v instanceof Date) {  
          v = parseTime(v)  
        }  
        str.push((v !== null && typeof v === 'object') ? serialize(v, k) : encodeURIComponent(k) + '=' + encodeURIComponent(  
          v))  
      }  
    }  
  }  

  return str.join('&')  
}

uni.request.data改造

options.data = serialize(options.data)

这样就可以了

iOS App 在使用一些功能时需要申请后台权限，比如后台音频播放、后台定位等，在提交云打包时，需要在 manifest.json 的 "app-plus" -> "distribute" -> "ios" -> "UIBackgroundModes" 节点添加对应权限的 描述key 即可；

注意：后台权限用不到千万不要填写，以免审核被拒

{  
"app-plus" : {  
        /* 应用发布信息 */  
        "distribute" : {  
            /* ios打包配置 */  
            "ios" : {  
                "UIBackgroundModes" : [ "audio"] // 数组，支持多个  
            },  
         ...  
        }  
    }  
}

权限描述key获取方式

在 xcode 中勾选权限

然后查看 info.plist 右键勾选 Raw Keys & Values UIBackgroundModes 对应的就是需要填写在 manifest.json 中的 值

所有 key

audio  // Audio, AirPlay, and Picture in Picture  
bluetooth-central // Uses Bluetooth LE accessories  
bluetooth-peripheral // Acts as a Bluetooth LE accessory  
external-accessory // External accessory communication  
fetch // Background fetch  
location // Location updates  
processing // Background processing  
remote-notification // Remote notifications  
voip   // Voice over IP

View部分代码：
<view class="com_middle1 com_middle_bg">
<view>投资金额</view>
<view>{{ numFilter(object.InvestmentAmount) + object.MoneyUnit }}</view>
</view>

JS部分：（注意toFixed()只能用在数值部分）
第一保留小数点数值后两位，尾数四舍五入
numFilter (value) {
// 截取当前数据到小数点后两位
let realVal = parseFloat(value).toFixed(2)
return realVal
}
第二保留小数点后两位的过滤器，不会四舍五入
numFilter (value) {
// 截取当前数据到小数点后三位
let tempVal = parseFloat(value).toFixed(3)
let realVal = tempVal.substring(0, tempVal.length - 1)
return realVal
}

为了方便大家技术交流，因此建立了QQ群

HX官方群15：793046085
HX官方群14：750929504 (2000人群）
HX官方群13：1029243934 （2000人群，已满）
HX官方群12： 1051711389 (1000人群，已满）
HX官方群11： 1051710376 (2000人群，已满）
HX官方群9：824581834 (500人群）
HX官方群8：759481147（2000人群）
HX官方群7：768137673 (500人群，已满）
HX官方群6：843092525 (500人群，已满）
HX官方群5：178140648 (1000人群，还有几十个空名额)
HX官方群4：905643840(500人群，已满）
HX官方群3：335122268(500人群，已满）
HX官方群2：363040810(500人群，已满）

Mac交流群

仅限mac用户加入

• Mac群1： 148229211
• Mac群2： 339884851