微信小程序实现页面分享onShareAppMessage


Posted in Javascript onAugust 12, 2019

效果

微信小程序实现页面分享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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
Nest.js 授权验证的方法示例
Feb 22 Javascript
react实现antd线上主题动态切换功能
Aug 12 #Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 #Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 #Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 #Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 #Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 #Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 #Javascript
You might like
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
javascript动态控制服务器控件实例
2014/09/05 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
小程序转发探索示例
2019/02/19 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
深入解析Python中的WSGI接口
2015/05/11 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python中List.count()方法的使用教程
2015/05/20 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
使用python实现飞机大战游戏
2020/03/23 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
市场部规章制度
2014/01/24 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
大班下学期个人总结
2015/02/13 职场文书
2015年科协工作总结
2015/05/19 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android