1.选择组件

uni-app分享组件：下载地址：https://ext.dcloud.net.cn/plugin?id=1938

文件目录

ISO uni-app 微信分享(1) - 图1

share-btn.vue主要就是分享功能的实现

uni-popup.vue是分享组件的弹窗

uni-transition.vue是弹出和关闭的过渡动画

index.vue文件

  1. <template>
  2.     <view class="content">
  3.         <button type="button" @click="shareOn">分享</button>
  4.         <!-- 分享弹窗 -->
  5.         <uni-popup ref="sharepopup" type="bottom">
  6.             <share-btn :sharedataTemp="sharedata"></share-btn>
  7.         </uni-popup>
  8.     </view>
  9. </template>
  11. <script>
  12.     import uniPopup from '../../components/uni-popup/uni-popup.vue';
  13.     import shareBtn from '../../components/share-btn/share-btn.vue';
  14.     export default {
  15.             components: {
  16.             uniPopup,
  17.             shareBtn
  18.         },
  19.         data() {
  20.             return {
  21.                 sharedata: {
  22.                     //分享文件的类型，具体见uin-app官网
  23.                     type: 1,
  25.                     //分享成功后打开的链接
  26.                     strShareUrl: "http://www.baidu.com",
  27.                     strShareTitle: "分享标题",
  28.                     strShareSummary: "分享总结",
  30.                       //图片
  31.                     strShareImageUrl: "http://www.xuelejia.com/xljapp/h5/static/aboutUsLogo.png"
  32.                 },
  33.             }
  34.         },
  35.         methods: {
  36.             //控制弹窗的显示与关闭
  37.            shareOn(){
  38.                this.$refs.sharepopup.open();
  39.            }
  40.         }
  41.     }
  42. </script>

share-btn.vue文件

  1.     uni.share({
  2.                         provider: strProvider,
  3.                         scene: strScene,
  4.                         type: mytype,
  5.                         href: this.sharedataTemp.strShareUrl,
  6.                         title: this.sharedataTemp.strShareTitle,
  7.                         summary: this.sharedataTemp.strShareSummary,
  8.                         imageUrl: this.sharedataTemp.strShareImageUrl,
  9.                         success: function(res) {
  10.                             //可以在这里执行成功后的操作
  11.                             console.log("success:" + JSON.stringify(res));
  12.                         },
  13.                         fail: function(err) {
  14.                             //失败后的操作
  15.                             console.log("fail:" + JSON.stringify(err));
  16.                         }
  17.                     })

微信开发者平台填写

微信开发者平台:https://open.weixin.qq.com/

1、创建新应用

20161203174346084608.png

2、填写相关基础信息

20161203174463796379.png

3、填写平台信息

20161203173986058605.png
官网需要包含应用名称等文字信息(重要，不然审核不易通过)

4、iOS应用填写

2016120317400151151.png
第一个选项可以不填
第二个选项：苹果开发者账号打开，里面有
20191231155912407奋斗的.png

平台地址：https://developer.apple.com/

选择应用未上架，选择上架就会进行人工审核，可以等以后在更改

5、安卓应用填写

20161203174077327732.png
填写应用签名和应用包名

应用签名如果不知道可以安装微信开发者平台下的获取签名工具

下载地址：https://developers.weixin.qq.com/doc/oplatform/Downloads/Android_Resource.html

捕获.PNG
打开工具，输入包名，如图
20190312131103169.png

6、提交审核，先审核通过再说，只要审核通过，其他的信息是可以不审核就修改

安卓分享配置

1、拿到获取到的微信开发者平台获取的AppID

20161203174476037603.png

2、放到uni-app

manifest.json—》AppSDK配置—》分享，添加进去

Inkedda6b1be0-4f2c-11eb-8a36-ebb87efcf8c0_LI.jpg

3、打包测试

ios获取通用链接

1、配置

苹果开发者账号打开

打开这个选项
20191231155912407.png

1、生成ios通用链接

2、放到服务器官网的指定目录下

3、测试通用链接只要title 通过就行

4、在微信上填写ios通用链接，地址只需要到官网就行

4、填写到uni-app上

5、打包测试