【5+App】第三方分享的思路

時間 2019-11-08

標籤 5+App 第三方分享思路简体版

原文原文鏈接

你們好

2016-12-25 聖誕節這天我失戀了html

現實

1）App能分享一篇文章，能分享一個活動等，到第三方平臺
2）展現相應的標題、內容以及連接
3）進入相應的連接能夠喚醒App，不存在客戶端時展現App下載頁
4）被喚醒App後，展現相應的分享詳細內容vue

1

利用5+的第三方分享，能夠把想分享的信息發送到第三方平臺
相關文章：
分享插件開發指南
 在Dcould社區搜索【分享】相關文章html5

我也簡單的寫過一個es6版本sharegit

let __shares = (function () {
    let shares
    return newShares => {
        if (newShares) {
            shares = newShares
        }
        return shares
    }
})()

let __shareKv = {
    wxhy: 'WXSceneSession',     //微信好友
    wxpyq: 'WXSceneTimeline',   //微信朋友圈
    qq: 'qq',                   //QQ好友
    sinaweibo: 'sinaweibo',     //新浪微博
}



class Share {

    constructor(type, fn, op, context) {
        this.config = {
            type, //分享平臺
            fn, //結果回調
            op, //須要分享的內容配置
            context, //上下文
        }
        this._initCallback()
        this.start()
    }

    _initCallback() {
        this.ShareCallBack = function (...arg) {
            return this.config.fn.apply(this.config.context, arg)
        }
    }

    start() {
        this.getService(this.config.type, (idShare) => {
            this.sendShare(idShare, () => {
                this.ShareCallBack(null, idShare)
            })
        })
    }

    sendShare(share, sendCallBack) {
        let message = this._getShareInfo(share)
        share.send(message, () => {
            sendCallBack()
        }, (err) => {
            this.ShareCallBack(err, share)
        })
    }

    //分享信息
    _getShareInfo(share) {

        let op = {
            extra: {
                scene: __shareKv[this.config.type]
            },
            href: this.config.op.href,
            title: this.config.op.title, //
            content: this.config.op.content, //

            pictures: [this.config.op.img],
            thumbs: [this.config.op.img],
        }

        if (!op.href) {
            delete op.title
            delete op.content
        }
        return op
    }


    //獲取受權
    _getAuth(share, authCallBack) {
        if (!share.authenticated) {
            share.authorize(() => {
                authCallBack()
            }, (...err) => {
                return this.ShareCallBack.apply(null, err)
            });
        } else {
            authCallBack()
        }
    }

    //經過id 獲取服務
    _getService(id, CallBack) {
        if(!!~id.toString().indexOf('wx')){
            id = 'weixin'
        } 
        let shares = __shares()
        for (let i in shares) {
            console.log(JSON.stringify(shares[i]))
            if (id === shares[i].id) {
                CallBack && CallBack(shares[i])
                return shares[i]
            }
        }
    }


    //獲取服務  
    getService(id, Callback) {
        if (__shares()) {
            return this._getService(id, Callback)
        }
        this._getHtml5PlusServices((data) => {
            __shares(data)
            this._getService(id, Callback)
        })
    }


    //獲取設備分享服務列表
    _getHtml5PlusServices(CallBack) {
        plus.share.getServices((services) => {
            CallBack(services)
        }, (err) => {
            this.ShareCallBack(err, null)
        })
    }

}

var sendShare = function (...arg) {
    return new Share(...arg)
}

export {
    sendShare
}

2

大概這樣用es6

//qq wxhy(微信好友) wxpyq(微信朋友圈) sinaweibo
                    sendShare('qq',function(err, data){
                        if(err){
                            data = err
                        }
                        console.log(JSON.stringify(data))
                    },{
                        img: '_www/img/vhp.png',//圖片地址
                        href: 'https://github.com/zhaomenghuan/vue-html5plus',//分享的超連接
                        title: '分享標題',//當且僅當href存在時有效
                        content: '分享內容'//當且僅當href存在時有效
                    })

ok，在這裏我並無配置分享的appkey，由於我用HBuilder的真機測試，你們若是打包發佈時請一一填補github