跳到主要内容

开始

提供app端微信插件、h5端jssdk插件。集成了微信分享组件,同时支持小程序、h5、APP

安装

yarn duxapp app add wechat

RN端微信组件

集成的是 react-native-wechat-lib 当你需要支付、分享、登录时,可导入使用,具体使用方法查看官方文档

分享组件使用

添加配置位于

index.jsoption.wechat.share

{
open: true,
// 开启未定义的页面分享
pageSlef: {
// 包含这些页面分享自身 页面路径关键词匹配 include 优先级比 exclude 高,
// 可以配置exclude为空数组表示支持所有页面
// pageSlef优先级高于pageHome
include: [],
// 排除这些页面 不进行分享
// exclude: []
},
// 开启未定义的页面分享到指定页面
pageHome: {
path: '',
params: {},
// 包含这些页面分享自身 页面路径关键词匹配
// include: [],
// 排除这些页面 不进行分享
exclude: []
},
// 公共分享参数
common: {
title: '公共分享标题',
desc: '功能分享描述',
image: 'https://shujumatou.2c99.com/uploads/2023-11-05/e8d3249afb4e0a55df34.png'
},
platform: {
app: {
// 配置分享到小程序的原始id 同时相当于开关
weappUserName: '',
// 配置分享到h5的url 同时相当于开关
h5Url: '',
}
}
}

h5 端要启用分享需要设置参数

WechatShare.h5ConfigPromise(async () => {
// 接口返回的参数和jssdk config接口一致
const res = await request({
url: 'wechat/sdk',
method: 'POST',
data: {
url: window.location.href,
api: [
'updateAppMessageShareData', 'updateTimelineShareData',
'showAllNonBaseMenuItem', 'hideAllNonBaseMenuItem'
]
}
})
return res
})

在页面调用

import { Header, TopView } from '@/duxapp'
import { WechatShare } from '@/wechat'

export default TopView.HOC(function Page() {

WechatShare.useSharePage({
title: '分享标题',
// 参数为可选 不设置 默认读取当前页面路径和参数
path: '',
// 参数为可选
image: '',
// 可选
params: {}
})

// 点击弹出分享 在h5端和app端生效 在小程序端需要使用 Button 按钮调起分享界面
const share = useCallback(() => {
WechatShare.openShare()
}, [])

return <>
<Header title='页面标题' />
<View onCLick={share}></View>
</>
})
信息

如果要在页面中设置分享参数,页面必须要使用TopView.HOC进行包装,而不是将TopView作为组件使用

设置全局分享参数

// 设置全局分销参数
WechatShare.setGlobalParams(old => ({ ...old, sale_user_code: info.code }))

禁用全局分享参数

// 次方法主要用于 h5 端,避免url上的敏感参数被分享出去
WechatShare.setDisableGlobalParams('sale_user_code', 'sale_user_id', 'wechat_code', 'toPage')