Hbuider hybrid app开发细节积累

（更多精彩内容请访问DCloud官网（http://www.dcloud.io/））

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("复制成功");
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！