uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：

微信小程序开发结束之后，点击右上角三个点显示：
uni 分享到朋友圈,微信小程序,微信,uni-app

解决方案（将每一个页面的分享功能弄成组件调用）：

1、创建share.ts文件

export default {
  data() {
      return {
          //设置默认的分享参数
          share: {
              title: '小程序名称',
              path: '/pages/home/index',
              imageUrl: '',
              desc: '',
              content: ''
          }
      }
  },
  onShareAppMessage(res) {
      return {
          title: this.share.title,
          path: this.share.path,
          imageUrl: this.share.imageUrl,
          desc: this.share.desc,
          content: this.share.content,
          success(res) {
              uni.showToast({
                  title: '分享成功'
              })
          },
          fail(res) {
              uni.showToast({
                  title: '分享失败',
                  icon: 'none'
              })
          }
      }
  },
  onShareTimeline(res) {
    return {
        title:this.sharedata.title,
        query:'',
        imageUrl:this.sharedata.imageurl,
        success(res){
            uni.showToast({
                title:'分享成功'
            })
        },
        fail(res){
            uni.showToast({
                title:'分享失败',
                icon:'none'
            })
        }
    }
  },
}

2、全局使用, 在 main.ts 里面添加全局的 mixin

import { createSSRApp } from 'vue';
import App from './App.vue';
import { setupStore } from '@/state';
import share from '@/components/....你的路径.../share'

export function createApp() {
  const app = createSSRApp(App);
  //自定义分享功能
  app.mixin(share)
  // Configure store
  setupStore(app);
  return {
    app,
  };
}

这样配置结束之后整个小程序所有页面点击右上角转发分享都走的这个文件，如果需要单个页面可以转发，可以看第三点

3、在需要的页面进行调用就行啦

a. 这个是第一种调用方式，用下面这段，总觉得有些麻烦后期不方便扩展与处理

export default {
data(){
    return {
        //设置默认的分享参数
        sharedata:{
            title:'ALAPI',
            path:'/pages/index/index',
            imageUrl:'',
            desc:'',
            content:''
        }
    }
}

b.另外一种调用方式

 //页面分享使用
function pub_show_share(zhege, l_listdata, xml1,fx_title,fx_path, fx_imageurl, fx_desc, fx_content,xml8) {
        if (fx_title){zhege.sharedata.title = '' + fx_title;}
        if (fx_path){zhege.sharedata.path = '' + fx_path;}
        if (fx_imageurl){zhege.sharedata.imageurl = '' + fx_imageurl;}
        if (fx_desc){zhege.sharedata.desc = '' + fx_desc;}
        if (fx_content){zhege.sharedata.content = '' + fx_content;}
}
   
this.$qwbmjs.pub_show_share(_self, '', '','信息资讯','', '', '', '',''); 
//我现在用这种方式，最省事，就一句话处理