本教程适合小白，入门，进阶三种不同类型的同学观看
小白请先看: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

我们在开发 App 应用中，经常会遇到打开第三方程序的场景，比如打开手机淘宝、通过第三方浏览器打开一个 url 等等。

App不像网页可以使用http超链接互相跳转，但手机os设计了scheme机制，可以通过特殊的链接互相调起。

比如手机淘宝，其安装后会在手机os中会注册一个scheme协议，taobao://。

这种协议还支持参数，比如taobao://s.taobao.com/search?q=uni-app启动淘宝并打开搜索页面搜索uni-app。

在uni-app/5+App中，可以通过scheme呼起其他App，也支持给自己的App设置scheme参数。

这个功能小程序并不支持，属于App端的扩展API。

打开外部scheme的API是plus.runtime.openURL()。查看文档：http://www.html5plus.org/doc/zh_cn/runtime.html

打开第三方程序

打开第三方程序，我们需要使用 runtime 模块,下面我罗列两个相关的方法。其他操作请详读文档。

1. 调用外部浏览器打开指定的URL

   plus.runtime.openURL( url, errorCB, identity );  

   • url: ( String ) 必选 要打开的URL地址
     字符串类型，各平台支持的地址类型存在差异，参考平台URL支持表。
   • errorCB: ( OpenErrorCallback ) 可选 打开URL地址失败的回调
     打开指定URL地址失败时回调，并返回失败信息。
   • identity: ( String ) 可选 指定打开URL地址的程序名称
     在iOS平台此参数被忽略，在Android平台为程序包名，如果指定的包名不存在，则打开URL地址失败。

       <template>  
           <view>  
               <button class="button" type="primary" @click="open(0)">使用第三方程序打开指定URL</button>  
           </view>  
       </template>  

   <script>  
   export default {  
       data() {  
           return {  
               url: 'https://uniapp.dcloud.io/'  
           };  
       },  
       onLoad(op) {},  
       methods: {  
           open(types) {  
                   plus.runtime.openURL(this.url, function(res) {  
                       console.log(res);  
                   });  
           }  
       }  
   };  
   </script>  
   

2. 调用第三方程序

   plus.runtime.launchApplication( appInf, errorCB );  

   • appInf: ( ApplicationInf ) 必选 要启动第三方程序的描述信息
   • errorCB: ( LaunchErrorCallback ) 必选 启动第三方程序操作失败的回调函数
     启动第三方程序失败时回调，并返回失败信息。

       <template>  
           <view>  
               <button class="button" type="primary" @click="launchApp">打开淘宝</button>  
           </view>  
       </template>  

   
   <script>  
   export default {  
       data() {  
           return {  
               url: 'https://uniapp.dcloud.io/'  
           };  
       },  
       onLoad(op) {},  
       methods: {  
           launchApp() {  
               let _this = this;  
               // 判断平台  
               if (plus.os.name == 'Android') {  
                   plus.runtime.launchApplication(  
                       {  
                           pname: 'com.taobao.taobao'  
                       },  
                       function(e) {  
                           console.log('Open system default browser failed: ' + e.message);  
                       }  
                   );  
               } else if (plus.os.name == 'iOS') {  
                   plus.runtime.launchApplication({ action: 'taobao://' }, function(e) {  
                       console.log('Open system default browser failed: ' + e.message);  
                   });  
               }  
   
           }  
       }  
   };  
   </script>  
   

常用URLscheme

[  
    // 只在 ios 中生效  
    {  
        name: 'App Store',  
        scheme: 'itms-apps://'  
    },  
    {  
        name: '支付宝',  
        pname: 'com.eg.android.AlipayGphone',  
        scheme: 'alipay://'  
    },  
    {  
        name: '淘宝',  
        pname: 'com.taobao.taobao',  
        scheme: 'taobao://'  
    },  
    {  
        name: 'QQ',  
        pname: 'com.tencent.mobileqq',  
        scheme: 'mqq://'  
    },  
    {  
        name: '微信',  
        pname: 'com.tencent.mm',  
        scheme: 'weixin://'  
    },  
    {  
        name: '京东',  
        pname: 'com.jingdong.app.mall',  
        scheme: 'openApp.jdMobile://'  
    },  
    {  
        name: '新浪微博',  
        pname: 'com.sina.weibo',  
        scheme: 'sinaweibo://'  
    },  
    {  
        name: '优酷',  
        pname: 'com.youku.phone',  
        scheme: 'youku://'  
    }  
]  

更多实用例子

除了简单的打开App，我们更多的时候想要直达。这里汇总了很多有用的直达案例：

• 使用应用商店打开指定App，可用于引导评分
• 强制使用应用宝打开指定App
• 打开淘宝搜索页面。需要你要做淘宝客，需要向淘宝申请自己的scheme参数并传入。
• 打开地图并指定地点
• 打开qq并到指定聊天界面，可用于客服
  具体代码见下：

<template>  
    <view>  
        <page-head title="通过scheme打开三方app示例"></page-head>  
        <button class="button" @click="openBrowser('https://uniapp.dcloud.io/h5')">使用浏览器打开指定URL</button>  
        <button class="button" @click="openMarket()">使用应用商店打开指定App</button>  
        <button class="button" @click="openMarket('com.tencent.android.qqdownloader')">强制使用应用宝打开指定App</button>  
        <button class="button" @click="openTaobao('taobao://s.taobao.com/search?q=uni-app')">打开淘宝搜索页面</button>  
        <button class="button" @click="openMap()">打开地图并指定地点</button>  
        <view class="uni-divider">  
            <view class="uni-divider__content">打开QQ</view>  
            <view class="uni-divider__line"></view>  
        </view>  
        <view class="uni-padding-wrap">  
            <form @submit="openQQ">  
                <view>  
                    <view class="uni-title">请输入聊天对象QQ号：</view>  
                    <view class="uni-list">  
                        <view class="uni-list-cell">  
                            <input class="uni-input" name="qqNum" type="number"/>  
                        </view>  
                    </view>  
                </view>  
                <view>  
                    <view class="uni-title">请选择QQ号类型：</view>  
                    <radio-group class="uni-flex" name="qqNumType">  
                        <label>  
                            <radio value="wpa" checked=""/>普通QQ号</label>  
                        <label>  
                            <radio value="crm" />营销QQ号(无需加好友直接聊天)</label>  
                    </radio-group>  
                </view>  
                <view class="uni-btn-v uni-common-mt">  
                    <button class="button" formType="submit">打开qq并到指定聊天界面</button>  
                </view>  
            </form>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  

        };  
    },  
    methods: {  
        openBrowser(url){  
            plus.runtime.openURL(url)  
        },  
        openMarket(marketPackageName) {  
            var appurl;  
            if (plus.os.name=="Android") {  
                appurl = "market://details?id=io.dcloud.HelloH5"; //由于hello uni-app没有上Android应用商店，所以此处打开了另一个示例应用  
            }  
            else{  
                appurl = "itms-apps://itunes.apple.com/cn/app/hello-uni-app/id1417078253?mt=8";  
            }  
            if (typeof(marketPackageName)=="undefined") {  
                plus.runtime.openURL(appurl, function(res) {  
                    console.log(res);  
                });  
            } else{//强制指定某个Android应用市场的包名，通过这个包名启动指定app  
                if (plus.os.name=="Android") {  
                    plus.runtime.openURL(appurl, function(res) {  
                        plus.nativeUI.alert("本机没有安装应用宝");  
                    },marketPackageName);  
                } else{  
                    plus.nativeUI.alert("仅Android手机才支持应用宝");  
                }  
            }  
        },  
        openTaobao(url){  
            plus.runtime.openURL(url, function(res) {  
                uni.showModal({  
                    content:"本机未检测到淘宝客户端，是否打开浏览器访问淘宝？",  
                    success:function(res){  
                        if (res.confirm) {  
                            plus.runtime.openURL("https://s.taobao.com/search?q=uni-app")  
                        }  
                    }  
                })  
            });  
        },  
        openMap(){  
            var url = "";  
            if (plus.os.name=="Android") {  
                var hasBaiduMap = plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',action:'baidumap://'});  
                var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'});  
                var urlBaiduMap = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";  
                var urlAmap = "androidamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0"  
                if (hasAmap && hasBaiduMap) {  
                    plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"百度地图"},{title:"高德地图"}]}, function(e){  
                        switch (e.index){  
                            case 1:  
                                plus.runtime.openURL(urlBaiduMap);  
                                break;  
                            case 2:  
                                plus.runtime.openURL(urlAmap);  
                                break;  
                        }  
                    })  
                }  
                else if (hasAmap) {  
                    plus.runtime.openURL(urlAmap);  
                }  
                else if (hasBaiduMap) {  
                    plus.runtime.openURL(urlBaiduMap);  
                }  
                else{  
                    url = "geo:39.96310,116.340698?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82";  
                    plus.runtime.openURL(url); //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差  
                }  
            } else{  
                // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）  
                plus.nativeUI.actionSheet({title:"选择地图应用",cancel:"取消",buttons:[{title:"Apple地图"},{title:"百度地图"},{title:"高德地图"}]}, function(e){  
                    console.log("e.index: " + e.index);  
                    switch (e.index){  
                        case 1:  
                            url = "http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=39.96310,116.340698&spn=0.008766,0.019441";  
                            break;  
                        case 2:  
                            url = "baidumap://map/marker?location=39.968789,116.347247&title=DCloud&src=Hello%20uni-app";  
                            break;  
                        case 3:  
                            url = "iosamap://viewMap?sourceApplication=Hello%20uni-app&poiname=DCloud&lat=39.9631018208&lon=116.3406135236&dev=0";  
                            break;  
                        default:  
                            break;  
                    }  
                    if (url!="") {  
                        plus.runtime.openURL( url, function( e ) {  
                            plus.nativeUI.alert("本机未安装指定的地图应用");  
                        });  
                    }  
                })  
            }  
        },  
        openQQ: function (e) {  
            // console.log("e.detail.value: " + JSON.stringify(e.detail.value));  
            // 没有校验qq号是否为空或合法数字，如果不是可用的qq号，启动qq后会停留在qq主界面  
            plus.runtime.openURL('mqqwpa://im/chat?chat_type=' + e.detail.value.qqNumType + '&uin=' + e.detail.value.qqNum,function (res) {  
                plus.nativeUI.alert("本机没有安装QQ，无法启动");  
            });  
        }  
    }  
};  
</script>  
<style>  
.button {  
    margin: 30upx;  
    color: #007AFF;  
}  
</style>  

给自己的App设置scheme

可在manifest中可配置。
Android配置方法
iOS配置方法