因为最近vue刚刚发版了最新版本的vue-cli3,然后想把vue3.0项目打包成app.心想这次改了这么多东西打包能成么？果不其然，web转完app运行后发现白屏。那么咱们接下来就聊聊怎么去解决。

1. 跑各种网站资料翻一翻，突然发现一个有类似问题，一看vue-router的mode配置可能会影像打包后的链接地址，然后看看我自己的router:

         export default new Router({  
                mode: "history",  
                base: process.env.BASE_URL,  
                routes: [{  
                      path: "/home",  
                      name: "home",  
                      component: Home,  
                      meta: {  
                          keepAlive: true  
                      },  
                      children:[]  
                }]  
         })   

配置路由模式:

   hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。  
   history: 依赖 HTML5 History API 和服务器配置。附上链接查看 HTML5 History 模式配置.  
   abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。  

解决办法：

   如果使用history模式上线，必须要服务端在服务器上有对应的模式才能使用history（看上面链接），如果服务器上没有配置，可以先使用默认的hash；当然个人建议还是使用history模式  

2.这会你会发现压缩的项目在本地能访问了，不过通过app打包后还是白屏，那么继续看下面的操作:

   在vue3.0根目录创建一个vue.config.js文件，内部代码如下：  
   module.exports = {   
        publicPath: process.env.NODE_ENV === 'production' ? './' : './'  
   };  

这个主要是修改app中index文件查找js、css、image路径地址导致的白屏。

OK，作为一名合格的前端开发，遇到问题解决问题！对于vue开发我也是一个新手，欢迎大家互相学习！

本教程适合小白，入门，进阶三种不同类型的同学观看
小白请先看:html5+css3视频教程，这是开发必须要学习的基础知识，合理安排观看时间；
入门级别的大白菜请观看：DCloud HBuilder开发WEB移动APP基础入门视频教程；
进阶级别的大神请观看：实战教程并配合着学习资料，练习资料一同观看。

教程下载：https://www.sucaihuo.com/video/390.html

不知道uniapp打包出来的ios有没有处理其它信息，或者是工程名称都一样？我两次提交两个不同的app，都是收到苹果审核2.1大礼包。uniapp根本上不了线！！！！！

首次使用uniapp实现app开发

使用个推sdk，实现app的消息推送；
找遍了文档，没找到方法，最终结合H5+的方式实现消息推送
带参数跳转指定页面。

2019-8-7 修改为unipush方式，仅需要将uniapp内的配置 从个推修改为unipush 即可，连代码都不用更改。如果需要配置厂商的就配置下。

参考 uniapp 提供官方文档
uni.getProvider(OBJECT)
获取服务供应商；
uni.subscribePush(OBJECT)
开启推送；
上述可获取到推送的基本信息，token ，appid，appkey ，CID等信息。

uni.onPush(OBJECT)
监听透传数据。
多种方式实验过后，仍是无法监听；（个人能力问题，还是不知道哪里实现监听T T）

最终解决方法：
为在APP.vue中使用；

    //#ifdef APP-PLUS  

          /* 5+  push 消息推送 ps:使用:H5+的方式监听，实现推送*/  
        plus.push.addEventListener("click", function(msg) {  
                plus.ui.alert("click:"+JSON.stringify(msg));  
                plus.ui.alert(msg.payload);  
                // plus.ui.alert(JSON.stringify(msg));  

            }, false);  
                // 监听在线消息事件    
            plus.push.addEventListener("receive", function(msg) {  
                // plus.ui.alert(2);  
                plus.ui.alert("recevice:"+JSON.stringify(msg))  
       }, false);  

   //#endif  

在app.vue的 onLaunch 生命周期内，实现跳转也出现过问题。
应该是页面还没加载，加上定时后，可实现功能；

setTimeout(function(){
uni.navigateTo({
url: '../fire/detail?detailID='+msgObj.id
})
},1000)；

page.json ;有配置

强制打开 app后在 自动首页打开，所有跳转链接是路径不是在app.vue的写法；
需要从main.vue下找到 需要跳转的路径 。所以的我是 “../xxx/xxx”

解决推送问题的同时也顺便解决了之前一直想要监听事件的问题；
uniapp下的监听都在app.vue下；
其他页面无法监听；

个人方式实现功能，希望可以有帮助，小伙伴们有更好的可以多多交流。

在个推之后，dcloud推了unipush，比较方便，这篇一直没更新，疫情在家，我就随便补充下 - -

推送选择uniPush

如果需要离线推送，如下图配置，需要开通不同厂商的开发者账号和权限配置。我自己的项目只添加了华为和小米。

-看到需要清角标的，我就直接贴代码的了；
clearBage() {
//清空角标
plus.runtime.setBadgeNumber(0);
//导入个推原生类
var GeTuiSdk = plus.ios.importClass('GeTuiSdk');
GeTuiSdk.setBadge(0);
uni.showToast({
title: "应用角标已清除",
icon: "none"

            })  

        },  

我是个菜鸟，会写点前端。

　　一直用的HBuilder，后来迫不得已用了HBuilderX，因为HBuilder不再发展了，像我这样的菜鸟只能从表面去看现象，就是看出来官方在逐渐淘汰HBuilder转而发展HBuilderX。但HBuilderX像一个专门给uni-app制作的工具。

我想不懂，你dcloud不去变革和更加强大的完善原本属于一种本质革新的5+APP，你去凑什么热闹发展uni-app，我要能做5+app了，我做几个端的小程序那是分分钟的事，我有必要去跟着你学什么nui-app？

选择5+APP，还不是因为你从本质上有很大的变革，有别人所没有的。dcloud因为发展nui-app，整个团队核心在往那边倾斜，全力以赴的去做，你是来搞笑的吗？给你们说哈，我公司各种端都有，什么百度小程序微信小程序，分分钟出来一个，我们根本不在乎它好不好用，它插件牛不牛比，因为我们商家，只是普及，别人有我们也有，最终我们都要把流量引回自己的产品APP，或者网站。如果我是一个普通使用者，我用美团的APP也不会去用美团的小程序。

想不懂dcloud你瞎忙活什么，你那么确信微信不会倒？那么确信这就是市场趋势？从什么时候开始品牌本质产品都需要依赖别的平台生存了？真的是小家子气，短见。不伦不类。

联系方式：微信 18040567724

HBuilderX1.7.0及以上版本uni-app添加了运行环境版本和编译环境版本的校验机制，当两个版本不一致时会弹出以下提示：

• “手机端SDK版本”：是指5+Runtime的版本号。云打包提交云端打包时确定的，也就是说生成apk/ipa之后，APP运行环境就不会改变了。离线打包时是你下载的sdk的版本。只有默认真机运行基座、云打包机的引擎是和HBuilderX升级而自动升级的。如果你使用了自定义基座、sdk离线打包，需要手动升级，或者重新用新版制作自定义基座，或者下载最新版sdk。
• “HBuilderX版本”：如果项目是HBuilderX创建的，则是HBuilderX的版本号，更新HBuilderX会改变；如果是cli创建的项目，即根目录是package.json，那么编译环境版本号是创建cli时生成的，或者上一次执行npm update生成的。不管HBuilderX如何升级，cli项目的编译器并不会跟随HBuilderX升级而升级，需手动升级。

什么时候会出现这种问题？

• 情况1：HBuilderX版本很老，或cli编译器一直没升级，而云打包服务器已经升级，此时编译环境版本低，而运行环境版本高，就会报错。
• 情况2：使用老版HBuilderX打包了App后，后来使用新版HBuilderX或新版cli制作了wgt升级包。此时编译环境会高于运行环境，也会报错。
• 情况3：使用了cli或自定义基座或本地打包，虽然HBuilderX升级了，但这些配套并没有手动升级，也是报错。
• 情况4：如果HBuilderX版本高于SDK版本，有可能是HBuilderX在升级时出现问题，手机端基座没有升级成功。如果是这种情况，在插件管理里卸载“真机运行插件”，然后重新安装这个插件。

出现问题该怎么办？

1. 比较简单的就是全部升级，保持HBuilderX、自定义基座、cli项目编译器都是最新版。
2. wgt升级时遇到这个问题，首先你可以自测，看老的运行引擎和新版编译器编的wgt是否搭配，如果测试有问题，那不能使用wgt升级，请使用整包升级。如果测试正常，可以在manifest.json文件的源码视图中配置忽略这个提醒，在“app-plus”->"compatible" 节点下添加配置 方式如下：
   HBuilderX1.9.0及以上版本新增以下配置避免弹出提示框

   //...  
   "app-plus": {  
       "compatible": {  
           "ignoreVersion": true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持  
       },  
   //....  
   },  
   //...

   以下方法可针对指定版本避免弹出提示框。

   //...  
   "app-plus": {  
       "compatible": {  
           "runtimeVersion": "1.7.0", //根据实际情况填写  
           "compilerVersion": "1.7.1" //根据实际情况填写  
       },  
   //....  
   },  
   //...

   • "runtimeVersion"字段值表示应用兼容的uni-app运行环境版本号，可以配置多个版本号（使用英文字符,分隔）
   • "compilerVersion"字段值表示编译环境版本号，通常配置当前HBuilderX的版本号或cli编译器版本即可（不可以配置多个）

建议：尽量使用相同的HBuilderX版本制作移动App资源升级包

本地离线打包请及时更新到与HBuilderX版本相对应的App离线打包SDK

cli项目请及时npm update 更新到最新cli，如需指定cli版请参考：修改依赖为指定版本

注意
平台并不知道使用者是正常用户还是开发者。
但开发者在发布给最终用户之前，请务必先自行测试好。
目前出这个问题的，大多是因为制作wgt升级包造成的。
请使用wgt升级的开发者的，务必在测试环境上先测试好了再发布wgt。
在HBuilderX 1.9版里，已经在制作wgt时强调提示了这个信息。

多多客DOODOOKE微信、百度、支付宝三端合一小程序SaaS平台今日正式上线！

开年集齐BAT，多多客DOODOOKE与你一起开启新篇章！

一次制作 三端发布 同时管理

商家只需要在多多客管理后台制作一次小程序，即可在微信、百度、支付宝三大平台同时发布和管理。

多多客三端合一小程序平台帮助商家快速布局小程序，跨越小程序开发的高门槛、高成本，一次性获取微信、支付宝、百度全域千亿级流量，同时节省小程序的制作时间和制作成本。

商家可以在同一个后台统一管理微信、百度、支付宝三端用户和订单等数据，大大优化和完善了商家对小程序的管理效率和使用体验，制定实时营销策略，更加高效运营，降低成本。

随着微信、百度、支付宝、今日头条等越来越多的流量巨头入局小程序，未来小程序将成为商家运营的标配，一款能够同时运行在不同“超级App”中的小程序就显得格外重要。

商家只需要在多多客（doodooke.com）后台通过在线制作，扫码授权，点击发布简单3步，即可轻松拥有微信、百度、支付宝三大平台的小程序。再加上多多客原有的完全可视化拖拽，N+营销工具引流，海量优质行业模板等能力，带给商家更高质量的小程序产品和更完善的小程序服务体系。

很简单，我们的思路是这样的：
uni-app提供客户端
ysv8提供服务器端（100块钱终身可用）
下面上效果：

最后是源码：

提示：pc端调试，请按F12点下

 uni-app开发小程序，index页面引入a、b、c三个组件，article页面引入b、c两个组件，打包之后，发现b、c组件被打到index页面中，也被打到了article页面中了；这样来看，组件不能单独存在，被多少页面使用，就会被重复打包多少次。  
 这样对小程序项目来说不太友好，因为小程序有项目代码大小限制，超过一定大小就不能开发了，组件不能重复打包的问题，导致小程序中有许多重复代码了。  
 有哪位大佬知道更好的解决方案，求告知！

DCloud为开发者提供包括HBuilder、uni-app、uni-app x、uni小程序sdk、HTML5+、MUI、wap2app等开发工具，帮助开发者快速、低成本制作移动互联网多端应用。

DCloud上述开发工具均为免费产品。
您可以自由下载、使用这些工具而不需要向DCloud付费。
DCloud所拥有的知识产权，包括但不限于商标、专利、著作权、商业秘密、专有数据、源码，仍归DCloud所有。
您使用本工具开发的代码及输出物，包括但不限于网站、移动应用，其知识产权归属您所有。
如果您的移动应用中内嵌了DCloud的Runtime或sdk，该Runtime或sdk的知识产权仍然属于DCloud。
类似于您开发的应用内嵌了jvm或.net framework，虽然您的java代码的著作权属于您，但jvm等三方runtime的知识产权仍归原作者所有。

• HBuilderX产品协议：见HBuilderX安装目录下的《license.md》。HBuilderX基于C++编写，其许可协议适用于任何大型公司。华为公司法务在审核HBuilderX许可协议后认为无需单独与DCloud签署协议，可直接在华为内部使用HBuilderX。

• uni-app（含uni-app x、5+app）的开源部分为Apache开源协议：https://github.com/dcloudio/uni-app/blob/master/LICENSE。完整的用户协议见：https://dcloud.io/license/uni-app.html

• 使用DCloud的app引擎，按中国法律要求，需要在app的隐私协议中加入如下隐私协议：https://dcloud.io/license/appprivacy.html

• 如使用uni-ad广告变现服务，按中国法律要求，需要在app的隐私协议中加入如下隐私协议：https://dcloud.io/license/uni-ad.html

• uni小程序sdk为免费产品，sdk包的根目录下有license.md文件，内容与uni-app相同。同时该产品面向大型公司签署保密协议后可开放源码。

• MUI为MIT开源协议：https://github.com/dcloudio/mui

• 云打包：DCloud的App云打包服务为免费产品，同时也支持离线打包。开发者需注意节约免费的公共资源，调试时多使用自定义基座，避免频繁打包。如果云打包次数过于频繁，会收取资源占用费用。

• DCloud通过论坛、qq群提供正常工作时间技术支持。对技术支持服务要求较高的开发者可额外购买付费技术支持

• 部分政府国企事业单位，对使用的产品和服务强制要求提供商业化的保障，不能使用免费产品。针对此类情况DCloud提供商业授权许可+企业级服务的打包产品，如需购买请联系 Email：bd@dcloud.io 。（请勿在本帖中评论，商务同事不在论坛中）。

• 如果您使用DCloud工具不是为了开发应用，而是基于DCloud工具二次开发，为其他开发者提供开发服务，除非您通过DCloud插件市场为开发者服务，否则您需要单独获取DCloud的书面许可。

• uniCloud相关产品为代售模式，DCloud集成第三方云服务，并以优惠价格提供给开发者，另见协议：https://dcloud.io/license/uniCloud.html

> 文档已迁移至新链接：https://uniapp.dcloud.net.cn/unipush-v1.html
> 如有疑问，可以单独发贴咨询。