微信小程序分享页面,分享到朋友圈

可以前往微信开发文档查看

这个微信已经封装好了
微信小程序分享页面,分享到朋友圈_第1张图片
微信小程序分享页面,分享到朋友圈_第2张图片

看代码

微信小程序分享页面,分享到朋友圈_第3张图片

<template>
  <view>my</view>
  <!-- 进入提示 -->
  <view
    class="sharetip"
    wx:if="{{shareTipShow}}"
    style="height: {{ !bottomNum ? mainHeight-30 : mainHeight}}px"
  >
    <view class="tip_content">点击右上角菜单,可以分享给好友帮忙填写嗷!</view>
    <view class="tip_buttom" catchtap="closeShareTip">我知道了</view>
  </view>
</template>
<script>
import { createPage } from '@mpxjs/core'
import store from '../store'
const app = getApp()
createPage({
  data: {
    mainHeight: app.globalData.mainHeight - 51,
    shareTipShow: true
  },
  computed: {
    bottomNum() {
      return store.state.bottomNum
    }
  },
  onLoad(options) {
    // 从参数判断从哪里来,直接返回分享页
    if (options.from === 'timeline' || options.from === 'share') {
      // 这个可以直接关闭所有页面打开任意的一个页面
      // wx.reLaunch({
      //   url: '/pages/my'
      // })
      // 由于这个是tab页,处理tabActive问题
      store.commit('CHANGE_TABER', 'my')
    }
  },
  methods: {
    // 转发给朋友
    onShareAppMessage(res) {
      console.log(res)
      return {
        title: '测试转发',
        path: '/pages/my?from=share' // 配置分享的页面路径,你也可以写其他的,可以写首页啊
      }
    },
    // 朋友圈
    onShareTimeline(res) {
      return {
        title: '测试转发到朋友圈',
        query: 'test=测试&from=timeline' // 需要携带的参数, 无法自定义路径,只能是当前的分享页
      }
    },
    closeShareTip() {
      this.setData({
        shareTipShow: false
      })
    }
  }
})
</script>
<style lang="stylus" scoped>
.sharetip
  position fixed
  top 0
  left 0
  width 100%
  background rgba(0, 0, 0, 0.6)
  .tip_content
    background #fff
    border-radius 40px
    width 80%
    padding 6px 12px 6px 12px
    position absolute
    top 30%
    right 10%
  .tip_buttom
    position absolute
    top 50%
    left 50%
    transform translateX(-50%)
    background #fff
    border-radius 40px
    padding 6px 12px 6px 12px
</style>

效果

微信小程序分享页面,分享到朋友圈_第4张图片
微信小程序分享页面,分享到朋友圈_第5张图片
微信小程序分享页面,分享到朋友圈_第6张图片

你可能感兴趣的:(微信小程序分享页面,微信小程序分享朋友圈,小程序)