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

時間  2019-11-20
標籤 微商 分享 包括 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須要接收Base6四、 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.jsvue

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: '密碼可用於登陸、轉賬、提現等，爲保證賬戶安全，請設置密碼'
    }]
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程