mui开发app,mui搜索框触发⼿机搜索按键⽅法，分享功能的实
现
1. 搜索框的属性的设置。
要虚拟键盘显⽰“搜索”⼆字，需满⾜以下两个条件：
（1）设置input属性 type=‘search’
（2）input需在form表单中。
1
2
3
4
html代码
<form action="">
<div class="mui-input-row mui-search">
<input id="search" type="search" class="mui-input-clear" placeholder="输⼊关键字搜索">
</div>
</form>
1
2
3
4
5
6
若是实现点击"搜索"，实现搜索事件，需要对按键进⾏监听。注意要点:
（1）监听事件类型“keypress”
（2）event.keyCode == "13"
（3）event.preventDefault(); // 阻⽌默认事件---阻⽌页⾯刷新（表单提交）
1
2
3
4
5
js代码
if(event.keyCode == "13") {
document.activeElement.blur();//收起虚拟键盘
toSearch();//TODO 完成搜索事件
event.preventDefault(); // 阻⽌默认事件---阻⽌页⾯刷新
}
});
1
2
3
2.分享功能的实现
app中有⼀个分享功能，将开发流程及代码做以下记录。
1.申请第三⽅APPKEY，具体流程参考:
2.介绍
这边分享类型有：好友、朋友圈、新浪微博、复制链接。
3.代码
第⼀步：获取分享服务。（涉及到plus对象的都要写在mui.plusReady⽅法⾥⾯）
1 2 3 4 5 6 7 8 9/**
* 获取分享服务
*/
function updateSerivces() {
Services(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,
mui框架常用方法
x: 'WXSceneTimeline'
}
weixinShareSession ={
title: '好友',
s: weixinss,
x: 'WXSceneSession'
}
sinaweibo = {
title: '新浪微博',
s: sinaweiboss
}
}, function(e) {
_.toast("获取分享服务列表失败：" + e.message);    });
}
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
1 2 3
1 2 3 4 5 6 7 8 9 10 11 12
第⼆步：触发分享操作的编码
⽐如：
//点击好友分享
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);
});
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29/**
* 分享操作
* @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.de);
_.toast("认证授权失败");
});
}
}
第三步：发送分享消息⽅法的编写
1
2
/**
* 发送分享消息
* @param {JSON} msg
* @param {plus.share.ShareService} s
*/
function shareMessage(msg, s) {
s.send(msg, function() {
_.toast("分享到\"" + s.description + "\"成功！ ");
}, function(e) {
_.toast("分享到\"" + s.description + "\"失败: ");
});
}
1
2
3
4
5
6
7
8
9
10
11
12
其中有⼀个复制链接部分，是使⽤native.js调⽤原⽣接⼝实现。
//android
function copyToClipAndroid(val) {
var Context = plus.android.importClass("t.Context");
var main = plus.android.runtimeMainActivity();
var clip = SystemService(Context.CLIPBOARD_SERVICE);
plus.android.invoke(clip, "setText", val);
}
//ios
function copyToClipIos(val) {
var UIPasteboard = plus.ios.importClass("UIPasteboard");
var generalPasteboard = alPasteboard();
/
/ 设置/获取⽂本内容:
generalPasteboard.plusCallMethod({
setValue: val,
forPasteboardType: "public.utf8-plain-text"
});
generalPasteboard.plusCallMethod({
valueForPasteboardType: "public.utf8-plain-text"
});
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。