思路如下，供新手参考

检测升级部分代码

    upapp: function(isup) {  
        //#ifdef APP-PLUS  
        /* 5+环境锁定屏幕方向 */  
        plus.screen.lockOrientation('portrait-primary'); //锁定  
        /* 5+环境升级提示 */  
        var server = ""; //检查更新地址  

        var req = { //升级检测数据  
            "appid": plus.runtime.appid,  
            "version": plus.runtime.version,  
            "imei": plus.device.imei  
        };  

        uni.request({  
            url: server,  
            data: req,  
            success: (res) => {  
                if (res.statusCode == 200 && res.data.state == "yes") {  
                    let openUrl = plus.os.name === 'iOS' ? res.data.iOS : res.data.Android;  
                    var url = res.data.urlapp;  
                    var content = res.data.content;  
                    uni.showModal({ //提醒用户更新  
                        title: '更新提示',  
                        cancelText:'确定',  
                        confirmText:'取消',  
                        content: res.data.content ? res.data.content : '有新版本，是否确定更新？',  
                        success: (res) => {  
                            if (!res.confirm) {  
                                                                //跳转到升级进度页面  
                                uni.navigateTo({  
                                    url: "/pages/upapp/index?url=" + url + "&content=" + content  
                                })  
                            } else {  
                                //取消  
                            }  
                        }  
                    })  
                } else if (res.statusCode == 200) {  
                    uni.setStorageSync("upapp", time);  
                    uni.showToast({  
                        "title": res.data.content ? res.data.content : "已是最新版本",  
                    });  

                } else {  
                    //  
                }  
            }  
        })  
        //#endif  
    }

下载升级进度页面：/pages/upapp/index

<template>  
    <view>  
        <view class="page-body">  
            {{title}} {{content}}  
            <view class="page-section page-section-gap">  
                <view class="progress-box">  
                    <progress :percent="percent" show-info stroke-width="30" />  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                title: '正在下载中,请稍候！',  
                content: "",  
                percent: 0  
            }  
        },  
        onLoad: function (option) {  
            if (option.url) {  
                this.content = option.content;  
                this.up_app(option.url);  
            } else {  
                uni.navigateBack({  
                    delta: 1,  
                });  
                return;  
            }  

        },  
        onHide: function () {  

        },  
        onShow: function () {  

        },  
        methods: {  
            up_app: function (url) {  
                plus.screen.lockOrientation('portrait-primary'); //锁定  
                this.download(url)  
            },  
            download: function (url) {  
                console.log(url)  
                var that = this;  
                const downloadTask = uni.downloadFile({  
                    url: url,   
                    success: function (res) {  
                        if (res.statusCode === 200) {  
                            console.log(JSON.stringify(res))  
                            console.log('下载成功');  
                            var tempFilePaths = res.tempFilePath;  
                            that.install(tempFilePaths);  
                            return;  
                        }  
                    }  
                });  

                downloadTask.onProgressUpdate(function (res) {  
                    that.percent = res.progress;  
                    //console.log('下载进度' + res.progress);  
                    //console.log('已经下载的数据长度' + res.totalBytesWritten);  
                    //console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);  
                });  
            },  
            install: function (path) {//安装  
                console.log(path)  
                plus.runtime.install(path, {  
                    force: true  
                }, function () {  
                    //uni.hideNavigationBarLoading();  
                    console.log("加载完成！");  
                    uni.navigateBack({  
                        delta: 1,  
                    });  
                }, function (e) {  

                    console.log(JSON.stringify(e));  

                });  
            }  

        }  
    }  
</script>  

<style>  
    progress {  
        width: 100%;  
    }  

    .progress-box {  
        display: flex;  
        height: 50px;  
        margin-bottom: 60px;  
    }  

    .progress-cancel {  
        margin-left: 40px;  
    }  
</style>

后端代码（php）：

$version="";//是接收到的版本号
$now_v="1.0.1";//要升级最新版本号
$data_json=["state"=>"not","content"=>"已是最新版本!",];
if ($version !== $now_v) { //这里是示例代码，真实业务上，最新版本号及relase no
$data_json =array(
"state"=>"yes",
"content"=>"增加一些新功能。",
"mark"=>$now_v,
"urlapp"=>"",//下载app地址
);
}

git地址

（此编辑器仅适用移动端，chrome请按F12模拟手机设备进行浏览）
demo

说明：打包为h5需要进入项目根目录执行
npm init
npm install
安装颜色选择器插件，如无需打包为H5可忽略

上传视频及文件需要传入上传地址给组件，详情见DEMO（注意H5版本的跨域问题）。

具体用法见代码，本插件仅提供了一下思路，可根据自己的需求再进行修改。
截图：

下载地址：http://www.sucaihuo.com/templates/2081.html
需要积分的朋友，签到评论可以免费获取积分下载

为更便于阅读和书写，习惯将CSS文件中的规则定义块格式化在一行，在DCloud问答中找到这篇（CSS 格式化成一行一条），不过这种改组件源码的方式显然不是很适合。

经过简单了解在HBuilderx中可以通过简单配置实现。步骤如下：

1.工具 --> 插件配置 --> format --> jsbeautifyrc.js,在打开的options中添加如下代码：

"css": {  
    "newline_between_rules": false,  
    "selector_separator_newline": false,  
    "preserve_newlines": false  
}

1. 保存后在到CSS文件中Ctrl+A选中所有内容，Ctrl+Shift+K合并为一行，然后Ctrl+K格式化试试是否符合预期。

本机格式话后的效果如附件图所示。本机使用的HBuilderx版本为：1.1.0.20181030

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>APP版本更新</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="../css/mui.min.css">   
    </head>   
    <body>    
        <header class="mui-bar mui-bar-nav">           
              <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>   
                <h1 class="mui-title"> APP版本更新</h1>  
        </header>       
    <script src="../js/mui.min.js"></script>   
    </body>   

<script>   
    mui.init({});   
    mui.plusReady(function() {  
         var urls="http://www.baidu.com/";    

        var ws=plus.webview.currentWebview();  
        var embed=plus.webview.create(urls,'embed',{top:'45px',bottom:'0px'});//创建页面  

        ws.append(embed);    
        embed.addEventListener('loaded',function(){  //监听页面，当页面加载完成时  
                plus.nativeUI.closeWaiting();  
        },false);  
        embed.addEventListener('loading',function(){//监听页面，当页面加载时  
                  plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});  
        },false);  

    })  

</script>  

</html>

什么是跨域

跨域是浏览器的专用概念，指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码，请求了B站点的数据，就是跨域。
A和B要想被认为是同域，则必须有相同的协议（比如http和https就不行）、相同域名、和相同端口号（port）。

如果你是做App、小程序等非H5平台，是不涉及跨域问题的。
稍微例外的是iOS的wkWebview，在5+App，或uni-app的web-view组件及renderjs中，由于WKWebview限制也会产生跨域，这方面另见专题文章：https://ask.dcloud.net.cn/article/36348。uni-app在App的普通js代码不运行在Webview下，不存在跨域问题。

由于uni-app是标准的前后端分离模式，开发h5应用时如果前端代码和后端接口没有部署在同域服务器，就会被浏览器报跨域。

如果前端要callfunction连接unicloud云函数

在h5页面里callfunction会跨域，此时需在unicloud的web控制台配置域名白名单，被加白的域名可以跨域callfunction。详见：https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=useinh5

另外运行期间在HBuilderX的内置浏览器里是不存在跨域的。

如果前端要连接传统后台服务器

分部署时的跨域方案和调试时的跨域方案，具体见下：

部署时的跨域解决方案

• 方案1：最利索的，当然还是将前端代码和后端接口部署在同域的web服务器上
• 方案2：由后台服务器配置策略，设为允许跨域访问。

例如：前端页面部署在uniCloud的前端页面托管里，但是需要访问自己服务器的接口，这时候需要在服务端允许前端页面托管的域名跨域访问。不同的服务端框架允许跨域的配置不一样，这里不再一一列举仅以eggjs为例。

（1）安装egg-cors包

npm i egg-cors --save

（2）在plugin.js中设置开启cors

exports.cors = {  
  enable: true,  
  package: 'egg-cors',  
};

（3）在config.default.js中配置

config.security = {  
  domainWhiteList: [ '前端网页托管的域名' ],  
};

调试时的跨域解决方案

前端工程师调试时，运行起来的前端代码在uni-app自带的web服务器中，而不是部署在后台业务服务器上，此时就会遇到跨域。
除了协调后端配置允许跨域，其实也可以自己解决跨域问题。共3种方案可选。

方案1 使用HBuilderX内置浏览器

这个内置浏览器经过官方处理，不存在跨域问题，简单易用，推荐使用。（需HBuilderX 2.6以上）
在打开页面后，点HBuilderX右上角的预览，即可打开内部浏览器。或者在运行菜单里选择运行到内置浏览器也可以。

方案2 配置webpack-dev-server代理

下面是一篇比uni官网文档更详细的配置指南，这里就直接贴地址了：https://juejin.im/post/5e43b2645188254902765766

方案3 给浏览器安装跨域插件，禁止浏览器报跨域

本插件并非万能，请仔细阅读与学习浏览器安全策略相关知识，不懂这些知识在评论里瞎喷的，官方不会回复。

当我们使用谷歌浏览器调试ajax请求的时候可能会遇到这两个问题：

• 跨域资源共享 详见：CORS
• 跨源读取阻塞 详见：CORB

最常见的就是关于跨域资源共享的问题，也就是我们通常说的跨域。当我们本地服务器预览页面，使用ajax访问远程服务器的内容时就会请求失败，比如：本地预览的地址是：http://localhost:8080/，访问的接口地址是http://dcloud.io/api。

如果仅仅是为了本地预览，可以使用Chrome浏览器插件来协助调试。
!!! 本插件只能解决简单请求的跨域调试（点击搜索什么是简单请求）。对于非简单请求的OPTION预检（点击搜索什么是预检请求）以及线上服务器也有跨域需求的用户，可以服务端配合解决。

Chrome插件名称：Allow-Control-Allow-Origin: *

安装方式：

• 在线安装
  使用谷歌浏览器直接打开插件地址https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi安装即可
• 离线安装
  国内用户如果无法在线安装，可在本页面底部下载附件，离线安装
  1. 下载得到:Allow-Control-Allow-Origin.crx
  2. 点击浏览器右上角的菜单按钮打开谷歌浏览器的扩展管理页面

1. 将下载的扩展插件拖入扩展管理页面

使用方式

1. 打开待调试的页面
2. 在扩展栏目找到安装的插件，点击打开插件配置
3. 输入想要进行跨域调试的接口的地址，点击添加即可

注意事项

• 此插件适合本地调试使用，线上部署如果和接口不同域还需要服务端配合。
• 如果实际响应的内容与浏览器预期的内容有差异还可能被CORB策略所阻止。

firefox跨域插件

firefox跨域插件(注意firefox的css兼容问题)

其他历史问题

HBuilderX 2.3.0版在某些情况下会报跨域，请升级2.3.1+解决

http://m3w.cn/wgsc 我们公司的App，做了一个多月，效果和问题你可以自己看。
uni-app确实让开发者拥有了编写小程序的开发体验来开发App，但是却把小程序里的很多问题也带到了App里，比如scrollview和下拉刷新的冲突，对下拉刷新功能的支持不完善。(还是要说一说uni的下拉刷新，在小程序里都能实现的下拉刷新样式更改，在App里反而阉割或不支持了)。我认为uni-app最终的效果应该远胜于mui(5+)开发的App，可是在实际开发中有的功能让我甚至想重回mui去写，很无语(比如uni的编译器，有的时候连编译器自己都报错....有的时候一个报错，重新编译立刻就没了，群里跟我说是编译器的缓存问题，我是不太了解uni的编译器，但是有的时候的报错上面显示的是编译到wxml文件时出错的，条件编译是很好，但是假如说我们这个项目使用uni只为了编译到App平台，那么我肯定不会在每个页面都加上一句##App-plus##这种东西吧？之前有几张uni编译器报错的截图，前两天被我误删了，这里的截图暂时没办法提供)。uni也有很多在小程序里支持很好的东西，但是在App里反而不好了，比如长列表渲染滚动，因为在小程序里视图层是单独占一个线程的，所以一样的效果和逻辑代码，我运行到App里卡到爆(骁龙821处理啊！)。
还有就是Vue，uni框架里的vue我不知道有没有改过，很多地方在vue里体验很好的东西，在uni里就无法实现或者很差，比如uni里的vue面对多层嵌套的组件，dom更新几乎不会响应，哪怕使用了$nextTick也没用(可以参考我们App的订单管理页面里每一个订单的按钮，我使用了定时器循环更新50次，间隔10ms方法)，甚至在$nextTick里使用setTimeout也没用，还有就是组件的slot里不能获取到循环变量，。。。
说这个不是为了吐槽(理解为吐槽好像也不过分吧..)，只是希望uni-app这个框架能够在小程序端比wepy更优秀，在App端比mui(5+)App更优秀，而不是如今这种只为了跨更多的平台，却忽略或者搁置很多已有的问题。

直接上解决方案：在监听页面卸载事件中清除定时器即可。

onUnload() {  
clearInterval(this.timer);  
}

公司的移动端H5项目上线后，有新需求需要快速生成APP，于是开始准备使用wap2app封壳改造APP，现在基本功能已经完成。

准备写上一篇填坑的记录，和大家共同讨论，目前相关的资料特别少，所以把遇到的问题就列举出来。

本文不定期更新中。。

本人联系方式 qq：393268240

准备工作篇

H5网站配置：webpack自动化构建，vue2.0前端框架，flexble js适配方案

打包配置：HBuilderX新版，苹果证书，安卓证书。

项目构建

1新建wap2app项目

2选择默认模板

3开始配置manifest.json。
1）应用入口页面地址为：wap站首页url，注意一定要用https，如果使用http会被各种广告注入，包括什么联通，电信，还有一些乱七八糟的广告。

2）图标配置：每个分辨率都要准备png图片。

3）启动图配置：每个分辨率都上传，我只适配竖屏，横屏的图片就忽略了，注意图片压缩，不压缩会特别占空间。启动界面选项我配置的是延迟500毫秒自动关闭。tip：如果使用了自己的启动图记得不启用界面显示等待雪花，否则会显示0.3秒的Hbuild的LOGO再打开启动图，特别丑。

4）SDK配置：我只启用的支付部分，使用了支付宝支付。tip：此处的支付接口需要服务端生成订单信息orderstr用于入参，此处的服务端接口我们， 直接使用了支付宝小程序的接口，APP和小程序是通用的。

5）模块权限配置：我只启用了 支付，此处要和SDK同步启用模块

调试篇
1使用hbuild的运行功能进行真机调试

2连接真机到电脑，运行-运行到手机或模拟器-你的设备

3开始运行后，会在设备上安装一个hbuild的APP，通过这个APP打开项目可以在Hbuild控制台看到console.log信息。

4通过下列代码可以判断设备是否是APP环境

let userAgent = navigator.userAgent;
if (/Html5Plus/.test(userAgent)) { //APP客户端

}

改造篇
1分析需求：

列举从H5改造为APP需要调整的模块，我的APP主要改造部分为：头部导航栏，登录，支付，打开外链

1）登录模块：

原H5适用于，浏览器环境，微信公众号环境，所以使用了手机号验证码登录和微信授权登录。
APP登录方式，通过判断为APP环境后只显示手机号验证码登录

     最近注意到一个小问题，就是在控制台跟着这个视频教程打，结果视频教程是一样的代码，还是出错找了半天。关于这个，语句结尾逗号  

是否要加，还是摸棱两可，加了HBuilderX报错可浏览器正常通过，不加就好，不知道这是不是一个小bug