开发分享相关功能

app.wxss

@@ -35,4 +35,10 @@ text {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+}
+
+.resetBtn {
+    padding: 0px;
+    margin: 0;
+    line-height: normal;
 }

component/shareSelect/index.js

@@ -0,0 +1,60 @@
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {},
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        //弹窗显示控制 
+        showModalStatus: true
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        //底部弹出框
+        showModal: function () {
+            // 背景遮罩层
+            var animation = wx.createAnimation({
+                duration: 200,
+                timingFunction: "linear",
+                delay: 0
+            })
+            animation.translateY(300).step()
+            this.setData({
+                animationData: animation.export(),
+                showModalStatus: true
+            })
+            setTimeout(function () {
+                animation.translateY(0).step()
+                this.setData({
+                    animationData: animation.export()
+                })
+            }.bind(this), 200)
+        },
+
+        //点击背景面任意一处时，弹出框隐藏
+        hideModal: function () {
+            //弹出框消失动画
+            var animation = wx.createAnimation({
+                duration: 200,
+                timingFunction: "linear",
+                delay: 0
+            })
+            animation.translateY(300).step()
+            this.setData({
+                animationData: animation.export(),
+            })
+            setTimeout(function () {
+                animation.translateY(0).step()
+                this.setData({
+                    animationData: animation.export(),
+                    showModalStatus: false
+                })
+            }.bind(this), 200)
+        },
+    }
+})

component/shareSelect/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

component/shareSelect/index.less

@@ -0,0 +1,61 @@
+/*使屏幕变暗  */
+.background_screen {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #000;
+    opacity: 0.2;
+    overflow: hidden;
+    z-index: 3;
+    color: #fff;
+}
+
+/*对话框 */
+.attr_box {
+    width: 100%;
+    overflow: hidden;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 4;
+    background: #fff;
+    border-top-left-radius: 30rpx;
+    border-top-right-radius: 30rpx;
+    padding-top: 20rpx;
+    /*兼容 IOS<11.2*/
+    padding-bottom: constant(safe-area-inset-bottom);
+    /*兼容 IOS>11.2*/
+    padding-bottom: env(safe-area-inset-bottom);
+
+    .share_selects {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 30rpx 150rpx;
+
+        .share_select {
+            text-align: center;
+
+            .img {
+                width: 90rpx;
+                height: 90rpx;
+            }
+
+            .text {
+                font-size: 28rpx;
+                color: #333;
+            }
+        }
+    }
+
+    .share_cancel {
+        padding: 30rpx 0rpx;
+        border-top: 1px solid #97979763;
+        text-align: center;
+        font-size: 32rpx;
+        letter-spacing: 4rpx;
+        color: #666;
+    }
+}

component/shareSelect/index.wxml

@@ -0,0 +1,22 @@
+<view class="half-screen">
+    <!--屏幕背景变暗的背景  -->
+    <view class="background_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
+    <!--弹出框  -->
+    <view animation="{{animationData}}" class="attr_box" wx:if="{{showModalStatus}}">
+        <view class="share_selects">
+            <view class="share_select">
+                <image class="img" src="/static/groupImg/weixin.png" mode="" />
+                <view class="text">
+                    微信好友
+                </view>
+            </view>
+            <view class="share_select">
+                <image class="img" src="/static/groupImg/circle.png" mode="" />
+                <view class="text">
+                    微信朋友圈
+                </view>
+            </view>
+        </view>
+        <view class="share_cancel" bindtap="hideModal">取消</view>
+    </view>
+</view>

component/shareSelect/index.wxss

@@ -0,0 +1,55 @@
+/*使屏幕变暗  */
+.background_screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.2;
+  overflow: hidden;
+  z-index: 3;
+  color: #fff;
+}
+/*对话框 */
+.attr_box {
+  width: 100%;
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 4;
+  background: #fff;
+  border-top-left-radius: 30rpx;
+  border-top-right-radius: 30rpx;
+  padding-top: 20rpx;
+  /*兼容 IOS<11.2*/
+  padding-bottom: constant(safe-area-inset-bottom);
+  /*兼容 IOS>11.2*/
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.attr_box .share_selects {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 30rpx 150rpx;
+}
+.attr_box .share_selects .share_select {
+  text-align: center;
+}
+.attr_box .share_selects .share_select .img {
+  width: 90rpx;
+  height: 90rpx;
+}
+.attr_box .share_selects .share_select .text {
+  font-size: 28rpx;
+  color: #333;
+}
+.attr_box .share_cancel {
+  padding: 30rpx 0rpx;
+  border-top: 1px solid #97979763;
+  text-align: center;
+  font-size: 32rpx;
+  letter-spacing: 4rpx;
+  color: #666;
+}

pages/index/index.js

@@ -142,7 +142,7 @@ Page({
         }
 
         /* 关注和我的需要登陆后查看 */
-        console.log(this.data.isLogin,'zzzzzzzzz');
+        console.log(this.data.isLogin, 'zzzzzzzzz');
         if (!this.data.isLogin) {
             wx.navigateTo({
                 url: `../../pages/login/login?index=${myIndex}`
@@ -187,8 +187,6 @@ Page({
             })
             return;
         }
-
-
     },
     showPage: function () {
         let options = this.data.options;
@@ -299,7 +297,6 @@ Page({
          * 活动统计
          */
         if (options.activity) {
-            console.log('统计')
             httpRequestApi.shareAddHotAmount(options.readId).success(res => {
                 console.log(res)
             })
@@ -359,9 +356,6 @@ Page({
         }, (error) => {
             console.log('获取失败', error)
         });
-
-
-
         this.uid = wx.getStorageSync('uid');
         if (options.sid) {
             httpRequestApi.getUserRec(options.sid).success(res => {
@@ -371,18 +365,9 @@ Page({
         } else {
             this.shareGetPage(options)
         }
-        // if (!this.uid || !grade) {
-        //   this.setData({
-        //     isGradeShow: true,
-        //     options
-        //   })
-        //   console.log('没有uid 也不是游客，需要去授权')
-        //   return;
-        // }
         wx.getSystemInfo({
             success: (res) => {
                 console.log('系统', res)
-
                 console.log('nextMargin', res.pixelRatio)
                 console.log('windowHeight', res.windowHeight)
                 console.log('windowWidth', res.windowWidth)

pages/my/index.js

@@ -10,8 +10,6 @@ import {
 import {
     getOpenidNoLogin
 } from '~/utils/httpUtilNoLogin';
-import httpRequestApi from '~/utils/APIClient';
-
 let app = getApp()
 Page({
     data: {
@@ -60,6 +58,7 @@ Page({
             tasks
         })
     },
+
     async getProducts() {
         let products = await getProducts()
         let productVip = products.find(item => {
@@ -68,7 +67,6 @@ Page({
         let productNum = products.find(item => {
             return item.type == 2
         })
-        console.log(productNum, productVip);
         this.setData({
             productNum,
             productVip
@@ -102,9 +100,6 @@ Page({
             url: url
         });
     },
-    goToService() {
-        httpRequestApi.userEvent('SERVICE');
-    },
     switcher({
         currentTarget
     }) {
@@ -112,10 +107,24 @@ Page({
             url: `/pages/index/index?tabbarIndx=${currentTarget.dataset.index}`
         });
     },
+    // 调起广告
     rewardedVideo() {
         if (this.data.tasks.length != 3 || this.data.tasks[2].completed) {
             return
         }
         this.selectComponent('#advert').rewardedVideo();
-    }
+    },
+    /* showShare() {
+        this.selectComponent('#shareSelect').showModal()
+    }, */
+    // 分享配置
+    onShareAppMessage: function (res) {
+        const user = wx.getStorageSync('user');
+        console.log(`/pages/index/index?sid=${user.uid}`);
+        return {
+            title: `邀请你一起来朗读课文`,
+            path: `/pages/index/index?uid=${user.uid}`,
+            imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
+        }
+    },
 })

pages/my/index.json

@@ -1,6 +1,7 @@
 {
     "usingComponents": {
-        "rewardedVideo": "../../component/rewardedVideo/index"
+        "rewardedVideo": "/component/rewardedVideo/index",
+        "shareSelect": "/component/shareSelect/index"
     },
     "enablePullDownRefresh": false
 }

pages/my/index.wxml

@@ -18,7 +18,7 @@
     </view>
     <!-- 用户信息 -->
     <view class="userBox">
-        <image class='avatar' src='{{ userInfo.user.avatar  }}'></image>
+        <image class='avatar' src='{{ userInfo.user.avatar}}'></image>
         <view class="userRight">
             <view class="uRtop">
                 <view class="uRtopleft">
@@ -131,7 +131,7 @@
                     <view class="tcNum">+{{tasks[1].award}}次/每位</view>
                 </view>
             </view>
-            <view class="taskRight">去邀请</view>
+            <button open-type="share" class="resetBtn taskRight">去邀请</button>
         </view>
         <view class="task advert">
             <view class="taskLeft">
@@ -153,4 +153,7 @@
         </view>
     </view>
 </view>
-<rewardedVideo id='advert' bind:taskOver="getTasks"></rewardedVideo>
+<!-- 广告组件 -->
+<rewardedVideo id='advert' bind:taskOver="getTasks" />
+<!-- 选择分享方式 -->
+<!-- <shareSelect id="shareSelect" /> -->

project.private.config.json

@@ -65,6 +65,13 @@
                     "pathName": "pages/product/product",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "用户分享进入",
+                    "pathName": "pages/index/index",
+                    "query": "sid=621993583e41481fbf7af7b355387eca",
+                    "launchMode": "default",
+                    "scene": null
                 }
             ]
         }