精华内容
下载资源
问答
  • 微信小程序--实现分享功能

    万次阅读 多人点赞 2019-07-25 15:28:27
    本篇文章的目标是实现分享小程序中的单张页面给其他用户,并且打开分享后的页面拥有返回按钮. 最终的效果: 1. 封装一个分享的组件 <view class='share'> <view class='like'> ...

      本篇文章的目标是实现分享小程序中的单张页面给其他用户,并且打开分享后的页面拥有返回按钮.

      最终的效果:

     

                                                                

     

     

    1. 封装一个分享的组件

    <view class='share'>
       <view class='like'>
          <view class='iconfont icon-aixin'></view>
       </view>
       <view class='weixin'>
           <button open-type="share" class='iconfont icon-weixin'></button>
       </view>
    </view>

    页面效果如下:

                                                

    说明:

       如果想在页面上实现点击按钮分享,那么这个点击的按钮必须使用button标签,并且open-type置为share

     

    2.在想要分享的页面中引入上面组件,并在页面的js中Page所包含的对象里增加一个方法onShareAppMessage

     

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
       news_id:12
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
       
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
        let url = encodeURIComponent('/packageNews/pages/news_detail/news_detail?news_id=' + this.data.news_id);
    
        return {
          title: "热点详情",
          path:`/pages/index/index?url=${url}` 
        }
    
      }
    })

     说明:

      将当前页面的路径包括参数使用encodeURIComponent进行编码并作为url的参数,path设置为小程序的首页.当我们将该页面

    分享给其他人时,他们打开的首先是首页,然后跳转到我们分享的这个页面.

     

    3.要想分享后的页面打开先进入首页再跳转到分享的页面,首页的js要做如下设置

     

    //index.js
    Page({
      data: {
      
      },
      onLoad: function (options) {
    
    
        if(options.url){
    
          let url = decodeURIComponent(options.url);
    
          wx.navigateTo({
            url
          })
    
        }
    
      }
    
    })
    

    说明:

      在onLoad的方法中先判断有没有url参数,如果有的话就使用decodeURIComponent对url解码然后跳转.由于小程序是先进入了首页然后跳转到分享页,这样便解决了分享页没有返回键的问题.

     

    结尾

    很多同学私信反馈小程序分享完毕之后,打开页面没有数据.最后总结了有以下原因:

    1. 分享按钮一定要使用button标签,并且open-type置为share

    2.被分享的那个页面请求后台接口的参数,可能是从上一个页面传递过来的.

    例如分享某个新闻详情给好友.它的底层原理就是,好友打开小程序,小程序启动后先进入首页,拿到跳转地址再跳到新闻详情页.而平时我们访问新闻详情页需要带着一个新闻id的,没有id就无法知道当前访问哪个新闻.由于分享后是直接从首页跳到详情页,没有新闻id,自然是无法获取到新闻数据.

    所以我建议先分析一下分享的那张页面是不是含有上个页面要传过来的数据,如果确实含有就能把参数挂到路径后面,再把这种带有参数的路径分享出去.如下面代码所示:

     onShareAppMessage: function () {
    
        let url = encodeURIComponent('/packageNews/pages/news_detail/news_detail?news_id=' + this.data.news_id);
    
        return {
          title: "热点详情",
          path:`/pages/index/index?url=${url}` 
        }
    
      }

    上面代码分享的是news_detail这个页面,但是这个页面需要一个news_id才能获取数据.因此在拼接url时将news_id拼接上去.

    如果还有不明白的同学可以扫下面前端技术群,有任何技术问题可以在群里面与大家相互沟通.

     

     

     

     

     

     

     

     

     

    展开全文
  • 前端H5如何实现分享截图

    千次阅读 多人点赞 2021-01-07 22:55:48
    H5分享截图教程及注意事项 这篇文章主要是介绍如何使用canvas实现分享截图,

    目录

    前言

    这篇文章主要是介绍如何使用canvas实现分享截图,
    刚开始以为通过canvas绘画分享图片并不难,但实际上在开发的时候还是遇到非常多的坑
    例如:
    ①图片背景为透明
    ②分享图只有文字没有图片
    ③图片跨域问题
    下面看例子:
    分享图片、分享内容描述、标题、二维码都是通过请求接口动态生成

    在这里插入图片描述

    实现:一、body部分

    框架我使用的是react。绘画分享采用原生canvas、js实现。所以不用担心vue、小程序、原生H5也是能够适应。

    一、构建canvas
    下面展示一些 内联代码片

    //ref是react获取canvas元素的方法。也可以使用id,再通过getElementById() 方法获取canvas
    //宽高需要转化为而二-四倍图来提高清晰度、否则会导致分享截图模糊,清晰度不足
     <canvas ref='canvas' width={1200} height={1600} className={styles.canvasImg}/>
    
    
    //点击分享按钮触发this.shareComponent(this.getUrlImg)方法
    //非react框架,忽视其余代码。直接触发分享函数
                  <div className={styles.luckDraw_viewPrizeBtn} onClick={()=>{
                         this.setState({
                             shareModal:true
                            },()=>{
                                this.shareComponent(this.getUrlImg)
                            })}
                     }>分享活动</div>
    
    

    实现:二、JS部分:

    shareComponent函数

    //函数接受一个回调函数,用于绘画完成后,再将canvas转化为png图片格式。
    //canvas移动端无法长按保存,必须传为img才能保存。
    shareComponent = (callback)=>{
        let suncode = this.state.suncode //微信小程序太阳码
        let activityName = this.state.activityName //活动标题
        let backgroundImg = this.state.backgroundImg //背景图
        let postShareDesc= this.state.postShareDesc //分享描述字段
        let img = new Image()
        img.crossOrigin="anonymous"; //关键,处理图片跨域问题!!
        let _t = this
        //限制活动标题,最多10个字,超过...省略
        if(activityName.length>10){
            activityName=activityName.slice(0,10)+'...'
          }
        //由于canvas文字不能自动换行,所以我们这里需要做一个文字换行处理,以及字数的限制,防止超出canvas范围
        let arrDescribe = [] 
        let maxLeng = postShareDesc.length/20 //分享描述每行20字,最多8行
        if(maxLeng=>8){
            maxLeng = 8 //最多8行
        }
        //postShareDesc为分享描述字段
       
        for(let i = 0;i<maxLeng;i++){
        //将分享描述字段分为若干个20字的行存入arrDescribe数组,且最多8行
            let str = postShareDesc.slice(i*20,i*20+20) 
            arrDescribe.push(str)
        }
        //图片加载完后,将其显示在canvas中,图片必须使用onload方式,否则会导致图片未加载完成就完成绘画
        //img为整张分享图
        img.onload = function (){
          let canvas = _t.refs.canvas //获取canvas元素
          let ctx = canvas.getContext('2d')
            //设置背景色,否则背景色会透明
            ctx.fillStyle='#fff';
            ctx.fillRect(0,0,1196,1596);
            ctx.drawImage(img, 0, 0,1200,600);
    		//分享字段描述
            ctx.font="52px Arial";
            ctx.fillStyle='#000';
            //手动换行,80为X坐标,700+index*100为动态计算Y坐标
            arrDescribe.forEach((item,index)=>{
                ctx.fillText(item,80,700+index*100);
            })
            //分享标题
            ctx.font="64px Arial";
            ctx.fillStyle='#000';
            ctx.fillText(activityName,520,1320);
    		//分享提示
            ctx.font="48px Arial";
            ctx.fillStyle='#999';
            ctx.fillText('长按小程序码查看详情',520,1420);
    		//分享提示
            ctx.font="48px Arial";
            ctx.fillStyle='#999';
            ctx.fillText('分享自[XXXX]',520,1500);
    		//分割线
            ctx.moveTo(1120,1160);
            ctx.lineTo(80,1180);
            ctx.strokeStyle="#E8E8E8"
            ctx.stroke();
            //img1为小程序太阳码
            let img1 = new Image()
            img1.crossOrigin="anonymous"; //关键,处理太阳码转化为base64格式图片时的跨域问题
            img1.onload = function(){
            ctx.drawImage(img1,  80, 1200,340,340)
            callback(canvas)
    
          }
    	  太阳码赋值给img1
          img1.src = suncode
    	  //边框
          ctx.strokeStyle="#f5f5f5";
          ctx.rect(0,0,1200,1600);
          ctx.stroke();      
    
        }
    	//timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间(从 epoch 开始的毫秒数)。
    	//URL时间戳的用法:作用:为了防止浏览器缓存。
    	//URL后面添加随机数或时间戳通常用于防止浏览器(客户端)缓存页面。 浏览器缓存是基于URL进行缓存的,
    	//如果页面允许缓存,则在缓存时效前再次访问相同的URL,浏览器就不会再次发送请求到服务器端,而是直接从缓存中获取指定资源。
    	//而当URL 的末尾追加了随机数或时间戳,就会保证每次都会实际生成新请求且 Web 服务器不会尝试缓存来自服务器的响应。
        const a = `${backgroundImg}?timeStamp=` + (new Date());
        img.src = a
    
      }
    //绘画完成后,必须转化为img,否则移动端将会无法长按保存
    //必须等绘画完成后,才能够回调。如果直接使用canvas.toDataURL('image/png')转化,会导致出现分享图只有写死的文字,没有请求的图片和文字。会存在异步问题
      getUrlImg=(canvas)=>{   
        let dataImg = new Image()    
        try {
          dataImg.src = canvas.toDataURL('image/png')
        } catch (e) {
          console.log(e);
        }
        let urlImg = dataImg.src //urlImg为img路径
        this.setState({urlImg},()=>{ 
        })
      }
    

    实现:三、canvas更换imgs

    
    //最后必须将canvas隐藏,再替换为imgs,这样移动端才能长按保存
    //css中.canvasImg添加display:none隐藏画布
    //再使用canvas转化的img,并且将img的宽高设置为25%
    //因为为了提高清晰度,我是采用四倍图再压缩的方式来提高清晰度,所以img需要缩回25%
        <canvas ref='canvas' width={1200} height={1600} className={styles.canvasImg}/>//display:none
        //crossOrigin="Anonymous" 处理图片跨域问题
        <img src={this.state.urlImg} crossOrigin="Anonymous"/>//width:25%。height:25%
        div className={styles.shareTips}>长按保存,可分享至朋友圈</div>
    

    总结与优化

    难点在于:
    ①将canvas转化为base64格式图片,会导致图片跨域问题
    ②异步问题(图片还未加载,绘画就已经完成)
    ③背景透明的问题等等

    优化:
    ①清晰度:可以将canvas画成2-4倍图,转化为图片再压缩回50%-25%
    ②分享图加载速度:小程序二维码太阳码,背景图等页面加载阶段可以先请求,点击分享按钮可以直接绘画,减少请求时间长导致生成绘画慢问题,同时也可以避免二维码、背景图未加载完成,绘画就已经开始,导致画出来的分享图没有背景图、二维码的问题。

    有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

    展开全文
  • Android微信SDK实现分享

    万次阅读 热门讨论 2016-11-25 15:58:55
    用微信提供的SDK来实现分享,步骤如下: 1.从https://open.weixin.qq.com下载Android相关的jar包,将libammsdk.jar加入到项目中。 2. 微信分享的核心类: WechatShareManager.java package com.jackie.umeng.share; ...

    用微信提供的SDK来实现分享

    http://open.weixin.qq.com下载Android相关的jar包,将libammsdk.jar加入到项目中。

    微信分享的核心类,部分代码如下:

    WechatShareManager.java

    package com.jackie.umeng.share;
    
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.BitmapFactory;
    import android.util.Log;
    import android.widget.Toast;
    
    import com.tencent.mm.sdk.modelmsg.SendMessageToWX;
    import com.tencent.mm.sdk.modelmsg.WXImageObject;
    import com.tencent.mm.sdk.modelmsg.WXMediaMessage;
    import com.tencent.mm.sdk.modelmsg.WXTextObject;
    import com.tencent.mm.sdk.modelmsg.WXVideoObject;
    import com.tencent.mm.sdk.modelmsg.WXWebpageObject;
    import com.tencent.mm.sdk.openapi.IWXAPI;
    import com.tencent.mm.sdk.openapi.WXAPIFactory;
     
    /**
     * 实现微信分享功能的核心类
     * @author chengcj1
     *
     */
    public class WechatShareManager {
         
        private static final int THUMB_SIZE = 150;
        
        public static final int WECHAT_SHARE_WAY_TEXT = 1;   //文字
        public static final int WECHAT_SHARE_WAY_PICTURE = 2; //图片
        public static final int WECHAT_SHARE_WAY_WEBPAGE = 3;  //链接
        public static final int WECHAT_SHARE_WAY_VIDEO = 4; //视频
        public static final int WECHAT_SHARE_TYPE_TALK = SendMessageToWX.Req.WXSceneSession;  //会话
        public static final int WECHAT_SHARE_TYPE_FRENDS = SendMessageToWX.Req.WXSceneTimeline; //朋友圈
        
        private static WechatShareManager mInstance;
        private ShareContent mShareContentText, mShareContentPicture, mShareContentWebpag, mShareContentVideo;
        private IWXAPI mWXApi;
        private Context mContext;
         
        private WechatShareManager(Context context){
            this.mContext = context;
            //初始化数据
            //初始化微信分享代码
            initWechatShare(context);
        }
         
        /**
         * 获取WeixinShareManager实例
         * 非线程安全,请在UI线程中操作
         * @return
         */
        public static WechatShareManager getInstance(Context context){
            if(mInstance == null){
                mInstance = new WechatShareManager(context);
            }
            return mInstance;
        }
         
        private void initWechatShare(Context context){
        	if (mWXApi == null) {
        		mWXApi = WXAPIFactory.createWXAPI(context, WechatShareUtil.WECHAT_APP_ID, true);
        	}
            mWXApi.registerApp(WechatShareUtil.WECHAT_APP_ID);
        }
         
        /**
         * 通过微信分享
         * @param shareWay 分享的方式(文本、图片、链接)
         * @param shareType 分享的类型(朋友圈,会话)
         */
        public void shareByWebchat(ShareContent shareContent, int shareType){
            switch (shareContent.getShareWay()) {
            case WECHAT_SHARE_WAY_TEXT:
                shareText(shareContent, shareType);
                break;
            case WECHAT_SHARE_WAY_PICTURE:
                sharePicture(shareContent, shareType);
                break;
            case WECHAT_SHARE_WAY_WEBPAGE:
                shareWebPage(shareContent, shareType);
                break;
            case WECHAT_SHARE_WAY_VIDEO:
            	shareVideo(shareContent, shareType);
            	break;
            }
        }
         
        private abstract class ShareContent {
            protected abstract int getShareWay();
            protected abstract String getContent();
            protected abstract String getTitle();
            protected abstract String getURL();
            protected abstract int getPictureResource();
        }
         
        /**
         * 设置分享文字的内容
         * @author chengcj1
         *
         */
        public class ShareContentText extends ShareContent {
            private String content;
             
            /**
             * 构造分享文字类
             * @param text 分享的文字内容
             */
            public ShareContentText(String content){
                this.content = content;
            }
            
            @Override
            protected int getShareWay() {
                return WECHAT_SHARE_WAY_TEXT;
            }
     
            @Override
            protected String getContent() {
                return content;
            }
     
            @Override
            protected String getTitle() {
                return null;
            }
     
            @Override
            protected String getURL() {
                return null;
            }
     
            @Override
            protected int getPictureResource() {
                return -1;
            }
        }
        
        /*
         * 获取文本分享对象
         */
        public ShareContent getShareContentText(String content) {
        	if (mShareContentText == null) {
        		mShareContentText = new ShareContentText(content);
        	}
        	return (ShareContentText) mShareContentText;
        }
         
        /**
         * 设置分享图片的内容
         * @author chengcj1
         *
         */
        public class ShareContentPicture extends ShareContent {
            private int pictureResource;
            public ShareContentPicture(int pictureResource){
                this.pictureResource = pictureResource;
            }
            
            @Override
            protected int getShareWay() {
                return WECHAT_SHARE_WAY_PICTURE;
            }
            
            @Override
            protected int getPictureResource() {
                return pictureResource;
            }
             
            @Override
            protected String getContent() {
                return null;
            }
     
            @Override
            protected String getTitle() {
                return null;
            }
     
            @Override
            protected String getURL() {
                return null;
            }
        }
        
        /*
         * 获取图片分享对象
         */
        public ShareContent getShareContentPicture(int pictureResource) {
        	if (mShareContentPicture == null) {
        		mShareContentPicture = new ShareContentPicture(pictureResource);
        	}
        	return (ShareContentPicture) mShareContentPicture;
        }
         
        /**
         * 设置分享链接的内容
         * @author chengcj1
         *
         */
        public class ShareContentWebpage extends ShareContent {
            private String title;
            private String content;
            private String url;
            private int pictureResource;
            public ShareContentWebpage(String title, String content, String url, int pictureResource){
                this.title = title;
                this.content = content;
                this.url = url;
                this.pictureResource = pictureResource;
            }
            
            @Override
            protected int getShareWay() {
                return WECHAT_SHARE_WAY_WEBPAGE;
            }
     
            @Override
            protected String getContent() {
                return content;
            }
     
            @Override
            protected String getTitle() {
                return title;
            }
     
            @Override
            protected String getURL() {
                return url;
            }
     
            @Override
            protected int getPictureResource() {
                return pictureResource;
            }
        }
        
        /*
         * 获取网页分享对象
         */
        public ShareContent getShareContentWebpag(String title, String content, String url, int pictureResource) {
        	if (mShareContentWebpag == null) {
        		mShareContentWebpag = new ShareContentWebpage(title, content, url, pictureResource);
        	}
        	return (ShareContentWebpage) mShareContentWebpag;
        }
        
        /**
         * 设置分享视频的内容
         * @author chengcj1
         *
         */
        public class ShareContentVideo extends ShareContent {
        	private String url;
        	public ShareContentVideo(String url) {
        		this.url = url;
        	}
    
    		@Override
    		protected int getShareWay() {
    			return WECHAT_SHARE_WAY_VIDEO;
    		}
    
    		@Override
    		protected String getContent() {
    			return null;
    		}
    
    		@Override
    		protected String getTitle() {
    			return null;
    		}
    
    		@Override
    		protected String getURL() {
    			return url;
    		}
    
    		@Override
    		protected int getPictureResource() {
    			return -1;
    		}
        }
        
        /*
         * 获取视频分享内容
         */
        public ShareContent getShareContentVideo(String url) {
        	if (mShareContentVideo == null) {
        		mShareContentVideo = new ShareContentVideo(url);
        	}
        	return (ShareContentVideo) mShareContentVideo;
        } 
         
        /*
         * 分享文字
         */
        private void shareText(ShareContent shareContent, int shareType) {
            String text = shareContent.getContent();
            //初始化一个WXTextObject对象
            WXTextObject textObj = new WXTextObject();
            textObj.text = text;
            //用WXTextObject对象初始化一个WXMediaMessage对象
            WXMediaMessage msg = new WXMediaMessage();
            msg.mediaObject = textObj;
            msg.description = text;
            //构造一个Req
            SendMessageToWX.Req req = new SendMessageToWX.Req();
            //transaction字段用于唯一标识一个请求
            req.transaction = buildTransaction("textshare");
            req.message = msg;
            //发送的目标场景, 可以选择发送到会话 WXSceneSession 或者朋友圈 WXSceneTimeline。 默认发送到会话。
            req.scene = shareType;
            mWXApi.sendReq(req);
        }
     
        /*
         * 分享图片
         */
        private void sharePicture(ShareContent shareContent, int shareType) {
            Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), shareContent.getPictureResource());
            WXImageObject imgObj = new WXImageObject(bitmap);
             
            WXMediaMessage msg = new WXMediaMessage();
            msg.mediaObject = imgObj;
             
            Bitmap thumbBitmap =  Bitmap.createScaledBitmap(bitmap, THUMB_SIZE, THUMB_SIZE, true);
            bitmap.recycle();
            msg.thumbData = Util.bmpToByteArray(thumbBitmap, true);  //设置缩略图
             
            SendMessageToWX.Req req = new SendMessageToWX.Req();
            req.transaction = buildTransaction("imgshareappdata");
            req.message = msg;
            req.scene = shareType;
            mWXApi.sendReq(req);
        }
     
        /*
         * 分享链接
         */
        private void shareWebPage(ShareContent shareContent, int shareType) {
            WXWebpageObject webpage = new WXWebpageObject();
            webpage.webpageUrl = shareContent.getURL();
            WXMediaMessage msg = new WXMediaMessage(webpage);
            msg.title = shareContent.getTitle();
            msg.description = shareContent.getContent();
             
            Bitmap thumb = BitmapFactory.decodeResource(mContext.getResources(), shareContent.getPictureResource());
            if(thumb == null) {
                Toast.makeText(mContext, "图片不能为空", Toast.LENGTH_SHORT).show();
            } else {
                msg.thumbData = Util.bmpToByteArray(thumb, true);
            }
             
            SendMessageToWX.Req req = new SendMessageToWX.Req();
            req.transaction = buildTransaction("webpage");
            req.message = msg;
            req.scene = shareType;
            mWXApi.sendReq(req);
        }
        
        /*
         * 分享视频
         */
        private void shareVideo(ShareContent shareContent, int shareType) {
        	WXVideoObject video = new WXVideoObject();
    		video.videoUrl = shareContent.getURL();
    
    		WXMediaMessage msg = new WXMediaMessage(video);
    		msg.title = shareContent.getTitle();
    		msg.description = shareContent.getContent();
    		Bitmap thumb = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.send_music_thumb);
    //		BitmapFactory.decodeStream(new URL(video.videoUrl).openStream());
    		/**
    		 * 测试过程中会出现这种情况,会有个别手机会出现调不起微信客户端的情况。造成这种情况的原因是微信对缩略图的大小、title、description等参数的大小做了限制,所以有可能是大小超过了默认的范围。
    		 * 一般情况下缩略图超出比较常见。Title、description都是文本,一般不会超过。
    		 */
    		Bitmap thumbBitmap =  Bitmap.createScaledBitmap(thumb, THUMB_SIZE, THUMB_SIZE, true);
    		thumb.recycle();
          msg.thumbData = Util.bmpToByteArray(thumbBitmap, true);
            
    		SendMessageToWX.Req req = new SendMessageToWX.Req();
    		req.transaction = buildTransaction("video");
    		req.message = msg;
    		req.scene =  shareType;
    		mWXApi.sendReq(req);
        }
         
        private String buildTransaction(final String type) {
            return (type == null) ? String.valueOf(System.currentTimeMillis()) : type + System.currentTimeMillis();
        }
    }
    MainActivity.java

    package com.jackie.umeng.share;
    
    import com.jackie.umeng.share.WechatShareManager.ShareContentPicture;
    import com.jackie.umeng.share.WechatShareManager.ShareContentText;
    import com.jackie.umeng.share.WechatShareManager.ShareContentVideo;
    
    import android.app.Activity;
    import android.content.Context;
    import android.content.pm.PackageManager;
    import android.os.Bundle;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.widget.Button;
    import android.widget.Toast;
    
    public class MainActivity extends Activity implements OnClickListener {
    	private Button mShareText, mSharePicture, mShareVideo;
    	private WechatShareManager mShareManager; 
    	
    	private Context mContext;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		
    		mShareText = (Button) findViewById(R.id.share_text);
    		mSharePicture = (Button) findViewById(R.id.share_picture);
    		mShareVideo = (Button) findViewById(R.id.share_video);
    		mShareText.setOnClickListener(this);
    		mSharePicture.setOnClickListener(this);
    		mShareVideo.setOnClickListener(this);
    		
    		mContext = this;
    		
    		mShareManager = WechatShareManager.getInstance(mContext);
    	}
    
    	@Override
    	public void onClick(View v) {
    		if (!isWebchatAvaliable()) {
    			Toast.makeText(mContext, "请先安装微信", Toast.LENGTH_LONG).show();
    			return;
    		}
    		switch (v.getId()) {
    		case R.id.share_text:
    			ShareContentText mShareContentText = (ShareContentText) mShareManager.getShareContentText("微信文本分享");
    			mShareManager.shareByWebchat(mShareContentText, WechatShareManager.WECHAT_SHARE_TYPE_FRENDS);
    			break;
    		case R.id.share_picture:
    			ShareContentPicture mShareContentPicture = (ShareContentPicture) mShareManager.getShareContentPicture(R.drawable.share);
    			mShareManager.shareByWebchat(mShareContentPicture, WechatShareManager.WECHAT_SHARE_TYPE_FRENDS);
    		    break;
    		case R.id.share_video:
    			ShareContentVideo mShareContentVideo = (ShareContentVideo) mShareManager.getShareContentVideo("http://baidu.hz.letv.com/kan/agSlT?fr=v.baidu.com/");
    			mShareManager.shareByWebchat(mShareContentVideo, WechatShareManager.WECHAT_SHARE_TYPE_FRENDS);
    			break;
    		default:
    			break;
    		}
    	}
    	
    	private boolean isWebchatAvaliable() {
    		//检测手机上是否安装了微信
    		try {
    			getPackageManager().getPackageInfo("com.tencent.mm", PackageManager.GET_ACTIVITIES);
    			return true;
    		} catch (Exception e) {
    			return false;
    		}
    	}
    }




    展开全文
  • H5 webapp 实现分享功能

    千次阅读 2019-02-09 22:05:25
    HBuilder webapp 实现分享功能 在webapp要实现分享首要需要去社区开放平台进行申请 腾讯开放平台:https://open.tencent.com/ 在腾讯开放平台上的QQ与微信开放平台中申请创建应用,一般没什么要求都是可以通过的。 ...

    HBuilder webapp 实现分享功能

    在webapp要实现分享首要需要去社区开放平台进行申请

    腾讯开放平台:https://open.tencent.com/
    在腾讯开放平台上的QQ与微信开放平台中申请创建应用,一般没什么要求都是可以通过的。
    在这里插入图片描述
    应用审核通过后就可以获得分享的权限了
    在这里插入图片描述
    在SDK配置中填入申请到的应用ID等信息

    代码

    在 mui.plusReady中加入下面代码获取分享参数
    //分享参数 
     plus.share.getServices(function (s) {
          if (s && s.length > 0) {
              for (var i = 0; i < s.length; i++) {
                  var t = s[i];
                  shares[t.id] = t
              }
          }
      }, function () {}) 
    
    
    点击分享时调用下列方法
    function fxghyfw() {
        var ids = [{
            id: "qq"
        },
        {
            id: "weixin",
            ex: "WXSceneSession"
        },
        {
            id: "weixin",
            ex: "WXSceneTimeline"
        }],
            bts = [{
                title: "发送给QQ好友"
            },
            {
                title: "发送给微信好友"
            },
            {
                title: "分享到微信朋友圈"
            }];
            plus.nativeUI.actionSheet({
                cancel: "取 消",
                buttons: bts
            }, function (e) {
                var i = e.index;
                if (i > 0) {
                    var s_id = ids[i - 1].id;
                    var share = shares[s_id];
                    if (share) {
                        if (share.authenticated) {
                            shareMessage(share, ids[i - 1].ex)
                        } else {
                            share.authorize(function () {
                                shareMessage(share, ids[i - 1].ex)
                            }, function (e) {})
                        }
                    } else {}
                }
            })
    }
    
    function shareMessage(share, ex) {
        var msg = {
            extra: {
                scene: ex
            }
        };
        //分享的跳转链接
        msg.href = "";
        //分享的标题
        msg.title = "";
        //分享简介
        msg.content = "";
         //分享的跳转链接
        msg.thumbs = [""];
        share.send(msg, function () {
                mui.toast("感谢分享")
        }, function (e) {
            mui.toast("分享失败")
        })
    }
    
    焦旭涛    2019-02-09
    展开全文
  • Android轻松实现分享功能

    千次阅读 2017-08-21 20:55:51
    在Android开发中,要实现分享功能,可能首先想到第三方的ShareSDK,其实,想要分享一些图片,文本之类的完全没必要在App中集成第三方SDK,利用原声的SDK就可以轻松实现分享功能。
  • 小程序页面内按钮实现分享

    千次阅读 2019-07-31 09:41:33
    小程序页面内按钮实现分享 ,优惠劵分享实例 在需要分享的页面添加一下代码 <button open-type="share" data-index="1">fenxiang </button>//data-index为分享后传入的参数(例如优惠劵的标识,在分享...
  • 微信小程序实现分享到朋友圈

    万次阅读 2019-05-17 15:57:04
    微信小程序实现分享到朋友圈 微信小程序分享到朋友圈,微信官方没有提供开放接口,所以我们通过canva画布,生成一张图片,图片自带小程序码,用户通过识别二维码,达到分享小程序到朋友圈目的。 效果图: ...
  • 内嵌在app里的h5页面实现分享

    千次阅读 2019-07-03 17:25:12
    今天在做项目的时候, 有一个功能是内嵌在app里的h5页上有一个按钮,点击按钮要呼起微信的通讯录,进行分享,分享完成之后调后端接口记录分享次数。...实现分享,并且分享后有其他操作,所以app要提供一个协议供h...
  • 现在在做一个前端的静态页面,想通过点击页面上的图标实现分享朋友圈的功能,有什么方法或者demo吗?因为只是单纯的按钮分享,需要在平常的手机浏览器中打开的,求大神帮忙
  • 需求分析:在开发APP过程中,一般都需要实现分享转发,比如分享到QQ、微信等,这里我使用的是安卓系统自带的shareAPI,可以直接通过ResolveInfo获取手机中所有提供分享接口的应用,从而实现分享功能。 首先给大家看...
  • JS实现分享页面自动关闭效果

    千次阅读 2016-12-14 11:47:05
    JS实现分享页面自动关闭效果 通常我们在分享内容后,会有个新的窗口提示分享成功,然后倒计时关闭窗口。 要实现这个效果,我们要写两个页面: 先创建用于点击的页面 open_window.html 代码如下: ...
  • iOS ShareSDK实现分享——微信分享

    万次阅读 2016-04-12 11:22:08
    最近领导让添加ios 微信分享视频的功能,之前做的只有微信分享本地图片的功能。 查看官网并没有找到答案,后来在其官网论坛中http://bbs.mob.com/thread-20938-1-1.html 这里面发现新版的sdk(v3.2.1)中才添加的...
  • 微信小程序如何通过button按钮实现分享(转发)功能 导读:微信小程序通过button按钮实现分享(转发)功能 有两种方式,一种是页面内按钮分享,一种是菜单转发.下面具体为大家解答。... 微信小程序通过button按钮...
  • 之前写过一篇文章利用友盟等第三方实现分享到微信,微博和豆瓣等第三方社交站点.本次我们利用系统自带的分享功能去做,虽然简单,但对于以前类似友盟等第三方社交分享组件还没做的成熟的时候,也是一种好的选择.所以这里...
  • iOS利用系统分享实现分享视频功能

    千次阅读 2017-03-08 17:33:22
    要使用系统分享,由于之前没接触过,上网发现UIActivityViewController可以实现原生分享。UIActivityViewController可以分享文本、图片、链接, NSString *textToShare = @"文本内容"; UIImage *imageToShare = ...
  • 小程序实现分享朋友圈

    万次阅读 2018-06-07 11:13:15
    有过小程序基础的同学都应该知道,小程序是不能直接分享到朋友圈,...老规矩,先说说我的实现思路: 1、通过canvas组件把要分享出去的东西画出来 2、通过saveImageToPhotosAlbum方法把canvas生成的画布转成图片保...
  • javascript实现分享功能

    千次阅读 2018-10-30 12:26:40
    禁用 google、twitter、facebook 并设置分享的描述3.2.2. 设置微信二维码标题 使用的是一个插件share.js 因为我写的是静态网页,所以直接下载源文件,然后引用到项目中。引用cdn可以在这里获取cdnjs-share.js 下载...
  • 手机浏览器唤起微信实现分享

    万次阅读 热门讨论 2018-01-18 14:29:51
    在网上看了很多,都说APP能唤起微信,手机网页实现不了。也找了很多都不能直接唤起微信。总结出来一个可以直接唤起微信的。适应手机qq浏览器和uc浏览器。下面上代码,把这些直接放到要转发的页面里就可以了:html...
  • Android实现分享内容到微信朋友圈

    万次阅读 2014-05-29 12:15:50
    由于需求,要实现在应用中实现分享文字+图片到微信朋友圈。在网上找了一些资料,总结如下: 思路 1.使用android的intent实现应用程序之间的通信,将信息通过intent传递给微信(文章后面资源链接中有案例)。这种方式...
  • webApp如何实现分享功能(微信端)

    千次阅读 2017-05-27 09:18:20
    webApp实现分享功能首先,在微信的右上角公众号名称->功能设置->js接口安全域名首先引入:微信接口js,http://res.wx.qq.com/open/js/jweixin-1.0.0.js其次,对分享进行一个配置:wx.config({ debug: true, appId:...
  • Android通过Url传递数据,实现分享功能 项目中要实现分享功能,因为要实时分享所以不能和server端进行数据的实时交互。所以用Url来传递数据,先把数据用一个对象封装起来,把对象通过gson转为json数据,但是在Url...
  • Android 如何实现分享图片功能

    千次阅读 2011-11-29 09:22:33
    对于图片,如何实现分享功能,请参阅下面的代码: // 分享照片 public void SharePhoto(String photoUri,final Activity activity) { Intent shareIntent = new Intent(Intent.ACTION_SEND); File file = new...
  • js实现分享功能

    千次阅读 2017-11-20 16:50:43
    分享到新浪微博 function shareToXl(title,url,picurl){ var sharesina='http://v.t.sina.com.cn/share/share.php?title="+title+"&url="+url; var top = (window.outerHeight-505)/2; var ...
  • 网页用JS可以实现分享微信和朋友圈的功能吗? 怎么写? 网页用JS可以实现分享微信和朋友圈的功能吗? 怎么写?

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 974,919
精华内容 389,967
关键字:

如何实现分享