美文网首页
小程序之 -- 自定义转发内容

小程序之 -- 自定义转发内容

作者: 墨芊baby | 来源:发表于2018-10-30 11:55 被阅读0次

自定义按钮是需要在button标签上写上 open-type='share’属性,在dom中写入button组件
一般自定义按钮和button组件的样式会有冲突, 下面代码就是更改button组件的样式的

html:

<button open-type='share'>分享</button>

css: 去掉边框和背景色

button::after {
  border: none;
}
button {
  background-color: #fff;
}

js:

onShareAppMessage() {
    return {
        title:   '弹出分享时显示的分享标题'  // 默认是小程序的名称
        desc: '分享页面的内容',
        path: '/page/user?id=242&originFrom=share ' // 路径,传递参数到指定页面,originFrom=share是自己定义的页面参数
        imageUrl: 'http://....'    //不传入 imageUrl 则使用页面默认缩略图 图片长宽比是 5:4
    }
}

实际工作中用到的:
onShareAppMessage(res) {
            // 来自页面内转发按钮
            return {
                title: `${this.info.productName}`,
                path: `/pages/checkup/productDetail/index?productId=${this.info.productId}&originFrom=share`, //多个参数拼接使用&连接
                imageUrl: 'http://img.benmu-health.com/wechatV2-mina/exam/share.png'
            }
        }

onload:

onload({ originFrom }){
  this.originFrom = originFrom; //分享链接打开页面接收参数
  wepy.showShareMenu();   //显示转发按钮
}

  • 分享出去的链接进入时显示首页按钮
    (1)分享链接自己定义页面参数 originFrom=share
    (2)onload接收参数
    (3)DOM首页按钮添加条件: v-if="originFrom == 'share'"

相关文章

网友评论

      本文标题:小程序之 -- 自定义转发内容

      本文链接:https://www.haomeiwen.com/subject/bjxgtqtx.html