uniApp 自定义分享到微信、朋友圈

uniapp写app之自定义分享到微信和朋友圈

新建组件share-posters
在项目中index.html文件中引入jWeixin
在父组件中使用

新建组件share-posters

uniapp自定义分享到微信好友、朋友圈组件

// An highlighted block
<template><view class=""><view class="batch-num" :class="isShow ? 'on' : ''"><view class="batch-body"><view class="share-main-btn"><view class="share-box-title">分享到：</view><view class="flex-sb-cent"><view class="item-btn" @click="onShare('WXSceneSession')"><view class="item-btn-img"><image src="@/static/images/xs-share01.png" mode=""></image></view><text>微信好友</text></view><view class="item-btn" @click="onShare('WXSceneTimeline')"><view class="item-btn-img"><image src="@/static/images/xs-share02.png" mode=""></image></view><text>朋友圈</text></view></view></view><view class="cancle-btn" @click="onCancel">取消</view></view></view><view class="mask" v-show="isShow" @click="onCancel"></view></view>
</template><script>import {share} from '@/api/common.js'
import { cancel } from '../api/user'export default {name: "batchNum",props: {isOpen: {default: false,type: Boolean}},data() {return {isShow: false,config: {"appId": "","url": "","name": "","logo": "","describe": "",config: {},"user": {"name": "","avatar": ""}}}},watch: {isOpen(newv, oldV) {this.isShow = true}},created() {this.config = JSON.parse(this.$cache.get('share-config'))share().then(data => {this.$cache.set('share-config', data, 86400)this.config = data})},methods: {onShare(scene) {// #ifdef APP-PLUSuni.share({provider: 'weixin',type: 0,scene,title: this.config.name,imageUrl: this.config.logo,href: this.config.url,summary: this.config.describe,success: res=> {console.log(res)this.onCancel()},fail: res=> {if(res.code == -8) {this.$showToast('您未安装微信','fail')}this.onCancel()},})// #endif// #ifdef H5jWeixin.config(this.config.config)let that = thisjWeixin.ready(()=> { let shareData = {title: this.config.name,imgUrl: this.config.logo,link: this.config.url,desc: this.config.describe,success: function(res) {that.$showToast('分享成功')},cancel: function(res) {that.$showToast(JSON.stringify(err),'fail')}}if (scene=='WXSceneSession') {// 分享给微信好友jWeixin.updateAppMessageShareData(shareData)} else {// 分享给微信朋友圈jWeixin.updateTimelineShareData(shareData)}})jWeixin.error((res)=>{this.$showToast(JSON.stringify(res),'fail')})// #endif},onCancel() {this.isShow = false},}}
</script><style lang="less" scoped>.batch-num {width: 100%;// height: 624rpx;// background-color: #fff;position: fixed;left: 0;bottom: 0;z-index: 1000;transform: translate3d(0, 100%, 0);transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);border-top-left-radius: 32rpx;border-top-right-radius: 32rpx;overflow: hidden;&.on {transform: translate3d(0, 0, 0);}.batch-body {padding: 20rpx;}.item-btn {width: 50%;font-size: 26rpx;font-family: PingFang SC;font-weight: 400;color: #666666;line-height: 26rpx;text-align: center;.item-btn-img {width: 72rpx;height: 72rpx;margin: 0 auto;margin-bottom: 12rpx;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;image,img {width: 72rpx;height: 72rpx;pointer-events: none;-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}}}.share-main-btn {width: 100%;height: 248rpx;background: #FFFFFF;border-radius: 16rpx;margin-bottom: 12rpx;padding: 32rpx 48rpx;margin-top: 40rpx;.share-box-title {font-size: 32rpx;font-family: PingFang SC;font-weight: 400;color: #333333;line-height: 32rpx;padding-bottom: 30rpx;}}.cancle-btn {width: 100%;height: 100rpx;background: #FFFFFF;border-radius: 16rpx;text-align: center;line-height: 100rpx;font-size: 32rpx;font-family: PingFang SC;font-weight: 600;color: #2E73FF;}}// 分享.mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;opacity: 0.7;background-color: rgba(0, 0, 0, 0.7);z-index: 999 !important;}
</style>

在项目中index.html文件中引入jWeixin

我们首先要安装一个模块（jweixin-module）我用的第二种方法引入的

//引入方式有多种
// 1 npm下载npm install jweixin-module// 2 将jweixin-module放到html中<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js" ></script>

在父组件中使用

引入父组件中

<template><view><sharePosters :isOpen="isOpenShare"></sharePosters></view>
</template>
<script>import sharePosters from '@/components/share-posters.vue'export default {components: {sharePosters,},data() {return: {isOpenShare: false,}},methods: {onPickAddress() {this.isOpenShare= true},}}
</script>

此分享需要后端配合，后端写接口返回config想管数据和方法签名等才能分享，app则需要发布的报名以及签名一直才能分享成功。

uniApp 自定义分享到微信、朋友圈相关推荐

使用微信的JS-SDK实现自定义分享到微信朋友圈
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票实现代码 <!DOCTYPE html> <html><head>&l ...
uni-app - H5 公众号网页分享到微信朋友圈 / 转发分享给朋友好友 / 分享到手机 QQ / 分享到 QQ 空间，给微信分享卡片设置图标、标题、描述文字等（JS-SDK 通用解决方案放心用）
前言如果您是纯 Vue.js 项目(或 Nuxt.js),请访问 Vue - 最新网页 H5 分享到微信朋友圈 / 转发分享好友这篇详细教程. 目前网上大部分教程都过时了(老版本.无效),并且未对 ...
android友盟微信分享到朋友圈,2020年友盟分享到微信朋友圈
2020年友盟分享到微信朋友圈 1.我想要对你说出我要说的最深的话语,我不敢,我怕你取笑 7.真心总是无人喜,偏偏套路撩人心 10.钱可以帮穷人思维的人解决温饱,却可以帮富人思维的人制造财富十七.考 ...
android 微信朋友圈全功能,Android仿微信朋友圈文字展开全文功能 Android自定义TextView仿微信朋友圈文字展开全文功能...
Android自定义TextView仿微信朋友圈文字信息,展开全文功能代码及注释如下: 首先写一个xml文件 showmore.xml: android:orientation="vert ...
js分享到微信朋友圈、QQ空间、QQ好友、新浪微博、腾讯微博、豆瓣、人人......
各种分享...... <!DOCTYPE html> <html> <head> <title>share</title> <scri ...
Android第三方应用分享到微信朋友圈,微信好友(原创)
首先,这篇博客是面向刚刚开始做Android开发的程序员的,大牛可以飘过.然后,作为一个接触Android一年多,还没有毕业的我来说,写的博客难免有些错误,所以请大家多多指教,看大家都在写博客,目的无 ...
如何把计算机歌曲传给微信好友,如何将手机本地音乐分享到微信朋友圈分享音乐...
当前,不支持将本地音乐分享到微信朋友圈,但是您可以安装喜马拉雅山,或者在上传后将其分享到微信朋友圈 1.以iPhone为例.首先打开音乐,然后找到要共享的音乐.以我下载的音乐为例,单击歌曲右侧的&qu ...
分享到微信朋友圈的内容被禁止访问，怎么办？
作者: 轻易科技知行研发部 - 王海宇分享到微信朋友圈的内容被禁止访问,怎么办? 写在前面微信封禁的行为关于微信封禁域名后解决办法工程师镇楼写在前面随着互联网的发展,越来越多的app通过分 ...
android 微信朋友圈全功能,Android自定义TextView仿微信朋友圈文字展开全文功能
Android自定义TextView仿微信朋友圈文字信息,展开全文功能代码及注释如下: 首先写一个xml文件 showmore.xml: android:orientation="vert ...

uniApp 自定义分享到微信、朋友圈

uniapp写app之自定义分享到微信和朋友圈

新建组件share-posters

在项目中index.html文件中引入jWeixin

在父组件中使用

uniApp 自定义分享到微信、朋友圈相关推荐

最新文章

热门文章