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则需要发布的报名以及签名一直才能分享成功。

本文链接：https://my.lmcjl.com/post/4354.html