移动端html页面分享
开发APP应用比开发移动端网页挑战小,因为APP应用只需要适配不同手机即可,而移动端网页不仅需要适配不同手机,还要适配同一部手机的不同浏览器。
移动端页面分享是一个常用的功能,需要宿主环境,可以是某APP应用,也可以是微信,还可以是浏览器。
如果html页面内嵌APP应用或者微信,想实现分享功能,需要在按钮元素上加代码,要么调用APP方法或协议,要么调用微信API;如果html页面直接在浏览器打开,网页前端不用额外做分享功能,因为浏览器自带分享。
站在网页前端的角度,下面具体介绍一下微信分享和APP分享及浏览器分享。
一、微信分享
说明:移动端html页面嵌入微信,调用微信分享功能。
官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
1、封装js
require.async('/static/common/wxShare/jweixin-1.0.0.js', function() { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId:wxParamObj.appId , // 必填,公众号的唯一标识 timestamp:wxParamObj.timestamp , // 必填,生成签名的时间戳 nonceStr:wxParamObj.nonceStr, // 必填,生成签名的随机串 signature:wxParamObj.signature,// 必填,签名 jsApiList: [ "onMenuShareAppMessage", "onMenuShareTimeline" ] // 必填,需要使用的JS接口列表 }); wx.ready(function(){ /** * config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后, * config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口, * 则须把相关接口放在ready函数中调用来确保正确执行。 */ // 分享到朋友圈 wx.onMenuShareTimeline({ title: wxParamObj.title ,//分享标题 link: wxParamObj.link, //分享链接 imgUrl: wxParamObj.imgUrl ,//分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); //分享给朋友 wx.onMenuShareAppMessage({ title: wxParamObj.title, // 分享标题 desc: wxParamObj.desc, // 分享描述 link: wxParamObj.link, // 分享链接 imgUrl: wxParamObj.imgUrl, // 分享图标 type: '', // 分享类型,music、video或link,不填默认为link dataUrl: '',// 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }); }); });
2、传参数
var wxParamObj = {//定义全局变量 debug: "<?php echo $debug;?>", appId: "<?php echo $appId;?>", timestamp: "<?php echo $timestamp;?>", nonceStr: "<?php echo $nonceStr;?>", signature: "<?php echo $signature;?>", title: "<?php echo $title;?>", desc: "<?php echo $desc;?>", link: "<?php echo $link;?>", imgUrl: "<?php echo $imgUrl;?>" }
分享的按钮是微信原生页面的元素,网页前端只管传参数,微信APP那边监听点击事件。
二、APP分享
说明:移动端html页面嵌入APP,调用APP原生的分享功能。
场景1:
分享的按钮是APP原生页面的元素。网页前端传参数调APP自定义的方法,APP前端监听点击事件,弹出分享框。html页面初始化时,下面的代码执行。
var wxParamObj = { title : title, // 分享标题 desc : content, // 分享描述 imgUrl: imgurl, // 分享图标 shareUrl: link // 分享链接 }; wxParamObjStr = JSON.stringify(wxParamObj); pahaofang.setRightItem('share', wxParamObjStr);
场景2:
分享的按钮是html页面的元素。网页前端监听点击事件,传参数,调APP方法。点击html元素时,下面的代码执行。(网页前端在click事件里面写如下代码)
Native.share(title, content, link, imgurl);
场景3:
分享的按钮是html页面的元素。网页前端监听点击事件,重定向到APP协议中。点击html元素时,下面的代码执行。(网页前端在click事件里面写如下代码)
<a href="javascript:void(0);" class="hft-share">分享</a>
var shareUrl = "haofangtuo://service/showSNSPad?desc=锄禾日当午\r\n信息信息信息内容内容内容!&" + "imgUrl=http://static.xxx.com/mmm.png&" +"shareUrl="+encodeURIComponent(link)+ "&title=锄禾日当午\r\n信息信息信息内容内容内容"; $('.hft-share').on('click', function(event) { location.href = shareUrl; });
三、浏览器分享
浏览器自带分享功能,移动端html页面不用额外做。
移动端html页面分享的更多相关文章
- 移动端以及 PC浏览器页面分享到朋友圈等的功能实现
我们经常可以在一些 app上看到分享到朋友圈.微信好友.qq好友等功能,例如 饿了么.美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启 ...
- 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml
机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...
- 微信移动端web页面调试小技巧
技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客 http://lizhug.com/mymajor/微信移动端web页面调试小技巧
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- 移动端 H5 页面注意事项
1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有 微信.QQ 等. ...
- 移动端H5页面注意事项
1. 单个页面内容不能过多 设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信.QQ等. 使用移动设备查 ...
- 移动端H5微信分享
移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档: 微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...
随机推荐
- L-BFGS算法(转载)
转载链接:http://blog.csdn.net/itplus/article/details/21897715 前面的拟牛顿法.DFP.BFGS.L-BFGS算法简短总结一下就是: 牛顿法不仅使用 ...
- git获取内核源码的方法
[转]http://www.360doc.com/content/17/0410/16/23107068_644444795.shtml 1. 前言 本文主要讲述ubuntu下通过git下载linux ...
- C# 汉字与区位码之间的相互转换(中文数字字母可以,支持空格,但是特殊字符未来得及测试)
using System; using System.Text; namespace Test { class MainClass { /// <summary> /// 中文空白字符,用 ...
- SharePoint 2013 文档库“样式”变了
有朋友反馈说文档库的样式变了. 经查证,原来有人修改了视图的"样式":库设置—视图—样式,改为默认即可. 另外,如果编辑页面,编辑web部件的属性,在"杂项"勾 ...
- 关于素数:求不超过n的素数,素数的判定(Miller Rabin 测试)
关于素数的基本介绍请参考百度百科here和维基百科here的介绍 首先介绍几条关于素数的基本定理: 定理1:如果n不是素数,则n至少有一个( 1, sqrt(n) ]范围内的的因子 定理2:如果n不是 ...
- sqlserver循环
普通while循环 1 循环5来修改学生信息 循环遍历修改记录 DECLARE @i int set @i=0 while @i<5 BEGIN update Student set demo ...
- jmeter之ip欺骗
说明:我看有的博客说官方文档是在jmeter2.5以上的版本有此功能的实现~ 我的是2.13版本,也可以实现 . 准备工作: 使用IP欺骗功能必须得本地有多个可用IP,通常普通的PC机只有一个物理网卡 ...
- bert 词典扩充方案
- 红包外挂史及AccessibilityService分析与防御
最近在做一个有趣的外挂的小玩意,前提我们要了解一个重要的类AccessibilityService 转载请注明出处:https://lizhaoxuan.github.io 前言 提起Accessib ...
- vue首次赋值不触发watch
可通过其immediate 属性进行配置,默认为false watch:{ "aaa":{ immediate:true, handler:function(){ } }