apicloud常用分享方法


app中經常會有分享的功能,不管是分享商品還是文字還是圖片或者是發送給微信好友扣扣好友,一下做一總結。

分享的樣式(分享所有的樣式模塊):MNActionButton。

在apicloud 中添加這個模塊,不需要再config 中配置這個模塊,但是如果是真機調試需要自定義雲編譯一下。

效果圖展示:此模塊綜合效果還是比較好的,建議使用此模塊

一、使用方法

<span tapmode onclick="fnOpen()"> Open</span>
<span tapmode onclick="fnClose()"> Close </span>
<span tapmode onclick="fnHide()"> Hide </span>
<span tapmode onclick="fnShow()"> Show </span>

// widget://image/btn/iconfont-cancel.png 路徑解釋,實際就是文件根目錄下image文件夾下的 btn 文件夾下的圖片
var MNActionButton;
        apiready = function() {
            MNActionButton = api.require('MNActionButton');
        };
        function fnOpen() {
            MNActionButton.open({
                layout : {
                    row : 2, //(可選項)數字類型;每屏顯示菜單按鈕的行數;默認:2
                    col : 3, //(可選項)數字類型;每屏顯示菜單按鈕的列數;默認:3
                    rowSpacing : 10, //(可選項)數字類型;行與行之間的距離;默認:10
                    colSpacing : 10, //(可選項)數字類型;列與列之間的距離;默認:10
                    offset : 0 //(可選項)數字類型;整個菜單底部距離所屬 window 底部的距離,只能為正整數;默認:0
                },
                animation : true, //(可選項)布爾類型;彈出和隱藏菜單時是否帶彈出動畫效果,true|false;默認:true
                autoHide : true, //(可選項)布爾類型;點擊菜單按鈕后是否自動隱藏菜單,true|false;默認:true
                styles : {
                    maskBg : 'rgba(0,0,0,0.2)', //(可選項)字符串類型;遮罩層背景,支持 rgb,rgba,#,img;默認:rgba(0,0,0,0.2)
                    bg : '#fff', //(可選項)字符串類型;菜單有效區域背景,支持 rgb,rgba,#,img;默認:#fff
                    cancelButton : {//(可選項)JSON 對象類型,取消按鈕設置
                        size : 44, //(可選項)數字類型;底部取消按鈕的高和寬;默認:44
                        bg : '#fff', //(可選項)字符串類型;取消按鈕的 100% 寬度的背景,支持rgb,rgba,#,img;默認:'#fff'
                        icon : 'widget://image/btn/iconfont-cancel.png', //(可選項)字符串類型:取消按鈕的圖標,要求本地路徑(widget://、fs://);默認:默認X型圖標
                    },
                    item : {//(可選項)JSON 對象類型,菜單按鈕設置
                        titleColor : '#848484', //(可選項)字符串類型;菜單按鈕文字顏色,支持 rgb,rgba,#;默認:#848484
                        titleHighlight : 'dd2727', //(可選項)字符串類型;菜單按鈕文字高亮顏色,支持 rgb,rgba,#;默認:同 titleColor
                        titleSize : 12,                 //(可選項)數字類型;菜單按鈕文字大小,同時也是文字欄所占高度,值為 0 時不顯示文字欄;默認:12
                    },
                    indicator : {//(可選項)JSON 對象類型;頁標指示器樣式,若不傳則不顯示該指示器
                        color : '#c4c4c4', //(可選項)字符串類型;其它頁指示器顏色;支持rgb、rgba、#;默認:'#c4c4c4'
                        highlight : '#9e9e9e' //(可選項)字符串類型;當前頁指示器顏色;支持rgb、rgba、#;默認:'#9e9e9e'
                    }
                },
                items : [{//JSON 對象類型;一個菜單項的設置信息
                    icon : 'widget://image/iconfont-qq.png', //(可選項)字符串類型;一個菜單按鈕的圖標,支持 rgb,rgba,#,img;默認:#fff
                    title : 'QQ好友' //字符串類型;菜單按鈕的文字;默認:未設置時不顯示,但文字欄仍按 titleSize 設置顯示高度
                }, {
                    icon : 'widget://image/iconfont-kongjian.png',
                    highlight : 'widget://image/iconfont-kongjian.png',
                    title : 'QQ空間'
                }, {
                    icon : 'widget://image/iconfont-weixin.png',
                    highlight : 'widget://image/iconfont-weixin.png',
                    title : '微信好友'
                }, {
                    icon : 'widget://image/iconfont-pengyouquan.png',
                    highlight : 'widget://image/iconfont-pengyouquan.png',
                    title : '朋友圈'
                }, {
                    icon : 'widget://image/iconfont-weibo.png',
                    highlight : 'widget://image/iconfont-weibo.png',
                    title : '微博'
                }, {
                    icon : 'widget://image/iconfont-qitagengduoe1e4e5.png',
                    highlight : 'widget://image/iconfont-qitagengduoe1e4e5.png',
                    title : '更多'
                }]
            }, function(ret, err) {
                if (ret) {
                    alert(JSON.stringify(ret));
                } else {
                    alert(JSON.stringify(err));
                }
            });
        }

        function fnClose() {
            MNActionButton.close();
        };
        function fnHide() {
            MNActionButton.hide();
        };
        function fnShow() {
            MNActionButton.show();
        };

二、分享(以微信距離)

<span tapmode onclick="isInstalled()"> isInstalled() </span>
        <span tapmode onclick="shareText()"> shareText() </span>
        <span tapmode onclick="shareImage('session')"> shareImage('session') </span>
        <span tapmode onclick="shareImage('timeline')"> shareImage('timeline') </span>
        <span tapmode onclick="shareImage('favorite')"> shareImage('favorite') </span>
        <span tapmode onclick="shareMusic('session')"> shareMusic('session') </span>
        <span tapmode onclick="shareMusic('timeline')"> shareMusic('timeline') </span>
        <span tapmode onclick="shareMusic('favorite')"> shareMusic('favorite') </span>
        <span tapmode onclick="shareVideo('session')"> shareVideo('session') </span>
        <span tapmode onclick="shareVideo('timeline')"> shareVideo('timeline') </span>
        <span tapmode onclick="shareVideo('favorite')"> shareVideo('favorite') </span>
        <span tapmode onclick="shareWebpage('session')"> shareWebpage('session') </span>
        <span tapmode onclick="shareWebpage('timeline')"> shareWebpage('timeline') </span>
        <span tapmode onclick="shareWebpage('favorite')"> shareWebpage('favorite') </span>
        <span tapmode onclick="shareMutableImg()"> shareMutableImg (此接口僅Android可用)</span>
function isInstalled() {
            wx.isInstalled(function(ret, err) {
                if (ret.installed) {
                    alert(JSON.stringify(ret))
                } else {
                    alert(JSON.stringify(err))
                }
            });
        }

        function shareText() {
            wx.shareText({
                apiKey : '',
                scene : 'timeline',
                text : '我分享的文本'
            }, function(ret, err) {
                if (ret.status) {
                    alert(JSON.stringify(ret))
                } else {
                    alert(JSON.stringify(err))
                }
            });
        }

        function shareImage(Vscene) {
            wx.shareImage({
                apiKey : '',
                scene : Vscene,
                thumb : 'widget://res/iconfont-touxiang.png',
                contentUrl : "widget://res/8.jpg"
            }, function(ret, err) {
                if (ret.status) {
                    alert(JSON.stringify(ret))
                } else {
                    alert(JSON.stringify(err))
                }
            });
        }

        function shareMusic(Vscene) {
            wx.shareMusic({
                apiKey : '',
                scene : Vscene,
                title : '分享音樂',
                description : '分享音樂的描述',
                thumb : 'widget://res/iconfont-touxiang.png',
                musicDataUrl : "http://docs.apicloud.com/test/m.mp3",
                contentUrl : 'http://www.baidu.com'
            }, function(ret, err) {
                if (ret.status) {
                    alert(JSON.stringify(ret))
                } else {
                    alert(JSON.stringify(err))
                }
            });
        }

        function shareVideo(Vscene) {
            wx.shareVideo({
                apiKey : '',
                scene : Vscene,
                title : '分享視頻',
                description : '分享視頻的描述',
                thumb : 'widget://res/iconfont-touxiang.png',
                contentUrl : 'http://www.youku.com/'
            }, function(ret, err) {
                if (ret.status) {
                    alert(JSON.stringify(ret))
                } else {
                    alert(JSON.stringify(err))
                }
            });
        }

        function shareWebpage(Vscene) {
            wx.shareWebpage({
                apiKey : '',
                scene : Vscene,
                title : '分享網頁的標題',
                description : '分享網頁的描述',
                thumb : 'widget://res/iconfont-touxiang.png',
                contentUrl : 'http://www.apicloud.com'
            }, function(ret, err) {
                if (ret.status) {
                    alert(JSON.stringify(ret))
                } else {
                    alert(JSON.stringify(err))
                }
            });
        }

        function shareMutableImg() {
            wx.shareMutableImg({
                description : 'weixin share image test description',
                imgs : ['widget://res/girl.png', 'widget://res/8.jpg', 'widget://res/6.jpg']
            });
        }

以上方法包括了微信分享給朋友、朋友圈等功能。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM