H5 + 开发App(分享功能)
我们开发App有一个不可少的功能,就是分享功能。让用户将app分享到他的社交圈。比如微信 QQ 微博等等。
准备工作:我们要先去申请相关的权限,
这是传送门http://ask.dcloud.net.cn/article/36。有一些配置说明和权限申请地址

腾讯已经转移到QQ 互联上去了,官网给的地址已经不可以用了。申请完将SDK配置好。也就是填上appid 和appsecret。
如果没有申请权限的情况下。可以真机调试但是不可以打包生成apk文件。
代码实现的基本原理。
1. 获取分享服务对象列表获取分享服务列表可以调用plus.share.getServices()接口。
2用户分享信息前需要对分享平台是否授权过进行判断,这个我们自己基本是知道的我们那些有授权那些没有。
3配置我们的分享消息
4 分享按钮点击事件。
下面是我的dome代码,判断授权和 界面弹出吐司提示函数不是必要的,只是开发时的提示有助于开发。实际项目中可以不使用。
//分享功能
document.getElementById('share').addEventListener('tap', function(event) {
shareHref();
})
var Intent = null,
File = null,
Uri = null,
main = null;
var shares = null;
var shareImageUrl = '';
mui.plusReady(function() {
updateSerivces();
if(plus.os.name == "Android") {
Intent = plus.android.importClass("android.content.Intent");
File = plus.android.importClass("java.io.File");
Uri = plus.android.importClass("android.net.Uri");
main = plus.android.runtimeMainActivity();
}
})
/**
* 更新分享服务
*/
function updateSerivces() {
plus.share.getServices(function(s) {
shares = {};
for(var i in s) {
var t = s[i];
shares[t.id] = t;
}
outSet("获取分享服务列表成功");
}, function(e) {
outSet("获取分享服务列表失败:" + e.message);
});
}
/**
* 分享操作
*/
function shareAction(id, ex) {
var s = null;
if(!id || !(s = shares[id])) {
outLine("无效的分享服务!");
return;
}
if(s.authenticated) {
outSet("---已授权---");
shareMessage(s, ex);
} else {
outSet("---未授权---");
s.authorize(function() {
shareMessage(s, ex);
}, function(e) {
outLine("认证授权失败");
});
}
}
/**
* 发送分享消息
*/
function shareMessage(s, ex) {
var msg = {
content: '快和我一起来玩锄禾农场吧',
href: 'http://www.chnc.shop/chnc/1.html?id='+AppID,
title: '锄禾农场',
content: '快和我一起来玩锄禾农场吧',
thumbs: ["img/mmexp.png"],
pictures: ["img/mmexp.png"],
extra: {
scene: ex
}
};
s.send(msg, function() {
outLine("分享成功!");
}, function(e) {
outLine("分享失败!");
});
}
/**
* 分享按钮点击事件
*/
function shareHref() {
var ids = [{
id: "weixin",
ex: "WXSceneSession" /*微信好友*/
}, {
id: "weixin",
ex: "WXSceneTimeline" /*微信朋友圈*/
}, {
id: "qq" /*QQ好友*/
}, {
id: "tencentweibo" /*腾讯微博*/
}, {
id: "sinaweibo" /*新浪微博*/
}],
bts = [{
title: "发送给微信好友"
}, {
title: "分享到微信朋友圈"
}, {
title: "分享到QQ"
}, {
title: "分享到腾讯微博"
}, {
title: "分享到新浪微博"
}];
plus.nativeUI.actionSheet({
cancel: "取消",
buttons: bts
},
function(e) {
var i = e.index;
if(i > 0) {
shareAction(ids[i - 1].id, ids[i - 1].ex);
}
}
);
}
function outSet(msg) {
console.log(msg);
}
// 界面弹出吐司提示
function outLine(msg) {
mui.toast(msg);
}
H5 + 开发App(分享功能)的更多相关文章
- app分享功能开发
最近在开发一个社交平台的app需要用到分享功能,本来想自己开发的,在网上花了很长时间查了很多教程结果却不尽人意,无意中看到还有类似的开源组件友推,结合自己的开发经验,把一些集成步骤和问题整理成文档奉献 ...
- H5开发APP考题和答案
{ "last_updated": { "$date": 1544276670569 }, "page_count": 1, "a ...
- 关于H5唤醒APP的功能实现(千辛万苦啊!)
首先,我是个后端,写java的,甚至不是搞移动端的,所以js这方面有点底子但不专业,对于出现的错误也请见谅,原来项目要求有个H5页面打开APP的功能就强行要做,没办法就想办法搞一下,网上的教程基本都是 ...
- 06 app分享功能
通过某一个点击事件触发confirm弹窗 确定后正式进行分享功能处理 这是一个封装好的分享功能插件 https://ext.dcloud.net.cn/plugin?id=4860 如果自己写的话会很 ...
- Android APP分享功能实现
[Android应用开发详解]第01期:第三方授权认证(一)实现第三方授权登录.分享以及获取用户资料 由于公司项目的需要,要实现在项目中使用第三方授权登录以及分享文字和图片等这样的效果,几经波折, ...
- H5开发APP入门
一.MUI MUI是一个最接近原生APP体验的高性能前端框架.我们用它来排版布局. 官方网站:http://dev.dcloud.net.cn/mui/ 二.HTML5PLUS html5+是HBul ...
- h5开发app之在线生成二维码
h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- 实现h5公众号分享功能(vue项目也适用)
在vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入 import wx from 'weixin-js-sdk';//引入 Vue. ...
随机推荐
- Linux下实现CAD数据的导出
近期公司项目涉及到CAD的导出,而且部署服务器申请不到Windows下的,所以技术上的解决方案就是寻求如何在Linux下实现CAD数据的导出. 于是百度了一下,找了几个相关库和软件. 1.dxflib ...
- 数组a和&a区别
假设我们定义一个数组char a[16]; 那么a与&a分别代表什么呢?它们完全一样吗? a其实代表的是数组中首元素的地址,即a[0]的地址,&a代表的是整个数组的起始地址.我们做个测 ...
- MySQL系列:基于binlog的增量订阅与消费(一)
在一些业务场景中,像在数据分析中我们有时候需要捕获数据变化(CDC):在数据审计中,我们也往往需要知道数据从这个点到另一个点的变化:同样在实时分析中,我们有时候需要看到某个值得实时变化等. 要解决以上 ...
- POJ 2084 Catalan数+高精度
POJ 2084 /**************************************** * author : Grant Yuan * time : 2014/10/19 15:42 * ...
- Javaproject集成log4j 2.x
log4j2和log4j在配置文件和引入jar包上出现了不同.这里做个备忘,这里使用的版本号为apache-log4j-2.3-bin.zip. 1.apache-log4j-2.3-bin.zip下 ...
- 人工智能背景下的Office 365现状和发展趋势
作者:陈希章 发表于 2017年7月31日 引子 谈论人工智能是让人兴奋的,因为它具有让人兴奋的两大特征 -- 每个人都似乎知道一点并且以知道一点为荣,但又好像没多少人能真正讲的明白.毫无疑问,我也仅 ...
- Github开源项目(企业信息化基础平台)
JEEPlatform 一款企业信息化开发基础平台,可以用于快速构建企业后台管理系统,集成了OA(办公自动化).SCM(供应链系统).ERP(企业资源管理系统).CMS(内容管理系统).CRM(客户关 ...
- Linux:如何进行c++编程
不适应美帝的饮食,当一只咸鱼在apartment里Coding一波,学习学习如何在Ubuntu实现C++的编程 正文如下: (预备知识) 学习Vim: http://www.cnblogs.com/ ...
- iOS 模拟器安装应用
iOS模拟器是苹果Xcode IDE的一部分,主要用来为Mac,iPhone和iPad创建应用程序,为了给iOS模拟器打包应用程序,利用–package 在命令行上执行ADT并使用–target来指定 ...
- cocoapods管理以及常遇到的问题
CocoaPods使用 安装成功啦,咱们来创建Podfile文件 //咱们先滚去项目的根目录,如果不会,你就先滚去看看shell命令教程吧 $ cd /Users/JamesGu/Desktop/Co ...