当时做这个这个效果真把人给*了,网上能搜到的基本是微信页面的分享,特征是方法是wx.**开头,不适用于app内。思路都是一样的,先调取服务(这里使用plus的内置方法),再发送分享请求

<template>

    <div class="" id="share" v-for="(items,index) in strands" :key="index" @click="wxShare(index)">   //使用循环,渲染出点击分享朋友圈和好友的按钮,方便获取index。一切从这开始的
             <img v-if="index==0" src="../assets/img/gg/wChart.png" alt="">
             <img v-if="index==1" src="../assets/img/gg/circle.png" alt="">
        <span>{{items.flag}}</span>  
    </div>
</template>
data(){
        return{
            strands:[{flag:'微信好友'},{flag:'朋友圈'}]
        }
    },
methods:{
  wxShare(index){

            let msg = {}
                msg.type='web'                                                             //这个要加,至于为什么咱也不敢问
                msg.title='XX软件名'
                msg.content='这里填一些分享信息,是在好友还未点进去看到的信息'
                msg.thumbs=['../assets/img/alert/logo.png']                 //打包进app的本地applogo
                msg.href='https://www.baidu.com/'                              //好友点进去需要跳转的连接
            if(index==0){
                msg.extra={scene:"WXSceneSession"}                      //好友分享
            }else if(index==1){
                msg.extra={scene:"WXSceneTimeline"}                     //朋友圈分享
            }
           plus.share.getServices(function(e) {                            //移动端获取服务,这里的plus方法只能在移动端有效,在pc端运行会报plus错误,下一步就该打包检验
              this.shareData = e                               //这个回调函数的参数 e 就包含了所有对象的数组
              for(var i in e){        
                  if('weixin' == e[i].id){
                      this.sharewx = e[i]  
                  }
              }
          })
           // 使用send发起分享
            this.sharewx.send(msg,function(){

     alert('分享成功')                              //这里有个问题就是这个方法是异步的,一旦app内需要在分享成功或失败后发起请求的话需要解决异步问题

          },function(error) {
               alert('分享失败')
       })

注:如果失败应该是未获取授权,请先实现微信登录

webapp项目vue框架点击按钮实现微信好友分享,朋友圈分享的更多相关文章

  1. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  2. 在小程序内点击按钮分享H5网页给好友或者朋友圈

    在小程序内点击按钮分享H5网页给好友或者朋友圈 首先需要建立h5容器文件夹 页面.wxml <navigator url="/pages/report-await/fouryearh5 ...

  3. vue实现微信分享朋友圈和朋友功能

    vue实现微信分享朋友圈和朋友功能 A-A+ haibao  2018-10-25  11  21  6.2 k  百度已收录  前端开发 温馨提示:本文共3536个字,读完预计9分钟. 这两天在开发 ...

  4. Vue实现点击按钮进行文件下载(后端Java)

    最近项目中需要实现点击按钮下载文件的需求,前端用的vue,因为文件是各种类型的,比如图片.pdf.word之类的.这里后端是可以返回文件的地址给前端的,但我看了下网上各种五花八门的答案,感觉都不是我想 ...

  5. vue项目中,点击按钮复制其内容

    <el-table-column label="推广链接" align="center"> <template slot-scope=&quo ...

  6. vue+element 点击按钮后 导致 刷新页面 致url中拼接 ? 或者拼接参数

    https://blog.csdn.net/sinat_37255207/article/details/88917162 element 自己的<el-form></el-form ...

  7. 解决关于 vue项目中 点击按钮路由多了个问号

    问题描述: 在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的 ...

  8. Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案

    需求场景: 非推荐商品详情页返回的时候弹出弹窗推荐商品,点击弹窗按钮可以直接访问推荐商品: 只有直接进入商品详情页返回才会弹出推荐商品弹窗: 每个用户访问只能弹一次(除非清除缓存). 需求分析: 1. ...

  9. 21、解决关于 vue项目中 点击按钮路由多了个问号

    在vue项目开发过程中,点击按钮结果页面刷新了一遍 后来发现路径变成了 localhost:8080/?#/login 原因: 这里是 form 表单,点击了button 按钮,触发了他的默认事件,就 ...

随机推荐

  1. Bulma CSS框架教程

    Bulma是一个轻量级的现代CSS框架,基于flex,跟bootstrap不一样纯CSS没有JS,与vuejs.reactjs这样JavaScript框架可以很好地集成. 为降低学习难度,让初学者可以 ...

  2. 5分钟搞懂:基于token的用户认证

    https://www.qikegu.com/easy-understanding/880 用户认证 用户认证或者说用户登录是确认某人确实是某人的过程,生活中靠身份证,网络上就要靠账号和密码.用户提供 ...

  3. 每天一点点之vue框架开发 - History 模式下线上路由报404错误

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  4. C++ 管道

    // PipeServer.cpp : Defines the entry point for the console application. // #include "stdafx.h& ...

  5. 基于UWB技术的DW1000芯片简单解析

    近些年来随着物联网和机器人技术的大发展,精确定位技术的热度也随之攀升.目前精确定位的技术有很多,如基于wifi.RFID.zigbee.超声波.UWB等技术都可以实现精准定位.由于技术的不同,精度也不 ...

  6. 下页小希学MVC5+EF6.2 学习记录三

      目的:1 学习mvc+ef 2  写下日记也是对自己的督促 期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型 ...

  7. 文献阅读 - MonoLoco与关于Camera Matrix的笔记

    目录 概览 HighLights Camera Intrinsic Matrix 笔记 Intrinsic Matrix Task-Error - 不确定性任务下确界的计算 输出假设的Laplace分 ...

  8. [NOIP2009普及]分数线划定 T2 排序

    Description 世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,A 市对所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试.面试分数线根据计划录取人数的 ...

  9. Nim游戏(尼姆博弈)

    这里是尼姆博弈的模板,前面的博弈问题的博客里也有,这里单列出来. 有N堆石子.A B两个人轮流拿,A先拿.每次只能从一堆中取若干个,可将一堆全取走,但不可不取,拿到最后1颗石子的人获胜.假设A B都非 ...

  10. (6)Mat对象的一些函数和方法的使用

    首先是基本的代码整理 #include<iostream> #include<opencv.hpp> using namespace std; using namespace ...