范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-利用Decorator快速实现微信小程序分享

06-28 亚博APP
摘要:假如需要对当前页面转发进行自界说编纂,则需要再当前页面 Page 中界说onShareAppMessage 事务处置函数,自界说该页面的转发内容。

在Page的 onLoad 里面界说 wx.showShareMenu() 显示当前页面的转发按钮

利用 button 的 open-type=share 让用户点击按钮触发转发

假如需要对当前页面转发进行自界说编纂,则需要再当前页面 Page 中界说onShareAppMessage事务处置函数,自界说该页面的转发内容。

举个例子

在每次分享的卡片的链接上,都需要带受骗前分享用户的userId,便利往后对用户拉新阐发,助力,团购等行动进行处置,这个时辰就需要对分享卡片的路径进行一次处置

解决体例

操纵Decorator和React的高阶组件HOC,在willMount的时辰往页面注入wx.showShareMenu(),然后可经由过程参数或在当前页面触发响应的设置函数进行响应的分享设置装备摆设设置

withShare.js

import Taro from \'@tarojs/taro\';

import { connect } from \'@tarojs/redux\';

import defaultShareImg from \'xxx.jpg\';

function withShare(opts = {}) {

// 设置默许

const defalutPath = \'pages/index/index?\';

const defalutTitle = \'默许题目\';

const defaultImageUrl = defaultShareImg; return function demoComponent(Component) { // redux里面的用户数据 @connect(({ user }) => ({ userInfo: user.userInfo })) class WithShare extends Component { async componentWillMount() { wx.showShareMenu({ withShareTicket: true }); if (super.componentWillMount) { super.componentWillMount(); } } // 点击分享的那一刻会进行挪用 onShareAppMessage() { const { userInfo } = this.props; let { title, imageUrl, path = null } = opts; // 从继续的组件获得设置装备摆设 if (this.美金setSharePath && typeof this.美金setSharePath === \'function\') { path = this.美金setSharePath(); } // 从继续的组件获得设置装备摆设 if (this.美金setShareTitle && typeof this.美金setShareTitle === \'function\') { title = this.美金setShareTitle(); } // 从继续的组件获得设置装备摆设 if ( this.美金setShareImageUrl && typeof this.美金setShareImageUrl === \'function\' ) { imageUrl = this.美金setShareImageUrl(); } if (!path) { path = defalutPath; } // 每条分享都弥补用户的分享id // 假如path不带参数,分享出去后解析的params里面会带一个{\'\': 亚博\'\'} const sharePath = `美金{path}&shareFromUser=美金{userInfo.shareId}`; return { title: title || defalutTitle, path: sharePath, imageUrl: imageUrl || defaultImageUrl }; } render() { return super.render(); } } return WithShare; }; }

export default withShare;

利用的页面

import Taro, { Component } from \'@tarojs/taro\';

import { connect } from \'@tarojs/redux\';

import { View } from \'@tarojs/components\';

import withShare from \'./withShare\';

@withShare({ title: \'可设置分享题目\', imageUrl: \'可设置分享图片路径\', path: \'可设置分享路径\'

})

class Index extends Component { // 美金setSharePath = () => \'可设置分享路径(优先级最高)\' // 美金setShareTitle = () => \'可设置分享题目(优先级最高)\' // 美金setShareImageUrl = () => \'可设置分享图片路径(优先级最高)\'

render() {

return

}

}

因为是继续传入的组件,所以获得分享设置装备摆设除可以从函数的参数获得,还可以经由过程界说的一些方式,经由过程继续的组件获得到继续的参数,如许可以再某些营业场景下,按照需要动态生成份享参数设置装备摆设,例如代码里面的this.美金setSharePath()等就是从父级组件动态获得到分享的参数。

保举浏览:微信小法式开辟教程微信小法式

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数