我们开发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(分享功能)的更多相关文章

  1. app分享功能开发

    最近在开发一个社交平台的app需要用到分享功能,本来想自己开发的,在网上花了很长时间查了很多教程结果却不尽人意,无意中看到还有类似的开源组件友推,结合自己的开发经验,把一些集成步骤和问题整理成文档奉献 ...

  2. H5开发APP考题和答案

    { "last_updated": { "$date": 1544276670569 }, "page_count": 1, "a ...

  3. 关于H5唤醒APP的功能实现(千辛万苦啊!)

    首先,我是个后端,写java的,甚至不是搞移动端的,所以js这方面有点底子但不专业,对于出现的错误也请见谅,原来项目要求有个H5页面打开APP的功能就强行要做,没办法就想办法搞一下,网上的教程基本都是 ...

  4. 06 app分享功能

    通过某一个点击事件触发confirm弹窗 确定后正式进行分享功能处理 这是一个封装好的分享功能插件 https://ext.dcloud.net.cn/plugin?id=4860 如果自己写的话会很 ...

  5. Android APP分享功能实现

    [Android应用开发详解]第01期:第三方授权认证(一)实现第三方授权登录.分享以及获取用户资料   由于公司项目的需要,要实现在项目中使用第三方授权登录以及分享文字和图片等这样的效果,几经波折, ...

  6. H5开发APP入门

    一.MUI MUI是一个最接近原生APP体验的高性能前端框架.我们用它来排版布局. 官方网站:http://dev.dcloud.net.cn/mui/ 二.HTML5PLUS html5+是HBul ...

  7. h5开发app之在线生成二维码

    h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...

  8. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  9. 实现h5公众号分享功能(vue项目也适用)

    在vue项目中我们先npm install weixin-js-sdk --save下载下来在main.js文件中引入 import wx from 'weixin-js-sdk';//引入 Vue. ...

随机推荐

  1. 【new File(String Path)加载资源问题】

    2017-12-17   15:07:38  [原创-wx] 一.我们在用IO流加载资源的时候,创建文件资源 1 File file = New File("String Path" ...

  2. LintCode-买卖股票的最佳时机

    如果有一个数组,它的第i个元素是一支给定的股票在第i天的价格.如果你最多仅仅同意完毕一次交易(比如,一次买卖股票),设计一个算法来找出最大利润. 您在真实的面试中是否遇到过这个题? Yes 例子 给出 ...

  3. UVA 12009 - Avaricious Maryanna(数论)

    UVA 12009 - Avaricious Maryanna 题目链接 题意:给定一个n.求出n个数位组成的数字x,x^2的前面|x|位为x 思路:自己先暴力打了前几组数据,发现除了1中有0和1以外 ...

  4. java 线程 捕获异常

    java 线程 捕获异常  来自:thinking in java 4 文件夹20.2.13 package org.rui.thread.concurrent; import java.util.c ...

  5. java实现播放mp3功能

    1.首先引入jlayer.jar <!-- https://mvnrepository.com/artifact/javazoom/jlayer --> <dependency> ...

  6. 自学Zabbix3.4-资产清单inventory

    当监控的设备越来越多,有时候搞不清楚哪台服务器.网络设备是什么配置,abbix专门设置了设备资产管理功能.我们创建或者编辑主机的时候,可以看到清单(inventory)功能.里面大致包含mac地址.硬 ...

  7. java宜立方商城项目

    宜立方商城项目 链接: https://pan.baidu.com/s/1c1SokzI 密码: z5cy 网上买的,资源是拿来共享,而不是来牟利的 框架:spring      设计模式      ...

  8. redis集群配置,spring整合jedis,缓存同步

    前台的商品数据(图片等加载缓慢)查询,先从redis缓存查询数据. redis是一个nosql数据库,内存版数据库,读取速度11w/s.本身具有内存淘汰机制,是单线程服务器(分时操作系统),线程安全. ...

  9. redis基础二

    前面已经学习了redis的基本的命令行操作和数据类型,下面开始redis一些有趣的功能. 订阅和发布机制 定义:发布者相当于电台,订阅者相当于客户端,客户端发到频道的消息,将会被推送到所有订阅此频道的 ...

  10. 为什么epoll会那么高效

    参考(原文简直超赞):https://zhidao.baidu.com/question/687563051895364284.html下面是我结合原文写的,为了便于自己理解:关于阻塞和非阻塞的理解可 ...