小程序实战(八)-分享链接

一、需求说明

1. 点击按钮，可分享一个推广页面的链接给朋友
2. 这个链接需要带参数，标识推广者是谁
3. 设置分享链接的图片

二、需求实现

2.1 分享链接

1. 增加 button 标签，使用微信提供的开放能力，将 open-type 属性设置为 share

<button open-type="share">分享链接</button>

附上 open-type 可接受的属性值：

2. 当用户点击这个按钮，会触发 onShareAppMessage 事件，在这个处理函数中返回一个包含分享的页面路径的对象：

Page({
    onShareAppMessage() {
        return {
            path: '/pages/examplePage'
        }
    }
})

2.2 链接带参数

直接在路径上拼参：

Page({
    onShareAppMessage() {
        return {
            path: '/pages/examplePage?flag=1' 
        }
    }
})

2.3 设置分享链接的图片

返回对象时可配置一些属性，如转发标题、链接图片等：

Page({
    onShareAppMessage() {
        return {
            title: '分享',
            path: '/pages/examplePage?flag=1' ,
            imageUrl: '/images/share_icon.png'
        }
    }
})

附上配置的属性列表：

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。

目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~