文章 - DCloud问答

记录下载图片到本地后保存到相册

相册

// 保存图片到相册中
function savePicture() {
// 创建下载任务
picurl="http://192.168.1.106/Uploads/pictures/1/1454052530951.jpg";
picname="_downloads/1454052530951.jpg";
var dtask = plus.downloader.createDownload(picurl, {}, function ( d, status ) {
// 下载完成
if ( status == 200 ) {
alert( "Download success: " + d.filename );
plus.gallery.save(picname,function() {
mui.toast('保存成功');
}, function() {
mui.toast('保存失败，请重试！');
});
} else {
alert( "Download failed: " + status );
}
});
//dtask.addEventListener( "statechanged", onStateChanged, false );
dtask.start();

}

继续阅读 »

推送透传消息不符合格式的消息没有触发receive

推送

机型红米node3

牢骚天书一样阅读DCloud文档并顺便提小建议

文档

我是小白菜鸟一名，所以对文档需求很是强烈的。
但是阅读来去，云里雾里的。
总结一下：1、文档要不是写给资深猿读的；2、要不就是高级猿写的文档。

我想，文档不是应该写给小白读的吗？
因为资深猿本来码的能力就够了，也深入了解原理，从另外的框架到DCLOUD或者学习新框架，因为很容易入手，也不用深入阅读文档了，那做文档来做什么？
所以文档本就是面向小白的，给老司机写文档也是表示表示诚意。
所以，如果文档不能写给小白看，那是得力不讨好的事情。

而且，最重要的是：好的文档才能更好的普及DCloud。

例如：5+SDK的文档：我们可以先不介绍5+SDK是什么，但是怎么使用？
一般SDK是放在项目一个文件夹里，然后使用接口调用，但是5+SDK的文档里没有。也许老司机明白，但是小白不懂啊。使用逻辑在哪里？
在后面“APP教程”文档说，HBuilder内置了，所以直接可以使用，但是5+SDK不就是给已有项目使用的吗？那么在一个项目里，5+SDK放在哪里？怎么放，怎么拿接口？怎么集成？怎么配置？——这些文档里面都有，但是文档编写的逻辑实在是好深好深啊——到底是先做什么？然后做什么？

我阅读了5+SDK文档还不是很明白，基于我的基础知识很是薄弱，真正小白一名，但是我尝试一下重新整理一下文档的逻辑结构，请老司机看看是否对不对。不过，有一个更重要的是：逻辑结构相对文档撰写来说，文档撰写要求更高，需要十分了解内在——对于这个我无能为力举例。
1、HTML5+SDK是什么？——只需要介绍是什么，暂时不介绍用途与目标之类。
（1）、介绍SDK
（2）、HTML5+SDK怎么来的？里面包含什么？——可以连接到HTML5+规范
（3）、SDK怎么在开发项目里起作用？简单说明集成原理。
（4）、SDK怎么在APP完成品里起作用？简单说明打包原理，SDK怎么打包在APP里。
2、怎样集成HTML5+SDK？
（1）、什么是WebView集成？什么是Widget集成？什么是独立应用方式集成？集成的实现原理与逻辑是什么？
（2）、Android平台5+SDK集成——需要更为小白逻辑的文档撰写
（3）、iOS平台5+SDK集成——需要更为小白逻辑的文档撰写
3、怎样使用HTML5+SDK？
举一些通用的例子在项目里使用SDK
4、打包（读不懂所以只能复制了）
（1）、IOS平台配置方法——需要更为小白逻辑的文档撰写
（2）、Android平台配置方法——需要更为小白逻辑的文档撰写

或者本身是小白菜鸟，尝试以小白菜鸟的方式来理解文档，但是还是很难懂，所以发一下牢骚，也是希望官方能出更小白的文档，正如以上的原因：
1、小白文档更使DCLOUD得到普及；
2、老司机不需求太多文档，小白才要，如果文档要老司机才能读懂，那文档需求不大了，低不下高不就吧。

继续阅读 »

我是小白菜鸟一名，所以对文档需求很是强烈的。
但是阅读来去，云里雾里的。
总结一下：1、文档要不是写给资深猿读的；2、要不就是高级猿写的文档。

我想，文档不是应该写给小白读的吗？
因为资深猿本来码的能力就够了，也深入了解原理，从另外的框架到DCLOUD或者学习新框架，因为很容易入手，也不用深入阅读文档了，那做文档来做什么？
所以文档本就是面向小白的，给老司机写文档也是表示表示诚意。
所以，如果文档不能写给小白看，那是得力不讨好的事情。

而且，最重要的是：好的文档才能更好的普及DCloud。

例如：5+SDK的文档：我们可以先不介绍5+SDK是什么，但是怎么使用？
一般SDK是放在项目一个文件夹里，然后使用接口调用，但是5+SDK的文档里没有。也许老司机明白，但是小白不懂啊。使用逻辑在哪里？
在后面“APP教程”文档说，HBuilder内置了，所以直接可以使用，但是5+SDK不就是给已有项目使用的吗？那么在一个项目里，5+SDK放在哪里？怎么放，怎么拿接口？怎么集成？怎么配置？——这些文档里面都有，但是文档编写的逻辑实在是好深好深啊——到底是先做什么？然后做什么？

我阅读了5+SDK文档还不是很明白，基于我的基础知识很是薄弱，真正小白一名，但是我尝试一下重新整理一下文档的逻辑结构，请老司机看看是否对不对。不过，有一个更重要的是：逻辑结构相对文档撰写来说，文档撰写要求更高，需要十分了解内在——对于这个我无能为力举例。
1、HTML5+SDK是什么？——只需要介绍是什么，暂时不介绍用途与目标之类。
（1）、介绍SDK
（2）、HTML5+SDK怎么来的？里面包含什么？——可以连接到HTML5+规范
（3）、SDK怎么在开发项目里起作用？简单说明集成原理。
（4）、SDK怎么在APP完成品里起作用？简单说明打包原理，SDK怎么打包在APP里。
2、怎样集成HTML5+SDK？
（1）、什么是WebView集成？什么是Widget集成？什么是独立应用方式集成？集成的实现原理与逻辑是什么？
（2）、Android平台5+SDK集成——需要更为小白逻辑的文档撰写
（3）、iOS平台5+SDK集成——需要更为小白逻辑的文档撰写
3、怎样使用HTML5+SDK？
举一些通用的例子在项目里使用SDK
4、打包（读不懂所以只能复制了）
（1）、IOS平台配置方法——需要更为小白逻辑的文档撰写
（2）、Android平台配置方法——需要更为小白逻辑的文档撰写

或者本身是小白菜鸟，尝试以小白菜鸟的方式来理解文档，但是还是很难懂，所以发一下牢骚，也是希望官方能出更小白的文档，正如以上的原因：
1、小白文档更使DCLOUD得到普及；
2、老司机不需求太多文档，小白才要，如果文档要老司机才能读懂，那文档需求不大了，低不下高不就吧。

收起阅读 »

mui初级入门教程（一）— 菜鸟入手mui的学习路线

HTML5+ mui

从今天开始准备从零开始写一个关于mui的系列教程，欢迎各位拍砖，如果对dcloud这边的产品依然懵逼的同学不妨看看我下面这篇文章，由于是入门级别的首篇，没有任何代码，完全是大白话。
mui初级入门教程（一）— 菜鸟入手mui的学习路线

继续阅读 »

安卓Native.js蓝牙连接票据打印机完整代码已测试修改

源码 Native.JS

测试机：佳博PT-280便携打印机
手机：华为低端
功能：扫描周围蓝牙设备加入列表，点击未配对设备，自动配对设备，点击已配对设备，进行打印测试
先上html

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  

        <title></title>  

        <script src="js/pr.js"></script>  
    </head>  

    <body>  

        <p><input id="bt1" type="button" value="搜索设备" onclick="searchDevices('a')"></p>  

               </button>  

        </div>  

        <div>  
            未配对蓝牙设备  
            <ul id="list1">  

            </ul>  
        </div>  

        <div>  
            已配对蓝牙设备  

            <ul id="list2">  

            </ul>  
        </div>  

    </body>  

</html>

下面是js文件

//address=""搜索蓝牙//address=设备mac地址，自动配对给出mac地址的设备  
function searchDevices(address) {  
    //注册类  
    var main = plus.android.runtimeMainActivity();  
    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
    var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  
    var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");  
    var BAdapter = BluetoothAdapter.getDefaultAdapter();  
    console.log("开始搜索设备");  
    var filter = new IntentFilter();  
    var bdevice = new BluetoothDevice();  
    var on = null;  
    var un = null;  
    var vlist1 = document.getElementById('list1'); //注册容器用来显示未配对设备  
    vlist1.innerHTML = ''; //清空容器  
    var vlist2 = document.getElementById('list2'); //注册容器用来显示未配对设备  
    vlist2.innerHTML = ''; //清空容器  
    var button1 = document.getElementById('bt1');  
    button1.disabled=true;  
    button1.value='正在搜索请稍候';  
    BAdapter.startDiscovery(); //开启搜索  
    var receiver;  
    receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {  
        onReceive: function(context, intent) { //实现onReceiver回调函数  
            plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作  
            console.log(intent.getAction()); //获取action  
            if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED"){  
                main.unregisterReceiver(receiver);//取消监听  
                button1.disabled=false;  
                button1.value='搜索设备';  
                console.log("搜索结束")  
            }else{  
            BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);  
            //判断是否配对  
            if (BleDevice.getBondState() == bdevice.BOND_NONE) {  
                console.log("未配对蓝牙设备：" + BleDevice.getName() + '    ' + BleDevice.getAddress());  
                //参数如果跟取得的mac地址一样就配对  
                if (address == BleDevice.getAddress()) {  
                    if (BleDevice.createBond()) { //配对命令.createBond()  
                        console.log("配对成功");  
                        var li2 = document.createElement('li'); //注册  
                        li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址  
                        li2.setAttribute('onclick', 'print(id)'); //注册click点击列表进行打印  
                        li2.innerText = BleDevice.getName();  
                        vlist2.appendChild(li2);  
                    }  

                } else {  
                    if(BleDevice.getName() != on ){ //判断防止重复添加  
                    var li1 = document.createElement('li'); //注册  
                    li1.setAttribute('id', BleDevice.getAddress()); //打印机mac地址  
                    li1.setAttribute('onclick', 'searchDevices(id)'); //注册click点击列表进行配对  
                    on = BleDevice.getName();  
                    li1.innerText = on;  
                    vlist1.appendChild(li1);  

                    }  

                }  
            } else {  
                if(BleDevice.getName() != un ){ //判断防止重复添加  
                console.log("已配对蓝牙设备：" + BleDevice.getName() + '    ' + BleDevice.getAddress());  
                var li2 = document.createElement('li'); //注册  
                li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址  
                li2.setAttribute('onclick', 'print(id)'); //注册click点击列表进行打印  
                un = BleDevice.getName();                 
                li2.innerText = un;  
                vlist2.appendChild(li2);}  
            }}  

        }  
    });  

    filter.addAction(bdevice.ACTION_FOUND);  
    filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);  
    filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);  
    filter.addAction(BAdapter.ACTION_STATE_CHANGED);  

    main.registerReceiver(receiver, filter); //注册监听  
}  

var device = null,  
    BAdapter = null,  
    BluetoothAdapter = null,  
    uuid = null,  
    main = null,  
    bluetoothSocket = null;  

function print(mac_address) {  
    if (!mac_address) {  
        mui.toast('请选择蓝牙打印机');  
        return;  
    }  

    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();  
    device = BAdapter.getRemoteDevice(mac_address);  
    plus.android.importClass(device);  
    bluetoothSocket = device.createInsecureRfcommSocketToServiceRecord(uuid);  
    plus.android.importClass(bluetoothSocket);  

    if (!bluetoothSocket.isConnected()) {  
        console.log('检测到设备未连接，尝试连接....');  
        bluetoothSocket.connect();  
    }  

    console.log('设备已连接');  

    if (bluetoothSocket.isConnected()) {  
        var outputStream = bluetoothSocket.getOutputStream();  
        plus.android.importClass(outputStream);  
        var string = "打印测试\r\n";  
        var bytes = plus.android.invoke(string, 'getBytes', 'gbk');  
        outputStream.write(bytes);  
        outputStream.flush();  
        device = null //这里关键  
        bluetoothSocket.close(); //必须关闭蓝牙连接否则意外断开的话打印错误  

    }  

}

继续阅读 »

测试机：佳博PT-280便携打印机
手机：华为低端
功能：扫描周围蓝牙设备加入列表，点击未配对设备，自动配对设备，点击已配对设备，进行打印测试
先上html

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  

        <title></title>  

        <script src="js/pr.js"></script>  
    </head>  

    <body>  

        <p><input id="bt1" type="button" value="搜索设备" onclick="searchDevices('a')"></p>  

               </button>  

        </div>  

        <div>  
            未配对蓝牙设备  
            <ul id="list1">  

            </ul>  
        </div>  

        <div>  
            已配对蓝牙设备  

            <ul id="list2">  

            </ul>  
        </div>  

    </body>  

</html>

下面是js文件

//address=""搜索蓝牙//address=设备mac地址，自动配对给出mac地址的设备  
function searchDevices(address) {  
    //注册类  
    var main = plus.android.runtimeMainActivity();  
    var IntentFilter = plus.android.importClass('android.content.IntentFilter');  
    var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");  
    var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");  
    var BAdapter = BluetoothAdapter.getDefaultAdapter();  
    console.log("开始搜索设备");  
    var filter = new IntentFilter();  
    var bdevice = new BluetoothDevice();  
    var on = null;  
    var un = null;  
    var vlist1 = document.getElementById('list1'); //注册容器用来显示未配对设备  
    vlist1.innerHTML = ''; //清空容器  
    var vlist2 = document.getElementById('list2'); //注册容器用来显示未配对设备  
    vlist2.innerHTML = ''; //清空容器  
    var button1 = document.getElementById('bt1');  
    button1.disabled=true;  
    button1.value='正在搜索请稍候';  
    BAdapter.startDiscovery(); //开启搜索  
    var receiver;  
    receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {  
        onReceive: function(context, intent) { //实现onReceiver回调函数  
            plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作  
            console.log(intent.getAction()); //获取action  
            if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED"){  
                main.unregisterReceiver(receiver);//取消监听  
                button1.disabled=false;  
                button1.value='搜索设备';  
                console.log("搜索结束")  
            }else{  
            BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);  
            //判断是否配对  
            if (BleDevice.getBondState() == bdevice.BOND_NONE) {  
                console.log("未配对蓝牙设备：" + BleDevice.getName() + '    ' + BleDevice.getAddress());  
                //参数如果跟取得的mac地址一样就配对  
                if (address == BleDevice.getAddress()) {  
                    if (BleDevice.createBond()) { //配对命令.createBond()  
                        console.log("配对成功");  
                        var li2 = document.createElement('li'); //注册  
                        li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址  
                        li2.setAttribute('onclick', 'print(id)'); //注册click点击列表进行打印  
                        li2.innerText = BleDevice.getName();  
                        vlist2.appendChild(li2);  
                    }  

                } else {  
                    if(BleDevice.getName() != on ){ //判断防止重复添加  
                    var li1 = document.createElement('li'); //注册  
                    li1.setAttribute('id', BleDevice.getAddress()); //打印机mac地址  
                    li1.setAttribute('onclick', 'searchDevices(id)'); //注册click点击列表进行配对  
                    on = BleDevice.getName();  
                    li1.innerText = on;  
                    vlist1.appendChild(li1);  

                    }  

                }  
            } else {  
                if(BleDevice.getName() != un ){ //判断防止重复添加  
                console.log("已配对蓝牙设备：" + BleDevice.getName() + '    ' + BleDevice.getAddress());  
                var li2 = document.createElement('li'); //注册  
                li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址  
                li2.setAttribute('onclick', 'print(id)'); //注册click点击列表进行打印  
                un = BleDevice.getName();                 
                li2.innerText = un;  
                vlist2.appendChild(li2);}  
            }}  

        }  
    });  

    filter.addAction(bdevice.ACTION_FOUND);  
    filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);  
    filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);  
    filter.addAction(BAdapter.ACTION_STATE_CHANGED);  

    main.registerReceiver(receiver, filter); //注册监听  
}  

var device = null,  
    BAdapter = null,  
    BluetoothAdapter = null,  
    uuid = null,  
    main = null,  
    bluetoothSocket = null;  

function print(mac_address) {  
    if (!mac_address) {  
        mui.toast('请选择蓝牙打印机');  
        return;  
    }  

    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();  
    device = BAdapter.getRemoteDevice(mac_address);  
    plus.android.importClass(device);  
    bluetoothSocket = device.createInsecureRfcommSocketToServiceRecord(uuid);  
    plus.android.importClass(bluetoothSocket);  

    if (!bluetoothSocket.isConnected()) {  
        console.log('检测到设备未连接，尝试连接....');  
        bluetoothSocket.connect();  
    }  

    console.log('设备已连接');  

    if (bluetoothSocket.isConnected()) {  
        var outputStream = bluetoothSocket.getOutputStream();  
        plus.android.importClass(outputStream);  
        var string = "打印测试\r\n";  
        var bytes = plus.android.invoke(string, 'getBytes', 'gbk');  
        outputStream.write(bytes);  
        outputStream.flush();  
        device = null //这里关键  
        bluetoothSocket.close(); //必须关闭蓝牙连接否则意外断开的话打印错误  

    }  

}

收起阅读 »

push进程在小米红米机型下, 应用退出后没有保留

小米, 红米 note2 收不到离线消息

而htc可以收到离线消息

经过测试分析, 怀疑收不到离线消息的机器在应用退出后 push 和 notify 服务没有保留

还请官方测试一下

关于微信分享的实践与问题汇总，比较适合小白~

HTML5+ 分享分享链接

需求是要向微信朋友圈或者微信好友发送带【缩略图】【标题】【介绍性文字】【链接】的分享，也就是H5+的demo里面share.html里的链接分享

其实我自己也是第一次做这种需求，第一次不知道什么原因，分享出去的总是只有介绍性文字，而没有链接跟缩略图。后来经过请教官方群里的朋友以及自己的琢磨，成功实现了该需求，而且是运用非常小白的方式，下面做一个简单的总结：

1、把官方H5+的demo里的share.html直接copy到自己项目文件中，把对应引入文件的路径修改正确。

2、如果不想或者不会删减share.html里面跟【链接分享】无关的代码，就直接把原有的HTML代码display:none就可以了，这样，部分js不会因为找不到对应的DOM元素而报错（当然这个方法不推荐，只是给新手做参考），比如

        <div id="dcontent" class="dcontent" style="display: none;">

3、接下来就是在share.html页面内部的js中找到shareAction(sb, bh)函数，把控制【缩略图】【标题】【介绍性文字】【链接】的地方赋值为我们自己的内容即可。（在下面的代码的被**包起来的那几行）

            function shareAction(sb, bh) {  
                outSet("分享操作：");  
                if (!sb || !sb.s) {  
                    outLine("无效的分享服务！");  
                    return;  
                }  
                var msg = {  
                    **content: sharecontent.value**,  
                    extra: {  
                        scene: sb.x  
                    }  
                };  
                if (bh) {  
                    **msg.href = sharehref.value;**  
                    if (sharehrefTitle && sharehrefTitle.value != "") {  
                        msg.title = sharehrefTitle.value;  
                    }  
                    if (sharehrefDes && sharehrefDes.value != "") {  
                        msg.content = sharehrefDes.value;  
                    }  
//                  msg.thumbs = ["_www/logo.png"];  
                    **msg.thumbs = [document.getElementById('pic').src];**  
//                  _www/logo.png  
                    msg.pictures = ["_www/logo.png"];  
                } else {  
                    if (pic && pic.realUrl) {  
                        msg.pictures = [pic.realUrl];  
                    }  
                }  
                // 发送分享  
                if (sb.s.authenticated) {  
                    outLine("---已授权---");  
                    shareMessage(msg, sb.s);  
                } else {  
                    outLine("---未授权---");  
                    sb.s.authorize(function() {  
                        shareMessage(msg, sb.s);  
                    }, function(e) {  
                        outLine("认证授权失败：" + e.code + " - " + e.message);  
                    });  
                }  
            }

4、下面是我给以上函数赋值自己新的内容的代码。

mui("#spread-cont").on("tap","li",function(){  
                        var Href=document.getElementById('sharehref');  
                        var Title=document.getElementById('sharehrefTitle');  
                        var Des=document.getElementById('sharehrefDes');  
                        var shareCont=document.getElementById('sharecontent');  
                        var sharePic=document.getElementById('pic');  

                        Href.value=data[this.getAttribute("data-id")].Url;  
                        Title.value=data[this.getAttribute("data-id")].RwName;  
                        Des.value=data[this.getAttribute("data-id")].Content;  
                        shareCont.value=data[this.getAttribute("data-id")].Content;  
                        sharePic.src=data[this.getAttribute("data-id")].Rwtp;  
                        shareHref();  
                    });

5、里面的data[this.getAttribute("data-id")]，是我通过ajax获取到的json数据，在该json数据里取出来我自己的【缩略图】【标题】【介绍性文字】【链接】，并进行赋值操作。

6、哈哈，上面的方法非常小白，好怕被大神看到啊~

继续阅读 »

需求是要向微信朋友圈或者微信好友发送带【缩略图】【标题】【介绍性文字】【链接】的分享，也就是H5+的demo里面share.html里的链接分享

其实我自己也是第一次做这种需求，第一次不知道什么原因，分享出去的总是只有介绍性文字，而没有链接跟缩略图。后来经过请教官方群里的朋友以及自己的琢磨，成功实现了该需求，而且是运用非常小白的方式，下面做一个简单的总结：

1、把官方H5+的demo里的share.html直接copy到自己项目文件中，把对应引入文件的路径修改正确。

2、如果不想或者不会删减share.html里面跟【链接分享】无关的代码，就直接把原有的HTML代码display:none就可以了，这样，部分js不会因为找不到对应的DOM元素而报错（当然这个方法不推荐，只是给新手做参考），比如

        <div id="dcontent" class="dcontent" style="display: none;">

3、接下来就是在share.html页面内部的js中找到shareAction(sb, bh)函数，把控制【缩略图】【标题】【介绍性文字】【链接】的地方赋值为我们自己的内容即可。（在下面的代码的被**包起来的那几行）

            function shareAction(sb, bh) {  
                outSet("分享操作：");  
                if (!sb || !sb.s) {  
                    outLine("无效的分享服务！");  
                    return;  
                }  
                var msg = {  
                    **content: sharecontent.value**,  
                    extra: {  
                        scene: sb.x  
                    }  
                };  
                if (bh) {  
                    **msg.href = sharehref.value;**  
                    if (sharehrefTitle && sharehrefTitle.value != "") {  
                        msg.title = sharehrefTitle.value;  
                    }  
                    if (sharehrefDes && sharehrefDes.value != "") {  
                        msg.content = sharehrefDes.value;  
                    }  
//                  msg.thumbs = ["_www/logo.png"];  
                    **msg.thumbs = [document.getElementById('pic').src];**  
//                  _www/logo.png  
                    msg.pictures = ["_www/logo.png"];  
                } else {  
                    if (pic && pic.realUrl) {  
                        msg.pictures = [pic.realUrl];  
                    }  
                }  
                // 发送分享  
                if (sb.s.authenticated) {  
                    outLine("---已授权---");  
                    shareMessage(msg, sb.s);  
                } else {  
                    outLine("---未授权---");  
                    sb.s.authorize(function() {  
                        shareMessage(msg, sb.s);  
                    }, function(e) {  
                        outLine("认证授权失败：" + e.code + " - " + e.message);  
                    });  
                }  
            }

4、下面是我给以上函数赋值自己新的内容的代码。

mui("#spread-cont").on("tap","li",function(){  
                        var Href=document.getElementById('sharehref');  
                        var Title=document.getElementById('sharehrefTitle');  
                        var Des=document.getElementById('sharehrefDes');  
                        var shareCont=document.getElementById('sharecontent');  
                        var sharePic=document.getElementById('pic');  

                        Href.value=data[this.getAttribute("data-id")].Url;  
                        Title.value=data[this.getAttribute("data-id")].RwName;  
                        Des.value=data[this.getAttribute("data-id")].Content;  
                        shareCont.value=data[this.getAttribute("data-id")].Content;  
                        sharePic.src=data[this.getAttribute("data-id")].Rwtp;  
                        shareHref();  
                    });

5、里面的data[this.getAttribute("data-id")]，是我通过ajax获取到的json数据，在该json数据里取出来我自己的【缩略图】【标题】【介绍性文字】【链接】，并进行赋值操作。

6、哈哈，上面的方法非常小白，好怕被大神看到啊~

收起阅读 »

给DCloud产品的个人建议

背景：我懂原生懂Html，Css,Js 三周前了解到了Hbuilder
我的需求像支付宝一样的开发（原生+ html5）支付宝APP中有不少应用如：彩票功能，外卖，滴滴等尤其是那个外卖就是一个单独的webapp
我也想在自己原生APP中嵌入各个完全不同的webapp，能点击原生控件进入webapp

因为此需求我好好了解了下Hbuilder 确实有些模糊花了两个周我加了所有和Builder的群去每个群里下载了所有的demo 研究后才看懂整个开发流程

因此有些建议想说说：

1 网站顶部导航增加新手教程如何一步步从无到有地开发言简意赅地描述哪种情景能做什么事情？
2 网站问答感觉可以再细分问题找相似疑问都不好找哦感觉论坛更适合开发者论坛分类整理和搜集有demo的帖子
3 整个DC的产品我觉得可以分为三类一类是：纯Html5 也就是Runtime环境开发一类是：原生+webapp开发（也就是widget开发）一类是：webview开发应该明确告知新手以便引导学习方向学习是有时间成本的
4 网站应该将新手分为几类人群新手也是有类型可分的比如我：我懂原生开发有2年工作经验但是为什么我也是新手呢因为我才了解Hbuilder开发不懂这个东西就得学习网站应该将新手分为掌握的技能类型比如：仅懂原生的新手、懂原生且懂Html5 css js的新手、仅懂Html5 css js的新手、啥都不懂的新手这四类分别引导进入不同教程
5 Dc产品未覆盖我的需求这样的效果建议增加比如我想实现的效果是跟支付宝打开 “外卖” 这个功能按钮的图标后是从原生webview打开的打开后是一个webapp应用 DC产品未实现这样的方式 DC产品应该是打开后还有引导页且进度条是一个加载项但我想给客户的感觉就像网页一样打开也就是想实现的是原生webview打开widget这个webapp的效果有进度条就算不通过webview打开按照DC产品的widget打开也可否增加一个类似这样效果的没有引导页的效果综上所述也就是没有在原生APP中像支付宝这样过渡到webapp的效果是否应该增加一个混合开发模式现在大部分都是混合开发的
6 新手可能会问怎么在plus中增加mui框架怎么在mui框架中调用plus 官方应该给予这个问题明确答案我想新手都可能会问这个问题因为Hbuilder中的两个demo感觉就像独立的怎么整合到一块

感觉DC产品挺好的这就是我使用过程中的疑问我相信会有不少新手跟我一样有此疑问和建议

继续阅读 »

背景：我懂原生懂Html，Css,Js 三周前了解到了Hbuilder
我的需求像支付宝一样的开发（原生+ html5）支付宝APP中有不少应用如：彩票功能，外卖，滴滴等尤其是那个外卖就是一个单独的webapp
我也想在自己原生APP中嵌入各个完全不同的webapp，能点击原生控件进入webapp

因为此需求我好好了解了下Hbuilder 确实有些模糊花了两个周我加了所有和Builder的群去每个群里下载了所有的demo 研究后才看懂整个开发流程

因此有些建议想说说：

1 网站顶部导航增加新手教程如何一步步从无到有地开发言简意赅地描述哪种情景能做什么事情？
2 网站问答感觉可以再细分问题找相似疑问都不好找哦感觉论坛更适合开发者论坛分类整理和搜集有demo的帖子
3 整个DC的产品我觉得可以分为三类一类是：纯Html5 也就是Runtime环境开发一类是：原生+webapp开发（也就是widget开发）一类是：webview开发应该明确告知新手以便引导学习方向学习是有时间成本的
4 网站应该将新手分为几类人群新手也是有类型可分的比如我：我懂原生开发有2年工作经验但是为什么我也是新手呢因为我才了解Hbuilder开发不懂这个东西就得学习网站应该将新手分为掌握的技能类型比如：仅懂原生的新手、懂原生且懂Html5 css js的新手、仅懂Html5 css js的新手、啥都不懂的新手这四类分别引导进入不同教程
5 Dc产品未覆盖我的需求这样的效果建议增加比如我想实现的效果是跟支付宝打开 “外卖” 这个功能按钮的图标后是从原生webview打开的打开后是一个webapp应用 DC产品未实现这样的方式 DC产品应该是打开后还有引导页且进度条是一个加载项但我想给客户的感觉就像网页一样打开也就是想实现的是原生webview打开widget这个webapp的效果有进度条就算不通过webview打开按照DC产品的widget打开也可否增加一个类似这样效果的没有引导页的效果综上所述也就是没有在原生APP中像支付宝这样过渡到webapp的效果是否应该增加一个混合开发模式现在大部分都是混合开发的
6 新手可能会问怎么在plus中增加mui框架怎么在mui框架中调用plus 官方应该给予这个问题明确答案我想新手都可能会问这个问题因为Hbuilder中的两个demo感觉就像独立的怎么整合到一块

感觉DC产品挺好的这就是我使用过程中的疑问我相信会有不少新手跟我一样有此疑问和建议

收起阅读 »

mui 能不能内置一个图片相册浏览功能？

mui

类似微信这样的，这个功能应该挺普遍的吧。

判断网络是否连接

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title>hello world</title>  
    <script type="text/javascript" src="js/mui.min.js"></script>  
</head>  
<body>  
<script type="text/javascript" charset="utf-8">  
mui.plusReady(function() {  
    document.addEventListener("netchange", wainshow, false);  
});  

function wainshow() {  
    if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {  
        mui.toast("网络异常，请检查网络设置！");  

    } else {  
        mui.toast("网络正常");  
    }  
}  
</script>  
<div onclick="wainshow();">111111</div>  
</body>  
</html>

继续阅读 »

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title>hello world</title>  
    <script type="text/javascript" src="js/mui.min.js"></script>  
</head>  
<body>  
<script type="text/javascript" charset="utf-8">  
mui.plusReady(function() {  
    document.addEventListener("netchange", wainshow, false);  
});  

function wainshow() {  
    if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {  
        mui.toast("网络异常，请检查网络设置！");  

    } else {  
        mui.toast("网络正常");  
    }  
}  
</script>  
<div onclick="wainshow();">111111</div>  
</body>  
</html>

收起阅读 »

分享个人写的用于项目的全选和取消以及全选按钮随着子类选项的状态变化而变化

<div class="mui-content">  

                <form class="mui-input-group">  
                    <div class="mui-input-row mui-checkbox">  
                        <label>全部</label>  
                        <input id="selectall"  type="checkbox">  
                    </div>  
                    <div class="mui-input-row mui-checkbox">  
                        <label>四年级一班</label>  
                        <input name="subcheck"  type="checkbox">  
                    </div>  
                    <div class="mui-input-row mui-checkbox">  
                        <label>四年级二班</label>  
                        <input name="subcheck"  type="checkbox">  
                    </div>  
                    <div class="mui-input-row mui-checkbox">  
                        <label>四年级三班</label>  
                        <input name="subcheck"  type="checkbox">  
                    </div>  
                </form>  
            </div>

<script type="text/javascript">  
        var chkall=document.getElementById("selectall");  
        mui.plusReady(function(){  
            chkall.addEventListener("change",function(){  
                if(this.checked){  
                    mui("input[name='subcheck']").each(function(){  
                        this.checked=true;  

                    });  
                }else{  
                    mui("input[name='subcheck']").each(function(){  
                        this.checked=false;  

                    });  
                }  
            },false);  

            var cbknum=mui("input[name='subcheck']").length;  
             var chknum=0;      
            mui(".mui-input-group").on("change","input[name='subcheck']",function(){  

                if(this.checked)  
                {  
                    chknum++;  

                }else{  
                    chknum--;  
                }  
                if(cbknum==chknum){  

                    chkall.checked=true;  
                }else{  
                    chkall.checked=false;  

                }  

            });  

        });

继续阅读 »

<div class="mui-content">  

                <form class="mui-input-group">  
                    <div class="mui-input-row mui-checkbox">  
                        <label>全部</label>  
                        <input id="selectall"  type="checkbox">  
                    </div>  
                    <div class="mui-input-row mui-checkbox">  
                        <label>四年级一班</label>  
                        <input name="subcheck"  type="checkbox">  
                    </div>  
                    <div class="mui-input-row mui-checkbox">  
                        <label>四年级二班</label>  
                        <input name="subcheck"  type="checkbox">  
                    </div>  
                    <div class="mui-input-row mui-checkbox">  
                        <label>四年级三班</label>  
                        <input name="subcheck"  type="checkbox">  
                    </div>  
                </form>  
            </div>

<script type="text/javascript">  
        var chkall=document.getElementById("selectall");  
        mui.plusReady(function(){  
            chkall.addEventListener("change",function(){  
                if(this.checked){  
                    mui("input[name='subcheck']").each(function(){  
                        this.checked=true;  

                    });  
                }else{  
                    mui("input[name='subcheck']").each(function(){  
                        this.checked=false;  

                    });  
                }  
            },false);  

            var cbknum=mui("input[name='subcheck']").length;  
             var chknum=0;      
            mui(".mui-input-group").on("change","input[name='subcheck']",function(){  

                if(this.checked)  
                {  
                    chknum++;  

                }else{  
                    chknum--;  
                }  
                if(cbknum==chknum){  

                    chkall.checked=true;  
                }else{  
                    chkall.checked=false;  

                }  

            });  

        });

收起阅读 »

使用纯HTML5编写一款网页上的时钟的代码分享

你需要知道的：
canvas标签只是图形容器，您必须使用脚本来绘制图形。默认大小：宽300px，高150px;
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。
getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
fillRect(l,t,w,h)：默认颜色是黑色 strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
beginPath()：定义开始绘制路径, 它把当前的点设置为 (0,0)。当一个画布的环境第一次创建，beginPath()
方法会被显式地调用。
closePath()：结束绘制路径（将起点与终点进行连接）

绘制圆形：
arc（ x,y,半径,起始弧度，结束弧度,旋转方向）
x,y：起始位置
弧度与角度的关系：弧度=角度*Math.PI/180
旋转方向：顺时针（默认：false，逆时针：true）
代码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var oC = document.getElementById('ch1');
var oGC = oC.getContext('2d');

                    function drawClock(){     
                            var x = 200;   //指定坐标     
                            var y = 200;     
                            var r = 150;  //指定钟表半径     

                            oGC.clearRect(0,0,oC.width,oC.height);//清空画布     

                            var oDate = new Date();      //创建日期对象     
                            var oHours = oDate.getHours();//获取时间     
                            var oMin = oDate.getMinutes();     
                            var oSen = oDate.getSeconds();     

                            var oHoursValue = (-90 + oHours*30 + oMin/2)*Math.PI/180; //设置时针的值     
                            var oMinValue = (-90 + oMin*6)*Math.PI/180;     
                            var oSenValue = (-90 + oSen*6)*Math.PI/180;     

                            oGC.beginPath();//开始     

                            for(var i=0;i<60;i++){         //i为60，代表着时钟的60个小刻度     
                                    oGC.moveTo(x,y);     
                                    oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); //循环从6度到12度     
                            }     
                            oGC.closePath();     
                            oGC.stroke();     

                            oGC.fillStyle ='white'; //覆盖住小刻度的黑色线     
                            oGC.beginPath();     
                            oGC.moveTo(x,y);     
                            oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);     

                            oGC.closePath();//结束     
                            oGC.fill();     

                            oGC.lineWidth = 3; //设置时钟圆盘大刻度的粗细值     
                            oGC.beginPath();  //开始画大的时钟刻度     

                            for(i=0;i<12;i++){              //i为12，代表着时钟刻度的12大格     
                                    oGC.moveTo(x,y);     
                                    oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); // 间隔为30度，弧度=角度*Math.PI/180     
                            }     
                            oGC.closePath();     
                            oGC.stroke();     

                            oGC.fillStyle ='white'; //覆盖住大刻度的黑色线     
                            oGC.beginPath();     
                            oGC.moveTo(x,y);     
                            oGC.arc(x,y,r*18/20,360*(i+1)*Math.PI/180,false);     

                            oGC.closePath();     
                            oGC.fill();//表盘完成      

                            oGC.lineWidth = 5;//设置时针宽度     
                            oGC.beginPath();//开始绘制时针     
                            oGC.moveTo(x,y);     

                            oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//设置时针大小和弧度     
                            oGC.closePath();     
                            oGC.stroke();     

                            oGC.lineWidth = 3;//设置分针宽度     
                            oGC.beginPath();//开始绘制分针     
                            oGC.moveTo(x,y);     

                            oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//设置分针大小和弧度     
                            oGC.closePath();     
                            oGC.stroke();     

                            oGC.lineWidth = 1;//设置秒针宽度     
                            oGC.beginPath();//开始绘制秒针     
                            oGC.moveTo(x,y);     

                            oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//设置秒针大小和弧度     
                            oGC.closePath();     
                            oGC.stroke();     
                    }     
                    setInterval(drawClock,1000);//设置定时器，让时钟运转起来     
                            drawClock();     
            };     
    </script>

</head>
<body>
<canvas id = "ch1" width = "400px" height = "400px"></canvas>
</body>
</html>
点击下方result查看演示：www.szyoudun.com

继续阅读 »

你需要知道的：
canvas标签只是图形容器，您必须使用脚本来绘制图形。默认大小：宽300px，高150px;
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。
getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
fillRect(l,t,w,h)：默认颜色是黑色 strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
beginPath()：定义开始绘制路径, 它把当前的点设置为 (0,0)。当一个画布的环境第一次创建，beginPath()
方法会被显式地调用。
closePath()：结束绘制路径（将起点与终点进行连接）

绘制圆形：
arc（ x,y,半径,起始弧度，结束弧度,旋转方向）
x,y：起始位置
弧度与角度的关系：弧度=角度*Math.PI/180
旋转方向：顺时针（默认：false，逆时针：true）
代码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var oC = document.getElementById('ch1');
var oGC = oC.getContext('2d');

                    function drawClock(){     
                            var x = 200;   //指定坐标     
                            var y = 200;     
                            var r = 150;  //指定钟表半径     

                            oGC.clearRect(0,0,oC.width,oC.height);//清空画布     

                            var oDate = new Date();      //创建日期对象     
                            var oHours = oDate.getHours();//获取时间     
                            var oMin = oDate.getMinutes();     
                            var oSen = oDate.getSeconds();     

                            var oHoursValue = (-90 + oHours*30 + oMin/2)*Math.PI/180; //设置时针的值     
                            var oMinValue = (-90 + oMin*6)*Math.PI/180;     
                            var oSenValue = (-90 + oSen*6)*Math.PI/180;     

                            oGC.beginPath();//开始     

                            for(var i=0;i<60;i++){         //i为60，代表着时钟的60个小刻度     
                                    oGC.moveTo(x,y);     
                                    oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); //循环从6度到12度     
                            }     
                            oGC.closePath();     
                            oGC.stroke();     

                            oGC.fillStyle ='white'; //覆盖住小刻度的黑色线     
                            oGC.beginPath();     
                            oGC.moveTo(x,y);     
                            oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false);     

                            oGC.closePath();//结束     
                            oGC.fill();     

                            oGC.lineWidth = 3; //设置时钟圆盘大刻度的粗细值     
                            oGC.beginPath();  //开始画大的时钟刻度     

                            for(i=0;i<12;i++){              //i为12，代表着时钟刻度的12大格     
                                    oGC.moveTo(x,y);     
                                    oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); // 间隔为30度，弧度=角度*Math.PI/180     
                            }     
                            oGC.closePath();     
                            oGC.stroke();     

                            oGC.fillStyle ='white'; //覆盖住大刻度的黑色线     
                            oGC.beginPath();     
                            oGC.moveTo(x,y);     
                            oGC.arc(x,y,r*18/20,360*(i+1)*Math.PI/180,false);     

                            oGC.closePath();     
                            oGC.fill();//表盘完成      

                            oGC.lineWidth = 5;//设置时针宽度     
                            oGC.beginPath();//开始绘制时针     
                            oGC.moveTo(x,y);     

                            oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//设置时针大小和弧度     
                            oGC.closePath();     
                            oGC.stroke();     

                            oGC.lineWidth = 3;//设置分针宽度     
                            oGC.beginPath();//开始绘制分针     
                            oGC.moveTo(x,y);     

                            oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//设置分针大小和弧度     
                            oGC.closePath();     
                            oGC.stroke();     

                            oGC.lineWidth = 1;//设置秒针宽度     
                            oGC.beginPath();//开始绘制秒针     
                            oGC.moveTo(x,y);     

                            oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//设置秒针大小和弧度     
                            oGC.closePath();     
                            oGC.stroke();     
                    }     
                    setInterval(drawClock,1000);//设置定时器，让时钟运转起来     
                            drawClock();     
            };     
    </script>

</head>
<body>
<canvas id = "ch1" width = "400px" height = "400px"></canvas>
</body>
</html>
点击下方result查看演示：www.szyoudun.com

收起阅读 »

热门文章