精华内容
下载资源
问答
  • 微信小程序-页面分享 onShareAppMessage

    万次阅读 多人点赞 2018-02-28 08:14:10
    微信小程序-页面分享 onShareAppMessage

    效果


    js

    let app = getApp();
    Page({
      data: {
        img: "/images/1.jpg"
      },
      onLoad() {
      },
      showShareMenu() {
        wx.showShareMenu();
        console.log("显示了当前页面的转发按钮");
      },
      hideShareMenu() {
        wx.hideShareMenu();
        console.log("隐藏了当前页面的转发按钮");
      },
      onShareAppMessage: (res) => {
        if (res.from === 'button') {
          console.log("来自页面内转发按钮");
          console.log(res.target);
        }
        else {
          console.log("来自右上角转发菜单")
        }
        return {
          title: '妹子图片',
          path: '/pages/share/share?id=123',
          imageUrl: "/images/1.jpg",
          success: (res) => {
            console.log("转发成功", res);
          },
          fail: (res) => {
            console.log("转发失败", res);
          }
        }
      }
    })

    html

    <view class="view">
      <image class="cover-9" src="{{img}}" bindtap="img"></image>
      <view class="window-1">
        <button type="default" id="open" bindtap="showShareMenu">开启分享</button>
        <button type="warn" id="close" bindtap="hideShareMenu">关闭分享</button>
      </view>
      <button type="primary" open-type="share" data-name="pageShare" id="share">点击分享</button>
    </view>

    css

    page{
      height: 100%;
    }
    .view{
      width: 100%;
      height: 100%;
    }
    .window-1{
      display: flex;
      flex-direction: row;
      margin: 20rpx 0;
    }
    .cover-9{
      width: 688rpx;
      height: 75%;
      margin: 0 30rpx;
      border:2rpx solid;
      border-radius:5px;  
    }
    button{
      margin: 0 10rpx;
      width: 100%;
    }
    #share{
      width: 730rpx;
    }

    意外金喜的博客:http://blog.csdn.net/zzwwjjdj1

    更多小程序文章:http://blog.csdn.net/zzwwjjdj1/article/details/79351547
    关注公众号:


    展开全文
  • 微信小程序 解决内层页面分享出去后 用户无法通过分享页面返回首页问题 本质就是设置一个变量isshare来判断是否是分享页面中进入的 data设置 isshare: 0,//不是分享页面进入 js onShareAppMessage: function () {...

    微信小程序 解决内层页面分享出去后 用户无法通过分享页面返回首页问题

    本质就是设置一个变量isshare来判断是否是分享页面中进入的

    data设置

        isshare: 0,//不是分享页面进入
    

    js

      onShareAppMessage: function () {
        return {
          title: 'xxx',
          path: 'pages/MyPages/my_detail/my_detail?isshare=1&&id=' + this.data.id
        }
      },
      backHome: function () {
        wx.reLaunch({
          url: '/pages/home/home-index/home-index'
        })
      }
    

    onload

        if (options.isshare == 1) {
          console.log('是分享进入');
          this.setData({
            'isshare': options.isshare
          })
        }
    

    wxml

    <image wx:if="{{isshare}}" bindtap='backHome' class='d-back-home' src='http://cdn.xcx.pemarket.com.cn/icon-Return%20to%20the%20home%20page.png' lazy-load></image>
    

    css

    /* 回到首页,固定定位,悬浮 */
    .d-back-home {
      position: fixed;
      width: 96rpx;
      height: 96rpx;
      right: 30rpx;
      bottom: 166rpx;
      z-index: 10000;
    }
    
    展开全文
  • //点击小程序右上角即可转发分享页面 onShareAppMessage: function() { } 分享按钮: 分享的效果: 二、自己写一个自定义按钮: 1、自定义一般利用button按钮来实现的,官方文档给的解决方案是button里面添加...

    一、利用小程序右上角自带的分享

    1、只需要一句js代码即可

    //点击小程序右上角即可转发分享本页面
      onShareAppMessage: function() {
      }
    

    分享按钮:在这里插入图片描述
    分享的效果:
    在这里插入图片描述

    二、自己写一个自定义按钮:

    1、自定义一般利用button按钮来实现的,官方文档给的解决方案是button里面添加一个open-type=‘share在这里插入图片描述
    ’wxml

    <button open-type='share'>
    	//button按钮形状
    	<image scr='url'></image>
    </button>
    

    js

    //点击小程序右上角即可转发分享本页面
      onShareAppMessage: function() {
      }
    

    2、自定义分享内容的 js

    //点击小程序右上角即可转发分享本页面
      onShareAppMessage: function(res) {
      if (res.from === 'button') {
          // 来自页面内转发按钮
          console.log(res.target)
        }
        return {
          title: '转发23456',
          path: 'pages/index/index',
          imageUrl: '',
          success: function (shareTickets) {
            console.info(shareTickets + '成功');
            // 转发成功
          },
          fail: function (res) {
            console.log(res + '失败');
            // 转发失败
          },
          complete: function (res) {
            // 不管成功失败都会执行
          }
        }
      }
    

    在这里插入图片描述

    三、分享到朋友圈

    1、分享到朋友圈,只需要添加这句话即可

      // onShareTimeline(){
      var self = this;
        var shareObj = {
          title: 'xxxxx',
          imageUrl: "https://xxxxx/aaaa.png",
        };
        return shareObj;
      },
    
    展开全文
  • 单页面程序(如:使用vue框架搭建的单页面应用),在微信环境中,使用微信原生的分享功能,进行页面分享时,安卓设备正常,分享那个页面,进来就是那个页面。但是在ios设备中,无论在那个页面分享,进入时始终进入的...

    问题描述:
    单页面程序(如:使用vue框架搭建的单页面应用),在微信环境中,使用微信原生的分享功能,进行页面分享时,安卓设备正常,分享那个页面,进来就是那个页面。但是在ios设备中,无论在那个页面分享,进入时始终进入的是初次进入应用时的页面。
    问题环境:
    ios设备,vue单页面程序
    问题原因:
    vue单页面应用中,把第一次打开的页面叫做进入页,之后通过路由跳转的页面(通过pushState或replaceState改变的url)叫做当前页。而在Android设备中,浏览器记录的是当前页的url信息;IOS设备中,浏览器记录的是进入页面信息
    解决方案:
    以vue框架搭建为例。在进入页面时,将需要分享的页面刷新加载location.assign(),路由元信息meta中的字段isShare做页面分享处理,true:表示需要处理;false:表示不需要处理。解决方案有多种,解决原则就是改变浏览器的页面路径记录信息。
    具体实现:

    // 路由配置,设置元信息 isShare
    {
        path: '/share',
        name: 'Share',
        component: Share,
        meta: {
          isShare: true
        }
    }
    
    // 在全局路由守卫中设置
    router.beforeEach((to, from, next) => {
        if ((to.fullPath !== window.location.hash.slice(1)) && to.meta.isShare) {
            let href = window.location.href;
            href = href.replace(href.hash, ('#' + to.fullPath)); // hash模式下的页面路径拼接方式
            window.location.assign(href);
            next();
        }
        ...
    })
    
    展开全文
  • H5实现移动端,PC端页面分享

    千次阅读 2019-01-30 11:48:27
    想做个页面分享功能,既要兼容移动端,也要兼容PC端。 找了一轮,决定PC端用百度分享的api: http://share.baidu.com/code/advance 移动端一开始想用soshm.js,发现ios没问题,但安卓手机在微信上点微博完全没...
  • 首先以分享给朋友为例1、先看官方文档wx.onMenuShareAppMessage({ title: '', // 分享标题 desc: '', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', /...
  • vue 页面分享功能

    千次阅读 2019-04-30 16:42:13
    -- 分享弹窗 --> <el-dialog title="分享:数据大屏" :visible.sync="shareDialogVisible" width="30%"> <el-checkbox v-model="shareInfo.usePassword">启用密码:</el-checkbox> ...
  • 在index页面分享 onShareAppMessage(res) { return{ title: ‘通知’, path: ‘/navigator/navigate/navigate?id=123’, } }, 注意:onShareAppMessage中path:后面跟的是分享的网页地址,要用绝对路径。 在...
  • 微信小程序之页面分享:onShareAppMessage(option)
  • 实现H5纯静态页面分享到微信朋友圈带图片显示需要前提条件 1、微信公众号已成功认证 2、微信公众号中添加js安全域名 3、添加ip白名单(服务器外网ip) HTML代码部分
  • 页面分享到各个社交平台的插件

    千次阅读 2017-04-25 20:31:32
    欢迎来到Altaba的博客,2017年4...相信大家在开发的过程中都遇到过需要将当前的页面分享到某一社交平台上,在开发中,我遇到这样公共的可以导入的js插件,地址如下,大家可以到GitHub上下载或者直接引用 ...
  • 移动端以及 PC浏览器页面分享到朋友圈等的功能实现
  • 在微信小程序某一页面A中分享其他任意在app.json中定义的页面如B,那么在A页面中出现了onUnload()方法将导致调试过程中分享后进入B页面失败(体验版中暂未尝试),从分享页面进入小程序将回到页面A,并不会进入页面B...
  • 公众号h5页面分享并监测分享事件

    千次阅读 2020-04-29 20:56:59
    公众号H5中需要做分享任务,需要监听分享成功事件,实现代码 <template> <div @click="toShare">111</div> </template> <script> import wx from 'weixin-js-sdk' import ...
  • 微信开发:用户A把公众号的页面分享给用户B,在页面显示分享者A信息(昵称+头像+openid【隐藏】),然后另一个用户B打开分享的页面,填写表单数据,提交的时候保存表单数据+分享者A的openid。 这个逻辑现实么?
  • 微信h5页面分享实现

    千次阅读 2018-04-15 23:58:41
    请提供详细问题说明 ,强烈建议附上问题页面的链接,并告知如何复现你们的问题。 js需求 &amp;lt;script src=&quot;https://res.wx.qq.com/open/js/jweixin-1.2.0.js&quot;&amp;gt;&amp;lt;...
  • #h5页面分享朋友,朋友圈设置缩略图,自定义标题,描述! //要实现显示图片与标题必须调用微信接口, //注意点:1、必须要把跳转的页面绑定到微信的接口域名里; //2、后台要进行设置签名算法,获取签名,时间戳, ...
  • //分享页面所需要的id imageUrl : this . data . article . video_img //分享界面的图片 } } , 注意 样式: 1.onShareAppMessage方法, 必须使用 , open-type="share"放在别的组件上无效 2....
  • 微信小程序内嵌h5页面分享

    千次阅读 2018-11-19 12:03:24
    onShareAppMessage: function (options) {  let return_url = options.webViewUrl //分享的当前页面的路径 return { 'desc':desc, //标题 title: '分享内容', path: return_url , //分享地址 success...
  • 各社交网站页面分享代码链接

    万次阅读 2017-09-30 14:32:46
    Facebook:http://www.facebook.com/sharer.php?u=分享地址 Twitter : https://twitter.com/intent/tweet?url=分享地址&via=分享人(可以@)&text=分享内容 Google+ : https://plus.google.com/share?url=分享...
  • 页面js代码中定义onShareAppMessage方法(与onload同级) onShareAppMessage(res) { return { title: '微信分享测试', path: '页面路径' (可携带参数) } } 分享按钮 1.右上角转发按钮 (需要定义...
  • angular h5项目微信页面分享不了问题

    千次阅读 2017-12-14 15:58:44
    具体问题简单说下,一个h5项目,在微信留了一个入口,有部分页面不能分享,具体点就是点了微信的分享按钮页面没反应出不来分享页面。 这个问题一开始我是抗拒的、懵逼的。反复看代码也没看出子丑寅卯。但这个问题...
  • h5页面分享一(附源码)

    万次阅读 多人点赞 2018-02-23 16:17:31
    1. 页面效果 2. index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;css网页布局&lt;/title&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 361,636
精华内容 144,654
关键字:

页面分享