如果是第一次制作混合app的话，我觉得第一个比较重要的事情是打包，把之前写的页面以一个app的方式呈现出来，会是一件非常令人兴奋的事情。
其次比较重要的事情是窗口的概念。

这里有一个教程，窗口一，窗口二，不是我录的……咳咳，其实我也没看。。。。
这个是mui对于窗口的解释：mui窗口；

首先，打开新页面，好几种方式；

1. 使用a连接的href属性，官方不推荐，我也没有研究
2. 使用plus.webview.open() 简单的open新窗口
3. 使用plus.webview.create().show()，经检验，这个方法最靠谱，兼容性很高，在安卓4.4以下可以完美兼容，而且可以定义extras//额外扩展参数

最后，子页面。
其实子页面是一个非常有意思的东西。
普通的html中div可以随意的定位和更改显示层级，js也可以随意的更改这个页面的数据和dom。其实，只使用普通的html制作混合app也是可以的
然后，子页面可以理解为一个普通页面的普通div。只是这个div很特别，它是一个自治区，父界面的话(js，css)它听或者不听，完全看它自己的心情。甚至父页面出现滚动条，子页面也不一定随着滚动条滚动。如果之前学习过vue的话，他的子组件的概念和子页面的概念是非常像的。

为什么使用子页面，效率和布局。
效率，官方解释说，某个html的dom树过深的话，会引发卡顿。切割为不同的子页面会更好，我没有测试过，不知道具体的数值，不过应该是真的，但是效率绝对不会低太多，现在手机的cpu我觉得还是可以的。
布局，现在版本的H5 ，优化的还是比较好的。对于布局挺好的。这个地方需要讲的东西太多，说了也没用。太杂了。
声明子页面：plus.webview.getWebviewById().append(plus.webview.create())；

需要特别注意的地方：

1. 作用域：子页面拥有独立的作用域。这个好理解，都已经是html级别了，当然有自己的作用域
2. 传值：父子页面间的传值可以通过plus.webview.getWebviewById().evalJS();或者在子页面创建的时候，定义extras属性，后期可以直接当作dom自定义属性点出来。
3. 归属权：父页面关闭的时候，子页面跟着关闭。其余的事情包括show，close，hide，setStyle，都是自己玩自己的。
4. 获取当前页面： plus.webview.currentWebview();在安卓4.4，及以下，这个属性显示的是当前正在显示的页面，在其余版本，获取的是本身所在的html
5. 显示级别：子页面的显示优先级永远高于父页面本身的dom的优先级。//上帝视角？

许多开发者在开发wap2app时，都提出了引导页如何制作的问题，其实wap2app的引导页和普通5+app的做法是一样的。
5+app的引导页制作。

具体实现

1.在client_index.html页面添加如下代码：

<script type="text/javascript">  
    if(window.plus){  
        plusReady()  
    }else{  
        document.addEventListener('plusready',plusReady,false)  
    }  
    function plusReady(){//这里是每次进入应用都会显示引导页，开发中要如何显示引导页视具体的情况而定。  
        var guide = plus.webview.create('guide/guide.html',"guide");  
        guide.show();  
    }  
</script>

2.在manifest.json->splash配置:启动选项改为手动关闭启动界面；
3.引导页guide.html:这个页面需要做到plusready后关闭splash,在引导结束后关闭引导页,开发时可使用mui的引导页看看效果。

注意：

1.由于采用了手动关闭splash的选项，所以如果进来的时候没有打开guide.html，那么需要在client_index.html里调用5+方法关闭splash；
2.在guide页面的back逻辑默认是wap2app的首页返回逻辑，即双击back退出应用，开发者可根据实际需求自己监听back，重写逻辑。

最开始使用H5+开发混合app 的时候，是没有webview和NativeObj概念的，甚至app启动加载顺序也不知道的，公司也没有老师可以请教，当时的确废了很多周章。

1、用户点击app图标>>

2、展示启动页（在app项目的mainfest.json中配置）（这个过程很短，根据手机性能不同而不同）>>

3、展示index.html，执行index里边的js。（启动完成）

因为：> 如果index的js比较复杂，或者加载的图片比较多，会出现比较长的空白；
所以要尽量减少index的内容。所以启动广告应运而生。//其实现在的手机性能都比较不错，启动广告存在的意义，也就是为了挣钱了。

http://ask.dcloud.net.cn/article/1330 这个是启动加速的，良心帖子

启动广告制作：

function plusReady(a){  
    if(window.plus){  
        a();  
    }else{  
        document.addEventListener('plusready', a, false);  
    }  
}  

plusReady(function(){  
plus.navigator.closeSplashscreen();//干掉启动页  

//声明  
    var view = new plus.nativeObj.View("Splashscreen", {  
                    top: 0,  
                    left: 0,  
                    bottom: 0,  
                    width: plus.screen.resolutionWidth,  
                    height: plus.screen.resolutionHeight  
                });  

//添加图片  
    if(plus.storage.getItem("SplashscreenSrc")){  
        view.drawBitmap(plus.storage.getItem("SplashscreenSrc"), {}, {}, "");                     
    }else{  
        view.drawBitmap("img/mmm.png", {}, {}, "");  
    }  

//显示  
view.show();  
setTimeout(function() {  
    if(view){  
        view.close();//干掉启动广告页  
    }  
}, 3000)  
})

2017.11.12立项做混合app，2017.12.20交给测试，毕竟前端开发只有自己一个人，踩了很多坑，立贴记录一下。

第一次轮播图：使用swiper插件。
//其实最开始的时候，是打算自己手写轮播图的，但是发现自己写的bug太多，就使用插件了

<!--HTML部分-->

<div class="swiper-container">  
      <div class="swiper-wrapper">  
             <!--图片-->  
                <div class='swiper-slide'>  
                <a href='#'>  
                    <img src=''/>  
                </a>  
            </div>  
      </div>  
      <div class="swiper-pagination"><!-- 分页器 --></div>  
</div>

<!--JS部分-->

function slideshow (dom){  
                //12.27，ajax是自己封装的，后来放弃了，使用mui.get  
        ajax({  
            //type:"get",  
            url:"http://192.000.0.155:8080/getSlideShow",  
            dataType:"json",  
            suc:function(data){  
                var show =[];  
                var list =  data.imglist;  
                for(var i =0; i < list.length; i++){  
                    var j =  "<div class='swiper-slide'><a href='"+list[i].url+"'><img src='"+ list[i].path  +"'/></a></div>"  
                    show.push(j);  
                }  
                dom.innerHTML = show.join("");  
                //开启轮播图  
                var mySwiper = new Swiper ('.swiper-container', {  
                    loop: true, //循环播放  
                    autoplay:true, //自动轮播  
                    disableOnInteraction:false, //使用户点击后继续播放  
                    pagination: {el:'.swiper-pagination'},  
                });  
            }  
        })  

    }  
slideshow(document.querySelector(".swiper-wrapper"));

第二次轮播图：使用MUI
//不是因为swiper做的不好，而是项目中很多地方使用了mui，不想引入过多的插件
//说实话，mui的轮播图和swiper相比，很差，毕竟swiper是专业的

mui的轮播图就不上代码了，臃肿，简单，在HBuilder中，按下ms选择到轮播图就好

第三次轮播图：使用MUI
还是使用了MUI做轮播图，图片轮播代码部分没有改变

因为主页想换成网易云音乐那样左右滑动操作，但是在手指滑动轮播图时，不能阻止事件上传，窗口webview随手指滑动。至今没有找到合适解决办法。
重新更改webvive排布方式，把轮播图当作一个独立的html添加到主页main中，分解ontouchmove监听目标。解决主页滑动与轮播图滑动混淆问题。

/*main.html中js部分代码  */  
self = plus.webview.currentWebview();  

sliderW = plus.webview.create( "slider.html", "slider.html", {top: "0",height:"200px",hardwareAccelerated:true});   
homeW   = plus.webview.create( "home.html", "home.html",{bottom: "50px",top: "200px"});   
newsW   = plus.webview.create( "news.html", "news.html",{bottom: "50px",top:"0",hardwareAccelerated:true});  
userW   = plus.webview.create( "user.html", "user.html",{bottom: "50px",top:"0"});  

self.append(sliderW)  
self.append(homeW)  
self.append(newsW)  
self.append(userW)  

sliderW.show();  
homeW.show();  

function move (webviewID,s,t){  
    /*  s="rtl" = left // "ltr" =right  
        t = followFinger=跟随  || bounce=反弹  
     *   
     * */  
        function get (d){  
            return plus.webview.getWebviewById(d);  
        }  
    get(webviewID).drag(  
        {direction:s,moveMode:t},  
        {},  
        function(e){  
            if(e.result){  
                if(t == "followFinger"){  
                    get(webviewID).back();                    
                }  
            }  
        }  
    )  
}  
moves(homeW   ,newsW,"rtl",function(){  
    news.classList.add("border");  
    home.classList.remove("border");  
})  
······//重复造轮子img。。。  
//之所以没有使用mui的窗口滑动，是因为当初没有找到mui的插件，当后来知道mui的滑动插件的时候，又发现mui兼容Android4.0之下的问题，所以也就没有改

第四次轮播图：使用plus.nativeObj.ImageSlider
在2017.12.11，plus新增了原生图片轮播控件（plus.nativeObj.ImageSlider）支持自动播放属性（autoplay/interval），
2017.12.13，经过老板同意，舍弃主页滑动功能，为了性能，改mui轮播图为plus.nativeObj.ImageSlider

function slideshow (id,top) {  //ajax获取网络图片  
    mui.getJSON(sg("host")+"app/getSlideShow",{userId:sg("userId")},function(data){  
        if(data.code ==0){  
            var li = data.imglist;  
            var imgs =[]; //图片  
            var imghref = []; //需要跳转的页面  
            for(var i=0; i<li.length;i++){  
                imghref.push(li[i].url);  
                var s = {src:sg("fileHost")+li[i].path,height:"100%",width:"100%"};  
                imgs.push(s);  
            }//声明轮播图  
            var slider = new plus.nativeObj.ImageSlider("slider", {  
                                top:top||"0px",left:"0px",  
                                height:"200px",width:"100%",position:"static",  
                                autoplay:true,  
                                fullscreen:false,  
                                loop:true,  
                                images:imgs,  
                        });   

            plus.webview.getWebviewById(id).append(slider);  
            slider.show();  
            slider.addEventListener("click",function(e){  
                var index = e.currentImageIndex; //轮播图索引  
                get("main.html").evalJS("openAd('"+imghref[index]+"')")  
            })  
        }  
    })  
}

第五次轮播图：使用MUI
三天后测试，发现plus.nativeObj.ImageSlider在自动轮播时候当滚动一定次数后，滚动会卡断，手动滑动也是失败，只能向反方向滑动。
无奈重新更换为mui的轮播图。

第六次轮播图：使用MUI
所谓的第六次更改，是想把轮播图的图片做缓存，在ajax发现图片没有更改的时候，使用缓存图片，减少http请求。
后来放弃了。因为发现手机会自动缓存，我要考虑的问题反而是怎么减少缓存。。。。。心好累。。。。

群组：418967623

DOME：插件地址

架构全新更新  
支持分布式事务，集群  
如有问题可可留言  
运行环境 windows  
可配置： wss  
QQ：139939967

自己摸索了一下，并参考其他人的代码，并修复了原来代码存在的问题，
问题1：字符串的getBytes函数，返回null【需要通过new的方式创建字符串】
问题2：初始化打印一次，之后无法使用【不要重复调用device.createInsecureRfcommSocketToServiceRecord(uuid)或重复引入CLASS】

代码如下，可正常运行【注意，蓝牙打印机必须先匹配，保证手机蓝牙打开】

    mui.plusReady(function() {  
                main = plus.android.runtimeMainActivity();  
                BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  
                UUID = plus.android.importClass("java.util.UUID");  
                uuid = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");//不需要更改  
                BAdapter = BluetoothAdapter.getDefaultAdapter();  
                BAdapter.cancelDiscovery(); //停止扫描  
                device = BAdapter.getRemoteDevice("DC:1D:30:25:19:23");//这里是蓝牙打印机的蓝牙地址  
                plus.android.importClass(device);  
                bluetoothSocket = device.createInsecureRfcommSocketToServiceRecord(uuid);  
                plus.android.importClass(bluetoothSocket);  
            });  

            function print() {  

                if(!bluetoothSocket.isConnected()) {  
                    console.log('断开了，需要重新连接,连接中');  
                    bluetoothSocket.connect();  
                }  

                if(bluetoothSocket.isConnected()) {  
                    console.log('连接成功');  
                    var outputStream = bluetoothSocket.getOutputStream();  
                    plus.android.importClass(outputStream);  
                    var s = plus.android.importClass('java.lang.String');  
                    var string = new s("测试数据"+new Date().getMilliseconds()+'\n\n\n\n');//必须以创建字符串对象的形式创建对象，否则返回NULL  
                    var bytes = string.getBytes('gbk');  
                    console.log(bytes);  
                    outputStream.write(bytes);  
                    outputStream.flush();  
                } else {  
                    console.log('fail');  
                }  

            }  

至于打印的内容和格式，请参考各自打印机提供的打印指令集，把它拼成字符串调用getBytes函数即可打印。

没有废话直接上代码

var Intent = plus.android.importClass("android.content.Intent");  
var intent = new Intent(Intent.ACTION_MAIN);  
intent.addCategory(Intent.CATEGORY_LAUNCHER);  
var ComponentName = plus.android.importClass("android.content.ComponentName");  
var comp = new ComponentName("com.tencent.mm","com.tencent.mm.ui.LauncherUI");  
intent.setComponent(comp);  
//只想唤起微信就不要下面这句传参代码  
intent.putExtra("LauncherUI.From.Scaner.Shortcut", true);  
intent.setAction("android.intent.action.VIEW");  
var main = plus.android.runtimeMainActivity();  
main.startActivity(intent);  

用得上就点个赞,仅此而已

可下载附件中工程进行打包测试，工程下载后解压到SDK的根目录下（与SDK里其他两个示例工程同级目录）

1 下载最新SDK http://ask.dcloud.net.cn/article/103

2 调试基座的工程名称和target名称应当为DCloud_Pandora
（也可以将编译生成的app的名称，修改为DCloud_Pandora.app, 修改后重新压缩成IPA文件，放到HBuilder指定目录下即可）

3 在Xcode工程的Info.plist文件中添加UIFileSharingEnabled键，并将键值设置为YES

4 修改control.xml文件
在control.xml文件的hbuilder节点下添加属性debug='true' 和syncDebug="false"

<?xml version="1.0"?>  
<hbuilder version="1.9.3.40219" debug="true" syncDebug="false">  
        <apps>  
                <app appid="HBuilder" appver="8.9.0"/>  
        </apps>  
</hbuilder>

5 配置第三方插件
第三方插件配置方法请参考文档
消息推送(Push)插件配置
分享(Share)插件配置
地图(Maps)插件配置
统计(Statistic)插件配置
支付(Payment)插件配置
登录鉴权(Oauth)插件配置

6 引入扩展插件
扩展插件编写和引入方法请参考文档iOS平台5+插件开发

7 自定义基座包使用方法请参考文档真机运行自定义基座包使用说明

8 用户自己创建工程时请参考文档iOS创建最精简离线打包工程，创建基础工程后在工程里添加libliblog.a

需求明确

开启常见的条码（二维码及一维码）的扫描识别功能，可调用设备的摄像头对条码图片扫描进行数据输入。通过plus.barcode可获取条码码管理对象。

知识点明确

Barcode模块:plus.barcode,提供开启摄像头扫描功能。
Gallery模块:plus.gallery，提供读取相册二维码图片功能。

效果展示

实现步骤

1. 创建条码扫描识别控件实例对象,涉及到Barcode模块,具体参数设置可参考5+ API Barcode
   在plusReady事件触发之后创建一个Barcode实例对象，此对象提供四个方法：
   start: 开始条码识别
   cancel: 结束条码识别
   close: 关闭条码识别控件
   setFlash: 是否开启闪光灯
   和两个事件：
   onmarked: 条码识别成功事件
   onerror: 条码识别错误事件

function plusReady() {  
    if(ws || !window.plus || !domready) {  
        return;  
    }  
    // 获取窗口对象  
    ws = plus.webview.currentWebview();  
    // 开始扫描  
    ws.addEventListener('show', function() {  
        scan = new plus.barcode.Barcode('bcid');  
        // 定义识别成功事件  
        scan.onmarked = onmarked;  
        // 定义开始条码识别  
        scan.start({  
            conserve: true, // 是否保存成功扫描到的条码数据时的截图  
            filename: '_doc/barcode/'  // 保存成功扫描到的条码数据时的图片路径  
        });  
    }, false);  
    // 显示页面并关闭等待框  
    ws.show('pop-in');  
}  

// 二维码扫描成功  
function onmarked(type, result, file) {  
    switch(type) {  
        case plus.barcode.QR:  
            type = 'QR';  
            break;  
        case plus.barcode.EAN13:  
            type = 'EAN13';  
            break;  
        case plus.barcode.EAN8:  
            type = 'EAN8';  
            break;  
        default:  
            type = '其它' + type;  
            break;  
    }  
    result = result.replace(/\n/g, '');  
    plus.nativeUI.alert('扫描结果:' + JSON.stringify(result), function() {  
        console.log('扫描成功')  
    }, "helloW2A", "OK");  
    back();  
}

2.从相册中选择图片识别,涉及到Gallery模块，具体参数设置可参考5+ API：Gallery

// 从相册中选择二维码图片   
function scanPicture() {  
    plus.gallery.pick(function(path) {  
        plus.barcode.scan(path, onmarked, function(error) {  
            plus.nativeUI.alert('无法识别此图片');  
        });  
    }, function(err) {  
        console.log('Failed: ' + err.message);  
    });  
}  

3.DOM结构参考

<body style="background-color: #000000;">  
    <!--指定Barcode对象的在界面中关联div标签的id号。-->  
    <div id="bcid">  
        <div style="height:40%"></div>  
        <p class="tip">...载入中...</p>  
    </div>  
    <footer>  
        <div class="fbt" onclick="back()">取　 消</div> <!--退出页面-->  
        <div class="fbt" onclick="scanPicture()">从相册选择二维码</div>  
    </footer>  
</body>

示例工程已上传，供开发者参考

原文链接：
iOS中5+SDK项目升级个推静态库.a为.framework
说明
上篇写了升级5+SDK的文章:
iOS离线打包项目升级5+SDK

本文属于上文补充，因为要适配iPhone X，原谅我穷买不起真机，只能用模拟机调试，在调试过程中发现一个个推致命的bug：

malloc: error for object 0x170242490: Invalid pointer dequeued from free list set a breakpoint in malloc_error_break to debug
1
查资料后发现，是个推在模拟器上运行的产生的错误，我使用的是1.6.3-SDK。他们已经在最新SDK中修改了这个错误。

问题：个推静态库文件导致模拟机崩溃
解决办法：升级个推静态库文件为最新
新问题：
个推老版本使用的都是.a格式的静态库文件，而从官网下载下来的最新SDK使用的是.framework格式。如何平滑替换？

开工
（1）备份项目（这是我开始大改动必须的工作）

（2）删除5+SDK中Feature-iOS中指定的静态库文件
liblibPush.a
libGeTuiPush.a
libGeTuiSdk.a
libGtExtensionSdk

（3）将最新SDK中相应库文件复制到.a文件相应的位置，方便管理。我使用的文件如下图：
选择noidfa文件
引入后在项目中Build Phase -> Link Binary With Libraries引入framework库到项目中

（4）添加系统依赖库
根据个推官网添加系统依赖库，如图所示：
添加系统依赖库

（5）5+SDK中LinkerFlags不变

（6）删除原项目中GeTuiSdk.h文件，导入头文件：

import <GTSDK/GeTuiSdk.h>

1
（7）将插件部分用到的方法名更换为最新即可

• (void) bindAlias:(PGMethod )cmds {
  NSString alias = [cmds.arguments objectAtIndex:1];
  [GeTuiSdk bindAlias:alias andSequenceNum:@"seq-1"];
  }

• (void) unbindAlias:(PGMethod )cmds {
  NSString alias = [cmds.arguments objectAtIndex:1];
  [GeTuiSdk clearAllNotificationForNotificationBar];
  [GeTuiSdk unbindAlias:alias andSequenceNum:@"seq-1" andIsSelf:YES];
  }

本人主要是用mui编写移动应用，还可以用java写后台接口，同时还可以做页面，有需要的同志，联系我，谢谢。QQ:1094836761

.

说明

我是七牛的忠实拥趸。
个人网站、公司项目，文件和图片的存储方案使用的都是七牛。
这两天在封装 DC 的七牛图片上传，遇到了点问题，不过最后还是解决了。
这里只分享下简单的思路和代码。
.

开发思路

1. 生成七牛上传令牌
   因为有安全隐患，七牛官方推荐开发者向自己的业务服务器发送 ajax 进行获取。
   我在贴出的代码中略过了这一步，你们自己处理。
   .
2. 选取图片
   使用摄像头（plus.camera）或者相册（plus.gallery）都可以。
   .
3. 上传图片
   最主要就是设置 “令牌”、“图片名称” 等参数。
   不过需要的注意就是添加文件（addFile）后面一定要加 {"key":"file"}，这是固定值，不要改，别问我为什么。

.

// 从相册获取图片  
plus.gallery.pick(function(ret){  

    // 获取图片名称  
    var path = ret;  
    var file = ret.substr(ret.lastIndexOf("/")+1);  
    var token = "xxxxxxx";    // 填写你的七牛上传令牌  

    // 上传图片  
    var url = "http://upload.qiniu.com/";  
    var uploader = plus.uploader.createUpload(url,{},function(up,state){  
        if( state==200 )  
            Console("上传成功");  
        else  
            Console("上传失败 - ",state);  
    });  

    uploader.addData("key",file);  
    uploader.addData("token",token);  
    uploader.addFile(path,{"key":"file"});      // 固定值，千万不要改！！！！！！  
    uploader.start();  

});