微信SDK
支持Android
和iOS
平台兼容性
Android | iOS | web | 鸿蒙 Next | 小程序 |
---|---|---|---|---|
√ | √ | x | x | x |
UniApp Vue Nvue
Android | iOS | web | 鸿蒙 Next | 小程序 |
---|---|---|---|---|
x | x | x | x | x |
Api
事件名 | 参数 | 说明 |
---|---|---|
register | UxRegisterOptions | 注册 |
isInstalled | - | 是否安装微信 |
openApp | - | 打开微信 |
login | UxLoginOptions | 登录 |
share | UxShareOptions | 分享 |
requestPayment | UxPayOptions | 请求支付 |
Android注意事项
需在本插件utssdk
-> app-android
-> AndroidManifest.xml
文件中将所有 ${applicationId}
字段替换成您的真实包名
插件注册universalLink
必填, android可为空
ts
wxsdk.register({
appid: '',
universalLink: '',
success: (res) => {
console.log(res)
}
} as UxRegisterOptions)
wxsdk.register({
appid: '',
universalLink: '',
success: (res) => {
console.log(res)
}
} as UxRegisterOptions)
iOS注意事项
需在本插件utssdk
-> app-ios
-> Info.plist
文件中修改 CFBundleURLSchemes
字段对应的Value为您的微信AppId
插件注册universalLink
必填
ts
wxsdk.register({
appid: '',
universalLink: '', // ios 必填
success: (res) => {
console.log(res)
}
} as UxRegisterOptions)
wxsdk.register({
appid: '',
universalLink: '', // ios 必填
success: (res) => {
console.log(res)
}
} as UxRegisterOptions)
示例代码
ts
<script setup>
// #ifdef APP
import * as wxsdk from "@/uni_modules/ux-weixin"
import { UxLoginOptions, UxRegisterOptions, UxShareOptions, UxPayOptions, UxMiniProgram } from "@/uni_modules/ux-weixin"
// #endif
let title = ''
const code = ref('')
function isAPP(): boolean {
// #ifdef APP
return true
// #endif
// #ifndef APP
uni.showToast({
title: '仅支持APP',
icon: 'none'
})
return false
// #endif
}
function isInstalled() {
if(!isAPP()) return
// #ifdef APP
uni.showToast({
title: wxsdk.isInstalled() ? '已安装微信' : '未安装微信',
icon: 'none'
})
// #endif
}
function onAuth() {
if(!isAPP()) return
// #ifdef APP
wxsdk.login({
success: (res) => {
console.log(res);
code.value = res.code
uni.showModal({
title: '授权成功',
content: `授权凭证:${res.code}`
})
},
fail: (err) => {
console.log(err);
}
} as UxLoginOptions)
// #endif
}
function shareWebpage() {
if(!isAPP()) return
// #ifdef APP
uni.downloadFile({
url: 'https://www.uxframe.cn/logo/logo.png',
success: (e) => {
wxsdk.share({
type: 0,
title: 'UxFrame低代码高性能UI框架',
summary: 'UxFrame是基于UNI-APP-X开发的低代码高性能原生UI框架',
href: 'https://www.uxframe.cn',
// imageUrl: '/static/logo.png',
imageUrl: e.tempFilePath,
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
}
})
// #endif
}
function shareText() {
if(!isAPP()) return
// #ifdef APP
wxsdk.share({
type: 1,
title: 'UxFrame低代码高性能UI框架',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function shareImage() {
if(!isAPP()) return
// #ifdef APP
uni.downloadFile({
// url: 'https://www.uxframe.cn/logo/logo.png',
url: 'https://oss.bgbgsc.com/bingo-file/2024/09/03/20240903151559A042.png',
// url: 'http://xiao-xi-zai-jia.obs.cn-east-3.myhuaweicloud.com:80/33b10e5e975f482e8940be834e693216%2Fthumbnail%2F1722343759659a91184270ed81bc47c4fc9f4ab83974a807736df24eebbccfa605940797e90c4.jpg',
success: (e) => {
console.log(e.tempFilePath);
wxsdk.share({
type: 2,
// imageUrl: '/static/logo.png'
imageUrl: e.tempFilePath,
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
}
})
// #endif
}
function shareMusic() {
if(!isAPP()) return
// #ifdef APP
wxsdk.share({
type: 3,
title: 'UxFrame低代码高性能UI框架',
summary: 'UxFrame是基于UNI-APP-X开发的低代码高性能原生UI框架',
imageUrl: '/static/logo.png',
// imageUrl: 'https://www.uxframe.cn/logo/logo.png',
mediaUrl: 'http://staff2.ustc.edu.cn/~wdw/softdown/index.asp/0042515_05.ANDY.mp3',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function shareVideo() {
if(!isAPP()) return
// #ifdef APP
wxsdk.share({
type: 4,
title: 'UxFrame低代码高性能UI框架',
summary: 'UxFrame是基于UNI-APP-X开发的低代码高性能原生UI框架',
imageUrl: '/static/logo.png',
// imageUrl: 'https://www.uxframe.cn/logo/logo.png',
mediaUrl: 'https://www.uxframe.cn/source/intro/demo.mp4',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function shareMp() {
if(!isAPP()) return
// #ifdef APP
uni.getImageInfo({
src: 'https://oss.bgbgsc.com/bingo-file/2024/09/03/20240903151559A042.png',
// src: 'http://xiao-xi-zai-jia.obs.cn-east-3.myhuaweicloud.com:80/33b10e5e975f482e8940be834e693216%2Fthumbnail%2F1722343759659a91184270ed81bc47c4fc9f4ab83974a807736df24eebbccfa605940797e90c4.jpg',
success: (res) => {
console.log(res.path);
wxsdk.share({
type: 5,
title: 'UxFrame低代码高性能UI框架',
summary: 'UxFrame是基于UNI-APP-X开发的低代码高性能原生UI框架',
// imageUrl: '/static/logo.png',
imageUrl: 'https://oss.bgbgsc.com/bingo-file/2024/09/03/20240903151559A042.png',
miniProgram: {
id: 'gh_b5453753cee',
type: 0,
path: '',
webUrl: 'https://www.uxframe.cn'
} as UxMiniProgram,
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
}
})
// #endif
}
function requestPayment() {
if(!isAPP()) return
// #ifdef APP-ANDROID
wxsdk.requestPayment({
mchid: '商户号',
prepayId: '预付单',
sign: '签名',
signType: '签名类型',
nonceStr: '随机字符串',
timeStamp: '时间戳',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxPayOptions)
// #endif
}
function openMiniProgram() {
if(!isAPP()) return
// #ifdef APP
wxsdk.openMiniProgram({
miniProgram: {
id: 'gh_b5453753cee',
type: 0,
path: '',
} as UxMiniProgram,
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function openCustomerService() {
if(!isAPP()) return
// #ifdef APP
wxsdk.share({
openCustomerServiceChat: true,
corpid: '******************',
customerUrl: 'https://work.weixin.qq.com/kfid/kfc********',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function openApp() {
if(!isAPP()) return
// #ifdef APP
wxsdk.openApp()
// #endif
}
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
// #ifdef APP
wxsdk.register({
appid: 'wx29666d279a7f52a8',
universalLink: '',
success: (res) => {
console.log(res)
}
} as UxRegisterOptions)
// #endif
})
</script>
<script setup>
// #ifdef APP
import * as wxsdk from "@/uni_modules/ux-weixin"
import { UxLoginOptions, UxRegisterOptions, UxShareOptions, UxPayOptions, UxMiniProgram } from "@/uni_modules/ux-weixin"
// #endif
let title = ''
const code = ref('')
function isAPP(): boolean {
// #ifdef APP
return true
// #endif
// #ifndef APP
uni.showToast({
title: '仅支持APP',
icon: 'none'
})
return false
// #endif
}
function isInstalled() {
if(!isAPP()) return
// #ifdef APP
uni.showToast({
title: wxsdk.isInstalled() ? '已安装微信' : '未安装微信',
icon: 'none'
})
// #endif
}
function onAuth() {
if(!isAPP()) return
// #ifdef APP
wxsdk.login({
success: (res) => {
console.log(res);
code.value = res.code
uni.showModal({
title: '授权成功',
content: `授权凭证:${res.code}`
})
},
fail: (err) => {
console.log(err);
}
} as UxLoginOptions)
// #endif
}
function shareWebpage() {
if(!isAPP()) return
// #ifdef APP
uni.downloadFile({
url: 'https://www.uxframe.cn/logo/logo.png',
success: (e) => {
wxsdk.share({
type: 0,
title: 'UxFrame低代码高性能UI框架',
summary: 'UxFrame是基于UNI-APP-X开发的低代码高性能原生UI框架',
href: 'https://www.uxframe.cn',
// imageUrl: '/static/logo.png',
imageUrl: e.tempFilePath,
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
}
})
// #endif
}
function shareText() {
if(!isAPP()) return
// #ifdef APP
wxsdk.share({
type: 1,
title: 'UxFrame低代码高性能UI框架',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function shareImage() {
if(!isAPP()) return
// #ifdef APP
uni.downloadFile({
// url: 'https://www.uxframe.cn/logo/logo.png',
url: 'https://oss.bgbgsc.com/bingo-file/2024/09/03/20240903151559A042.png',
// url: 'http://xiao-xi-zai-jia.obs.cn-east-3.myhuaweicloud.com:80/33b10e5e975f482e8940be834e693216%2Fthumbnail%2F1722343759659a91184270ed81bc47c4fc9f4ab83974a807736df24eebbccfa605940797e90c4.jpg',
success: (e) => {
console.log(e.tempFilePath);
wxsdk.share({
type: 2,
// imageUrl: '/static/logo.png'
imageUrl: e.tempFilePath,
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
}
})
// #endif
}
function shareMusic() {
if(!isAPP()) return
// #ifdef APP
wxsdk.share({
type: 3,
title: 'UxFrame低代码高性能UI框架',
summary: 'UxFrame是基于UNI-APP-X开发的低代码高性能原生UI框架',
imageUrl: '/static/logo.png',
// imageUrl: 'https://www.uxframe.cn/logo/logo.png',
mediaUrl: 'http://staff2.ustc.edu.cn/~wdw/softdown/index.asp/0042515_05.ANDY.mp3',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function shareVideo() {
if(!isAPP()) return
// #ifdef APP
wxsdk.share({
type: 4,
title: 'UxFrame低代码高性能UI框架',
summary: 'UxFrame是基于UNI-APP-X开发的低代码高性能原生UI框架',
imageUrl: '/static/logo.png',
// imageUrl: 'https://www.uxframe.cn/logo/logo.png',
mediaUrl: 'https://www.uxframe.cn/source/intro/demo.mp4',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function shareMp() {
if(!isAPP()) return
// #ifdef APP
uni.getImageInfo({
src: 'https://oss.bgbgsc.com/bingo-file/2024/09/03/20240903151559A042.png',
// src: 'http://xiao-xi-zai-jia.obs.cn-east-3.myhuaweicloud.com:80/33b10e5e975f482e8940be834e693216%2Fthumbnail%2F1722343759659a91184270ed81bc47c4fc9f4ab83974a807736df24eebbccfa605940797e90c4.jpg',
success: (res) => {
console.log(res.path);
wxsdk.share({
type: 5,
title: 'UxFrame低代码高性能UI框架',
summary: 'UxFrame是基于UNI-APP-X开发的低代码高性能原生UI框架',
// imageUrl: '/static/logo.png',
imageUrl: 'https://oss.bgbgsc.com/bingo-file/2024/09/03/20240903151559A042.png',
miniProgram: {
id: 'gh_b5453753cee',
type: 0,
path: '',
webUrl: 'https://www.uxframe.cn'
} as UxMiniProgram,
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
}
})
// #endif
}
function requestPayment() {
if(!isAPP()) return
// #ifdef APP-ANDROID
wxsdk.requestPayment({
mchid: '商户号',
prepayId: '预付单',
sign: '签名',
signType: '签名类型',
nonceStr: '随机字符串',
timeStamp: '时间戳',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxPayOptions)
// #endif
}
function openMiniProgram() {
if(!isAPP()) return
// #ifdef APP
wxsdk.openMiniProgram({
miniProgram: {
id: 'gh_b5453753cee',
type: 0,
path: '',
} as UxMiniProgram,
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function openCustomerService() {
if(!isAPP()) return
// #ifdef APP
wxsdk.share({
openCustomerServiceChat: true,
corpid: '******************',
customerUrl: 'https://work.weixin.qq.com/kfid/kfc********',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
}
} as UxShareOptions)
// #endif
}
function openApp() {
if(!isAPP()) return
// #ifdef APP
wxsdk.openApp()
// #endif
}
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
// #ifdef APP
wxsdk.register({
appid: 'wx29666d279a7f52a8',
universalLink: '',
success: (res) => {
console.log(res)
}
} as UxRegisterOptions)
// #endif
})
</script>
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="微信SDK" :bold="true">
<ux-text text="支持微信授权、分享、支付、拉起微信企业客服等功能"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档:"></ux-text>
<ux-text style="flex: 1" name="微信SDK" text="https://www.uxframe.cn/api/weixin.html" path="/pages/webview/webview" mode="link"</ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="基本" :bold="true">
<ux-col>
<ux-button text="是否安装微信" @click="isInstalled()"></ux-button>
<ux-button text="打开微信" :mt="10" @click="openApp()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="微信授权" :bold="true">
<ux-col>
<ux-text :text="code"></ux-text>
<ux-button text="拉起授权" :mt="10" @click="onAuth()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="微信分享" :bold="true">
<ux-col>
<ux-button text="图文" @click="shareWebpage()"></ux-button>
<ux-button text="文本" :mt="10" @click="shareText()"></ux-button>
<ux-button text="图片" :mt="10" @click="shareImage()"></ux-button>
<ux-button text="音频" :mt="10" @click="shareMusic()"></ux-button>
<ux-button text="视频" :mt="10" @click="shareVideo()"></ux-button>
<ux-button text="小程序" :mt="10" @click="shareMp()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="微信支付" :bold="true">
<ux-col>
<ux-button text="拉起支付" @click="requestPayment()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="打开小程序" :bold="true">
<ux-col>
<ux-button text="打开小程序" @click="openMiniProgram()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="微信企业客服" :bold="true">
<ux-col>
<ux-button text="拉起客服" @click="openCustomerService()"></ux-button>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag-filled" title="微信SDK" :bold="true">
<ux-text text="支持微信授权、分享、支付、拉起微信企业客服等功能"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档:"></ux-text>
<ux-text style="flex: 1" name="微信SDK" text="https://www.uxframe.cn/api/weixin.html" path="/pages/webview/webview" mode="link"</ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="基本" :bold="true">
<ux-col>
<ux-button text="是否安装微信" @click="isInstalled()"></ux-button>
<ux-button text="打开微信" :mt="10" @click="openApp()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="微信授权" :bold="true">
<ux-col>
<ux-text :text="code"></ux-text>
<ux-button text="拉起授权" :mt="10" @click="onAuth()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="微信分享" :bold="true">
<ux-col>
<ux-button text="图文" @click="shareWebpage()"></ux-button>
<ux-button text="文本" :mt="10" @click="shareText()"></ux-button>
<ux-button text="图片" :mt="10" @click="shareImage()"></ux-button>
<ux-button text="音频" :mt="10" @click="shareMusic()"></ux-button>
<ux-button text="视频" :mt="10" @click="shareVideo()"></ux-button>
<ux-button text="小程序" :mt="10" @click="shareMp()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="微信支付" :bold="true">
<ux-col>
<ux-button text="拉起支付" @click="requestPayment()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="打开小程序" :bold="true">
<ux-col>
<ux-button text="打开小程序" @click="openMiniProgram()"></ux-button>
</ux-col>
</ux-card>
<ux-card direction="column" icon="arrowright" title="微信企业客服" :bold="true">
<ux-col>
<ux-button text="拉起客服" @click="openCustomerService()"></ux-button>
</ux-col>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>
css
<style lang="scss">
</style>
<style lang="scss">
</style>