微商城分享 包括app分享 微信分享

<template>
    <div class="spr">
        <img src="../../assets/images/activity/shier/shier1.jpg" alt="" srcset="">
        <img src="../../assets/images/activity/shier/shier2.jpg" alt="" srcset="">
        <img src="../../assets/images/activity/shier/shier3.jpg" alt="" srcset="">
        <img src="../../assets/images/activity/shier/shier4.jpg" @click="goProduct('49a586a43d6a4768ac2dbb64052b72b0')" alt="" srcset="">
        <img src="../../assets/images/activity/shier/shier5.jpg" alt="" srcset="">
        <img src="../../assets/images/activity/shier/shier6.jpg" alt="" srcset="">
        <div class="btm" @click="goProduct('49a586a43d6a4768ac2dbb64052b72b0')">
            立即购买
        </div>
    </div>
</template>

<script>
import config from '../../config.js'
import jumpNative from '../../utils/JumpNative.js'
import ShareService from '../../services/ShareService'
export default {
    data() {
        return {
        }
    },
    mounted() {

    },
    created() {
        this.init();
    },
    mounted() {
        this.fontSize = document.body.clientWidth / 11.25
        window.addEventListener('scroll', this.scrollBar, true);
    },
    destroyed () {
        window.removeEventListener('scroll', this.scrollBar, true);
    },
    methods: {
        init(){
            if(!jumpNative.isAppH5()){
                ShareService.shareProduct({
                    name: '国粹洗沐原浆 唤活秀发之美',
                    desc: '秘方配制 十二味植物熬制原浆 无硅油 无化学成分 呵护您的秀发  体验猛戳',
                    shareUrl: window.location.href,
                    thumbUrl: config.app.shier,
                });
            }else{
                jumpNative.topRightShare(1,config.app.shier,'国粹洗沐原浆 唤活秀发之美','秘方配制 十二味植物熬制原浆 无硅油 无化学成分 呵护您的秀发  体验猛戳')
            }
        },
        //跳转商品详情
        goProduct(skuId){
            if(!jumpNative.isAppH5()){
                console.log(config.baseUrl+'p/'+skuId+'/'+this.$route.query.inviteCode);
                location.href=config.baseUrl+'p/'+skuId+'/'+this.$route.query.inviteCode
            }else{
                jumpNative.jumpProduct(skuId)
            }
        },
    },
    beforeCreate: function() {
        document.getElementsByTagName("body")[0].className="body-sp01";
    },
    beforeDestroy: function() {
        document.body.removeAttribute("class","body-sp01");
    }
}
</script>
<style lang="less">
.body-sp01{
    background: #fff;
}
</style>
<style scoped>
.spr {
    padding-bottom: 1.45rem;
}
.spr img {
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
    width: 100%;
}
.spr .btm {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.45rem;
    line-height: 1.45rem;
    text-align: center;
    background: #ff4646;
    color: #fff;
    font-size: 0.48rem;
}
</style>

jumpNative

 

/**
 *JavaScript调用协议
 */

//判断iOS还是Android
const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

//判断是否是微信浏览器的函数
function isWeiXin() {
    //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
    var ua = window.navigator.userAgent.toLowerCase();
    //通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

function GetUrlParam(paraName) {
    var url = document.location.toString();
    var arrObj = url.split("?");

    if (arrObj.length > 1) {
        var arrPara = arrObj[1].split("&");
        var arr;

        for (var i = 0; i < arrPara.length; i++) {
            arr = arrPara[i].split("=");

            if (arr != null && arr[0] == paraName) {
                return arr[1];
            }
        }
        return "";
    } else {
        return "";
    }
}

export default {
    //判断是否是APP内嵌H5页
    isAppH5() {
        let ddm_from = parseInt(GetUrlParam("ddm_from"))
        let isApp = (ddm_from === 1 || ddm_from === 0) ? true : false
        return isApp && !isWeiXin()
    },
    //判断是否Android
    checkAppType() {
        if (isAndroid) {
            return 'android'
        } else if (isiOS) {
            return 'ios'
        }
    },
    //跳转到产品详情
    jumpProduct(skuId) {
        if (isAndroid) {
            DDMallBridge.openProduct(skuId);
        } else if (isiOS) {
            window.webkit.messageHandlers.openProduct.postMessage(skuId)
        } else {
            console.log("非iOS，Android")
        }
    },
    //跳转到新的H5页面
    jumpH5(url) {

        if (isAndroid) {
            DDMallBridge.openHtml(url);
        } else if (isiOS) {
            window.webkit.messageHandlers.openHtml.postMessage(url);
        } else {
            console.log("非iOS，Android")
        }
    },

    /*
     * 跳转到新的H5页面
     * whiteStyle 白色样式，0：不启用；1：启用
     * titleBarColor 标题栏背景颜色
     * url 要打开的url
     *
     */
    openColorHtml(whiteStyle, titleBarColor, url) {
        if (isAndroid) {
            DDMallBridge.openColorHtml(whiteStyle, titleBarColor, url);
        } else if (isiOS) {
            window.webkit.messageHandlers.openColorHtml.postMessage({
                "whiteStyle": whiteStyle,
                "titleBarColor": titleBarColor,
                "url": url
            });
        }
    },
    /*
     * 设置分享类型
     * shareType 0 不显示 1 分享当前页面URL，带默认分享元素 2 每日上新，App使用常量三要素+URL分享
     *
     */
    setTitleBarShareType(shareType, imgUrl, title, desc) {
        if (isAndroid) {
            DDMallBridge.setTitleBarShareType(shareType, imgUrl, title, desc);
        } else if (isiOS) {
            window.webkit.messageHandlers.setTitleBarShareType.postMessage({
                "shareType": shareType,
                "imgUrl": imgUrl,
                "title": title,
                "desc": desc,
            });
        }
    },
    //弹出提示
    toast(status, message) {
        if (isAndroid) {
            DDMallBridge.toast(status, message);
        } else if (isiOS) {
            window.webkit.messageHandlers.toast.postMessage({ status: status, message: message });
        } else {
            console.log("非iOS，Android")
        }
    },
    getOAuth() {
        if (isAndroid) {
            DDMallBridge.getOAuth()
        } else if (isiOS) {
            //window.webkit.messageHandlers.toast.postMessage({status:0,message:'asd'});
            window.webkit.messageHandlers.getOAuth.postMessage('1')
        } else {
            console.log("非iOS，Android")
        }
    },
    //调用分享
    shareProduct(skuId) {
        if (isAndroid) {
            DDMallBridge.shareProductWithProfit(skuId);
        } else if (isiOS) {
            window.webkit.messageHandlers.shareProductWithProfit.postMessage(skuId);
        } else {
            console.log("非iOS，Android")
        }
    },
    //控制标题栏透明度
    setTitleBarAlpha(alpha) {
        if (isAndroid) {
            DDMallBridge.setTitleBarAlpha(alpha);
        } else if (isiOS) {
            window.webkit.messageHandlers.setTitleBarAlpha.postMessage(alpha);
        } else {
            console.log("非iOS，Android")
        }
    },
    //控制标题栏资源样式
    setTitleBarDarkRes(isDark) {
        if (isAndroid) {
            DDMallBridge.setTitleBarDarkRes(isDark);
        } else if (isiOS) {
            window.webkit.messageHandlers.setTitleBarDarkRes.postMessage(isDark);
        } else {
            console.log("非iOS，Android")
        }
    },
    //跳转活动  1: 0元领面膜。
    jumpActivity(type) {
        if (isAndroid) {
            DDMallBridge.jumpActivity(type);
        } else if (isiOS) {
            window.webkit.messageHandlers.jumpActivity.postMessage(type);
        }
    },
    //跳转到我的粉丝 mode 模式(0:全部粉丝;1:直属粉丝;2:团队粉丝)
    jumpMyFans(mode) {
        console.log(mode)
        if (isAndroid) {
            console.log('跳转到我的粉丝:isAndroid,mode '+mode)
            DDMallBridge.jumpMyFans(mode);
        } else if (isiOS) {
            console.log('跳转到我的粉丝:isiOS,mode '+mode)
            window.webkit.messageHandlers.jumpMyFans.postMessage(mode);
        }
    },
    //1. 分享当前页面URL，带默认分享元素   2. 0元领面膜，App使用常量4要素，URL为0元领面膜的着陆页
    zeroShare(shareType, imgUrl, title, desc) {
        if (isAndroid) {
            console.log({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc });
            DDMallBridge.shareToWX(shareType, imgUrl, title, desc);
        } else if (isiOS) {
            console.log({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc });
            window.webkit.messageHandlers.shareToWX.postMessage({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc });
        } else {
            console.log("非iOS，Android" + shareType, imgUrl, title, desc);
        }
    },
    shareDownload(shareType, imgUrl, title, desc, link) {
        if (isAndroid) {
            DDMallBridge.shareToWX(shareType, imgUrl, title, desc, link);
        } else if (isiOS) {
            console.log({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc });
            window.webkit.messageHandlers.shareToWX.postMessage({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc, "shareUrl": link });
        } else {
            console.log("非iOS，Android" + shareType, imgUrl, title, desc);
        }
    },
    //右上角分享
    topRightShare(shareType, imgUrl, title, desc) {
        if (isAndroid) {
            DDMallBridge.setTitleBarShareType(shareType, imgUrl, title, desc);
        } else if (isiOS) {
            console.log({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc });
            window.webkit.messageHandlers.setTitleBarShareType.postMessage({ "shareType": shareType, "imgUrl": imgUrl, "title": title, "desc": desc });
        } else {
            console.log("非iOS，Android" + shareType, imgUrl, title, desc);
        }
    },
    //结束上拉更多 hasMore 是否有更多(1:存在更多数据；0:没有更多数据)
    finishLoadMore(hasMore) {
        if (isAndroid) {
            DDMallBridge.finishLoadMore(hasMore);
        } else if (isiOS) {
            window.webkit.messageHandlers.finishLoadMore.postMessage(hasMore);
        }
    },
    //设置首页快捷导航数据
    setHomeShortcut(jsonArray) {
        if (isAndroid) {
            DDMallBridge.setHomeShortcut(jsonArray);
        } else if (isiOS) {
            window.webkit.messageHandlers.setHomeShortcut.postMessage(jsonArray);
        }
    },
    //分享页面截图:0. 保存到本地1. 分享到微信2. 传递给H5，H5需要接收Base64、 URL encoded后的图片数据,JS方法vue.onScreenShot(int status,String base64)
    screenShotApp(type){
        console.log('分享页面截图 type: '+type);
        if (isAndroid) {
            DDMallBridge.screenshot(type);
        } else if (isiOS) {
            window.webkit.messageHandlers.screenshot.postMessage(type);
        }
    }
}

ShareService

import Config from '../config.js';
export default {
    initShare() {
        if (window.wx === undefined) return;
        let title = Config.app.name;
        let desc = Config.app.desc;
        let imgUrl = Config.app.Logo;
        let link = Config.app.shareUrl;
        this.doShare(title, desc, link, imgUrl);
    },
    shareProduct(product) {
        if (window.wx === undefined) return;
        let title = product.name;
        let desc = product.desc||Config.app.desc;
        let imgUrl = product.thumbUrl || Config.app.Logo;
        let link = product.shareUrl;
        this.doShare(title, desc, link, imgUrl);
    },
    shareCoupon(title, desc, link, imgUrl) {
        if (window.wx === undefined) return;
        imgUrl = imgUrl || Config.app.icon;
        this.doShare(title, desc, link, imgUrl);
    },
    doShare(title, desc, link, imgUrl) {
        // WeChatService.initConfig(['onMenuShareTimeline', 'onMenuShareAppMessage', 'showMenuItems']);
        wx.ready(() => {
            wx.showMenuItems({
                menuList: [
                    'menuItem:share:appMessage', // 发送给朋友
                    'menuItem:share:timeline', // 分享到朋友圈
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                ]
            });
            setTimeout(() => {
                //分享到朋友圈
                wx.onMenuShareTimeline({
                    title,
                    desc,
                    link,
                    imgUrl,
                    success: function () {
                        console.log('分享成功 title: '+title+' desc:'+desc);
                    },
                    fail: (err) => {
                        console.log(err);
                        error && error(err);
                    }
                    });
                //分享给朋友
                wx.onMenuShareAppMessage({
                    title,
                    desc,
                    link,
                    imgUrl ,
                    success: function () {
                        console.log('分享成功 title: '+title+' desc:'+desc);
                    },
                    fail: (err) => {
                        console.log(err);
                        error && error(err);
                    },
                    complete:(complete)=>{
                        console.log(JSON.stringify(complete));
                    }
                })
            }, 60)
        });
        wx.error(function(res){
            console.log('wx.error:');
            console.log(JSON.stringify(res));
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    }
}

config.js

var dev_env = require('../config/dev.env');
var test_env = require('../config/test.env');
var pro_env = require('../config/prod.env');
var baseUrl = process.env.BASE_API;//研发后台接口
var h5Url = process.env.H5_URL;//静态H5地址的主站
var wechatUrl = process.env.WECHAT_URL;//微商城URL 用作APP里跳转用
var Logo = process.env.BASE_LOGO;//logo
var Zero = process.env._zero;//0元购商品
export default {
    h5Url:h5Url,
    wechatUrl:wechatUrl,
    baseUrl: baseUrl,
    apiPrefix: baseUrl + 'ddmallapi',
    Logo:Logo,
    Zero:Zero,
    app: {
        name: '',
        desc: '',
        company: '',
        Logo: 'https://oss.dodomall.com/logo/logo.png',
        url: baseUrl,
        version: 'v1.0',
        csphone: '4000063037',
        //普通用户的邀请有奖
        normalInviteUrl: wechatUrl + 'tobeowener',
        //店主用户的邀请有奖
        vipInviteUrl: wechatUrl + 'beowener',
        //关注我们
        followUrl: wechatUrl + 'share-qrcode',
        //注册协议
        agreementUrl: wechatUrl + 'register-protocol',
        //隐私协议
        privacyUrl: wechatUrl + 'privacy-protocol',
        //常见问题
        commonIssues: wechatUrl + 'mine/common-issues',
        //常见问题
        newComerGuideUrl: wechatUrl + 'mine/newcomer-guide',

        //logo
        //新手指引
        newcomerGuide: 'https://oss.dodomall.com/app/newcomerLogo.png',
        //关于我们
        aboutUs: 'https://oss.dodomall.com/app/newcomerLogo.png',
        //成为店主
        joinUrl:'https://oss.dodomall.com/app/giftLogo.png',
        //邀请有奖
        inviteLogo: 'https://oss.dodomall.com/app/inviteLogo.png',
        //每日上新
        dailyNew:'https://oss.dodomall.com/wap/meirishangxin.png',
        //新人专享
        newComer:'https://oss.dodomall.com/wap/xinrenzhuanxiang.png',
        //佣金翻倍
        commssion:'https://oss.dodomall.com/wap/yongjinfanbei.png',
        //母婴活动
        mom:'https://oss.dodomall.com/app/2019-01/mom-body.jpg',
        qingrenjie:'http://oss.dianduoduo.store/product/2019-02/20190213063815268WQ.png',
        spring: 'https://oss.dodomall.com/app/2019-01/activity-beauty.jpg',
        spr: 'https://oss.dodomall.com/app/2019-01/activity-buy.jpg',
        //0元领
        fansActivity:'https://oss.dodomall.com/activity/activity1/activity1_1.png'
    },
    enableAlipay: true,
    enableWepay: true,
    offlinePayMinMoney: 9900,
    withdrawMin: 1,
    withdrawMax: 1000000,
    agreementName: '店多多用户服务协议',
    refundReasons: ['拍错了 / 信息填写错误', '不想要了', '其它'],
    refundGoodsReasons: ['拍错了 / 信息填写错误', '不想要了', '其它'],
    expressNames: ['圆通快递', '申通快递', '顺丰快递', '韵达快递', '德邦物流', '中通快递', '百世快递', '邮政包裹', 'EMS', '邮政国际'],
    toast: [{
        id: 'noLogin',
        title: '你还未设置密码',
        message: '密码可用于登录、转帐、提现等，为保证帐户安全，请设置密码'
    }]
}