移动端html页面分享

时间:2023-01-27 20:47:28

开发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页面分享的更多相关文章

  1. 移动端以及 PC浏览器页面分享到朋友圈等的功能实现

    我们经常可以在一些 app上看到分享到朋友圈.微信好友.qq好友等功能,例如 饿了么.美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启 ...

  2. 移动端H5页面的设计稿尺寸大小规范-转载自http&colon;&sol;&sol;www&period;chinaz&period;com&sol;design&sol;2015&sol;1103&sol;465670&period;shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  3. 微信移动端web页面调试小技巧

    技术贴还是分享出来更加好,希望能对一些朋友有帮助,个人博客  http://lizhug.com/mymajor/微信移动端web页面调试小技巧

  4. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  5. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程( ̄▽ ̄)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  6. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  7. 移动端 H5 页面注意事项

    1. 单个页面内容不能过多 设计常用尺寸:750 x 1334 / 640 x 1134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有 微信.QQ 等. ...

  8. 移动端H5页面注意事项

    1. 单个页面内容不能过多 设计常用尺寸:7501334 / 6401134,包含了手机顶部信号栏的高度. 移动端H5活动页面常常需要能够分享到各种社交App中,常用的有微信.QQ等. 使用移动设备查 ...

  9. 移动端H5微信分享

    移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档:  微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...

随机推荐

  1. UART接口基本知识

    Universal asynchronous transciever即同一异步收发器,也就是我们平时所说的串口,是一种最简单,最基本的通信接口. 通信接口按照不同的标准有不同的分类,常见的有同步或异步 ...

  2. java 内存回收&lpar;GC&rpar;的方式

    java内存的管理其实就是对象内存的管理,其中包括对象的分配和释放 对应程序员来说分配对象使用new关键字,而释放一个对象只需要让它等于null,让程序不能再访问这个对象,这时对象是不可达的,GC负责 ...

  3. Android用户界面 UI组件--ImageView及其子类ImageButton&comma;QuickContactBadge附带Draw9Patch工具说明

    1.ImageView 常用属性: android:src 设置可绘制对象作为 ImageView 显示的内容 android:cropToPadding 如果设置为true,图片裁剪到保留该Imag ...

  4. 第四章 MyBatis-SQL映射文件

    MyBatis 真正的强大在于映射语句,专注于SQL,功能强大,SQL映射的配置却是相当简单 SQL映射文件的几个*元素(按照定义的顺序) mapper - namespace cache - 配置 ...

  5. wampserver安装之后出现&OpenCurlyDoubleQuote;无法启动,因为计算机中丢失了msvr110&period;dll”

    1.是因为计算机缺失包所致,我的解决办法是安装一个包来解决. 2.网址如下:下载网址 3.下载完之后,然后安装就是(根据自己的系统版本来选择合适的安装版本).

  6. c&lowbar;数据结构&lowbar;链表

    #include<stdio.h> #include<stdlib.h> #define ERROR 0 #define OK 1 #define OVERFLOW -2 ty ...

  7. 浅谈树状数组(为什么lowbit(x)&equals;x&amp&semi;(-x)

    树状数组是一种支持单点修改和查询前缀和的数据结构 网上很多讲解它的博客了 这里重点讲一下为什么lowbit(x)=x&(-x) 树状数组代码量相对于线段树基本可以不计(太好写了) 因此NOIp ...

  8. 设计模式之单例模式-C&plus;&plus;

    单例模式也称单子模式.单件模式,通过单例模式可以保证系统中只有一个类只有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享 对于系统中的某些类来说,只有一个实例很重要,比如一个打印机可以 ...

  9. java虚拟机规范&lpar;se8&rpar;——java虚拟机结构&lpar;一&rpar;

    本文翻译自:https://docs.oracle.com/javase/specs/jvms/se8/html/jvms-2.html 第二章 虚拟机结构 本文档描述了一个抽象的虚拟机规范,并不描述 ...

  10. ubuntu下wordcount例子

    在/home/yuanqin/下建立file文件夹,再在文件夹建立file1.txt.file2.txt.file3.txt file1内容:hello word file2内容:hello hado ...