tnblog
首页
视频
资源
登录

mui 实现文章分享功能

4657人阅读 2020/3/5 18:54 总访问:185561 评论:0 收藏:0 手机
分类: mui

弄了很 久,终于弄出来了,不容易啊。


看代码:


  1. ```csharp
  2. <script type="text/javascript" charset="utf-8">
  3.                //分享操作 
  4.         var shares = {};
  5.         // 初始化服务列表
  6.         mui.plusReady(function({
  7.             plus.share.getServices(function(s{
  8.                 if (s && s.length > 0) {
  9.                     for (var i = 0; i < s.length; i++) {
  10.                         var t = s[i];
  11.                         shares[t.id] = t;
  12.                     }
  13.                 }
  14.             }, function({
  15.                 console.log("获取分享服务列表失败");
  16.             });
  17.            click();
  18.         });
  19. function     click(){
  20.  
  21.          //分享链接点击事件
  22.         document.getElementById("share").addEventListener('tap'function({
  23.             var ids = [{
  24.                     id"weixin",
  25.                     ex"WXSceneSession"
  26.                 }, {
  27.                     id"weixin",
  28.                     ex"WXSceneTimeline"
  29.                 }, {
  30.                     id"sinaweibo"
  31.                 }, {
  32.                     id"tencentweibo"
  33.                 }, {
  34.                     id"qq"
  35.                 }],
  36.                 bts = [{
  37.                     title"发送给微信好友"
  38.                 }, {
  39.                     title"分享到微信朋友圈"
  40.                 }, {
  41.                     title"分享到新浪微博"
  42.                 }, {
  43.                     title"分享到腾讯微博"
  44.                 }, {
  45.                     title"分享到QQ"
  46.                 }];
  47.             plus.nativeUI.actionSheet({
  48.                 cancel"取消",
  49.                 buttons: bts
  50.             }, function(e{
  51.                 var i = e.index;
  52.                 if (i > 0) {
  53.                     var s_id = ids[i - 1].id;
  54.                     var share = shares[s_id];
  55.                     if (share.authenticated) {
  56.                         shareMessage(share, ids[i - 1].ex);
  57.                     } else {
  58.                         share.authorize(function({
  59.                             shareMessage(share, ids[i - 1].ex);
  60.                         }, function(e{
  61.                             console.log("认证授权失败:" + e.code + " - " + e.message);
  62.                         });
  63.                     }
  64.                 }
  65.             });
  66.         });
  67.         
  68. }
  69.         // 分享执行动作
  70.         function shareMessage(share, ex{
  71.   var  title=$(".pet_article_title").html();
  72.    
  73.   var  content=$(".content").text();
  74.   
  75.   var  headimg=$(".pet_article_user_ico  img").attr("src");
  76.   
  77.   var  url=document.getElementById("urlTest").value;
  78.   
  79.   alert(url)
  80.                 var msg = {
  81.                     extra: {
  82.                         scene: ex
  83.                     }
  84.                 };
  85.                 msg.href = url;
  86.                 msg.title = title;
  87.                 msg.content = content;
  88.                 if (~share.id.indexOf('weibo')) {
  89.                     msg.content += ";体验地址:http://www.dcloud.io/hellomui/";
  90.                 }
  91.                 msg.thumbs = [headimg];
  92.                 share.send(msg, function({
  93.                     console.log("分享到\"" + share.description + "\"成功! ");
  94.                 }, function(e{
  95.                     console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
  96.                 });
  97.             } 
  98.     </script>
  99. ```


重点讲下:


 //分享链接点击事件

 


   **document.getElementById("share").addEventListener('tap', function() {。。。。**


这里是你点击的分享事件。


  **var  title=$(".pet_article_title").html();

   

  var  content=$(".content").text();

  

  var  headimg=$(".pet_article_user_ico  img").attr("src");

  

  var  url=document.getElementById("urlTest").value;**


这里的 标题(title),文本(content),图片(headimg),文章路径(url),需要你自己提供。


接下来看看效果:


在这里插入图片描述

点击进行分享


在这里插入图片描述


点击发送微信好友


在这里插入图片描述

选择好友进行发送:


在这里插入图片描述

分享给QQ:


在这里插入图片描述


在这里插入图片描述

这样就分享成功了,其他的不做解释了,不懂的可以咨询我。


????????????


评价

mui学习一 :hbuilderx常用快捷键

Dg:document.getElementById(&quot;&quot;)Dq:document.querySelectorAll(&quot;&quot;)Clog: console.log();

mui学习二: 调试状态看console.log等

看console.log上面点击一下即可也可以在浏览器上看把连接复制上去即可这样就可以了

mui学习三: mui事件

点击事件在浏览器上不行的问题mui的tag事件在浏览器上调试是不行的,要使用模拟器或者真机调试才行当然click事件还是可以执...

mui中的的意思

其实就是mui的别名而已//代码开始(function($, doc) { $.init();})(mui, document);//代码结束上面的$是mui的别名

mui轮播图与显示小圆点

html:&lt;divclass=&quot;mui-slider&quot;&gt; &lt;divclass=&quot;mui-slider-groupmui-slider-loop&quot;&gt; &lt;...

mui框架-移动端跳转以及传值的简单方法(修改解决方法)

纠结了两天的MUI跳转的问题,终于解决了 ,现在分享给大家,希望大家有什么坑的解决也给我分享分享 哈哈,废话不多说,上代...

mui页面之间传值的两种方法

分析:MUI是一个封装了Html5+的框架,所以当然也可以用href来跳转,但是在移动端会出现白屏闪动的现象,用户体验极不好,经...

mui与vue.js结合实现上拉加载

我们在使用mui与vue.js结合起来的时候会导致上拉加载失败,是因为vue.js生成的时候影响了demo节点,我们只要先用vue初始化...

mui上拉加载的坑

首先是和vue.js结合起来用容易出现的坑:http://www.tnblog.net/aojiancc/article/details/2838要注意html结构:这两个样式...

mui 点击上拉加载

首先在想获取加载下一页数据时的div外设置一个想要加载的div如:&lt;divclass=&quot;mui-content-padded&quot;style=&quot;...

mui 页面传值

根据想要传的值来传到对应的页面去像这样的&lt;divclass=&quot;am-list-main&quot;&gt; &lt;h3class=&quot;am-list-item-h...

mui页面之间传值的两种方法

分析:MUI是一个封装了Html5+的框架,所以当然也可以用href来跳转,但是在移动端会出现白屏闪动的现象,用户体验极不好,经...

mui-app之评论

//显示数据的布局页面 //因为涉及到评论人和回复人所以要绑定两次数据具体如下 &lt;divid=&quot;comment&quot;v-for=&quo...

mui框架页面间的传值指针

把时髦的技术挂在嘴边,不如把过时的技术记在心里。 今天我们说的是关于MUI,一个封装了Html5+的框架间页面传值问题一,在h...

mui 关于点击事件失效的一些原因

有时候我们总会遗忘一些小细节,老是怨天怨电脑,这不行那不行的,凡是都是要细心,成功还是得看细节。所以说,以后我们敲...

mui地址栏传值的方法

地址栏传值与接收值摘要:也是种传值的方式第一步 :输入你要传值的内容location.href=&quot;main.html?Username=&quot;+$...
人若没梦想,那跟咸鱼有啥样
排名
20
文章
32
粉丝
7
评论
21
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
容忍别人的一切错误