mui开发app,mui搜索框触发手机搜索按键方法，分享功能的实现

1. 搜索框的属性的设置。

要虚拟键盘显示“搜索”二字，需满足以下两个条件：
（1）设置input属性 type=‘search’
（2）input需在form表单中。

html代码

<form action="">
    <div class="mui-input-row mui-search">
        <input id="search" type="search" class="mui-input-clear" placeholder="输入关键字搜索">
    </div>
</form>

若是实现点击"搜索"，实现搜索事件，需要对按键进行监听。注意要点:
（1）监听事件类型“keypress”
（2）event.keyCode == "13"
（3）event.preventDefault(); // 阻止默认事件---阻止页面刷新（表单提交）

js代码

document.getElementById("search").addEventListener("keypress",function(event) {
    if(event.keyCode == "13") {
        document.activeElement.blur();//收起虚拟键盘
        toSearch();//TODO 完成搜索事件
        event.preventDefault(); // 阻止默认事件---阻止页面刷新
    }
});

2.分享功能的实现

app中有一个分享功能，将开发流程及代码做以下记录。

1.申请第三方APPKEY，具体流程参考:
新浪微博appkey申请步骤
 腾讯微博appkey申请方法
 微信appkey申请方法

2.介绍
这边分享类型有：微信好友、朋友圈、新浪微博、复制链接。

3.代码
第一步：获取分享服务。（涉及到plus对象的都要写在mui.plusReady方法里面）

/**
 * 获取分享服务
 */
function updateSerivces() {
    plus.share.getServices(function(s) {
        shares = {};
        for(var i in s) {
            var t = s[i];
            shares[t.id] = t;
        }
        //微信服务
        weixinss = shares['weixin'];
        //新浪服务
        sinaweiboss = shares['sinaweibo'];
        weixinShare ={
            title: '微信朋友圈',
            s: weixinss,
            x: 'WXSceneTimeline'
        }
        weixinShareSession ={
            title: '微信好友',
            s: weixinss,
            x: 'WXSceneSession'
        }
        sinaweibo = {
            title: '新浪微博',
            s: sinaweiboss
        }
    }, function(e) {
        _.toast("获取分享服务列表失败：" + e.message);
    });
}

    第二步：触发分享操作的编码
    比如：

//点击微信好友分享
doc.querySelector(".m-btn.btnweixin").addEventListener("tap",function(){
    shareAction(weixinShareSession,false);
});
//点击朋友圈分享
doc.querySelector(".m-btn.btnpengyouquan").addEventListener("tap",function(){
    shareAction(weixinShare,false);
});
//点击新浪微博分享
doc.querySelector(".m-btn.btnsina").addEventListener("tap",function(){
    shareAction(sinaweibo,false);
});

/**
 * 分享操作
 * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
 * @param {Boolean} bh 是否分享链接
 */
function shareAction(sb, bh) {
    if(!sb || !sb.s) {
        _.toast("无效的分享服务！");
        return;
    }
    var msg = {
        content: title_share,//分享的标题
        href:href,
        extra: {
            scene: sb.x
        }
    };
    // 发送分享
    if(sb.s.authenticated) {
        shareMessage(msg, sb.s);
    } else {
        sb.s.authorize(function(){
            shareMessage(msg, sb.s);
        }, function(e) {
            console.log(e.code);
            _.toast("认证授权失败");
        });
    }
}

    第三步：发送分享消息方法的编写

/**
* 发送分享消息
 * @param {JSON} msg
 * @param {plus.share.ShareService} s
 */
function shareMessage(msg, s) {
    s.send(msg, function() { 
        _.toast("分享到\"" + s.description + "\"成功！ ");
    }, function(e) {
        _.toast("分享到\"" + s.description + "\"失败: ");
    });
}

其中有一个复制链接部分，是使用native.js调用原生接口实现。

//android
function copyToClipAndroid(val) {
    var Context = plus.android.importClass("android.content.Context");
    var main = plus.android.runtimeMainActivity();
    var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
    plus.android.invoke(clip, "setText", val);
    mui.toast("复制成功");
}
//ios
function copyToClipIos(val) {
    var UIPasteboard = plus.ios.importClass("UIPasteboard");
    var generalPasteboard = UIPasteboard.generalPasteboard();
    // 设置/获取文本内容:
    generalPasteboard.plusCallMethod({
        setValue: val,
        forPasteboardType: "public.utf8-plain-text"
    });
    generalPasteboard.plusCallMethod({
        valueForPasteboardType: "public.utf8-plain-text"
    });
    mui.toast("复制成功");
}

mui开发app,mui搜索框触发手机搜索按键方法，分享功能的实现

1. 搜索框的属性的设置。

2.分享功能的实现

猜你喜欢