13. 尚硅谷_Mpvue_分享功能实现

好来我们继续啊，那上节课呢，我们去把这个详情页呢，我们外数据呢，已经动态显示了，那在详情页里面呢，咱们还有一个八啊，上节课没有整，那这个button呢，分享给好友，哎，这个分享的功能呢，大家其实在平时用的小程序里面应该也见到过啊，就是一点击分享，哎，我们是可以把这个页面连在小程序什么分享给别人，别人一点的话，相当于是安装上那个小程序，然后呢可以访问对应的页面。哎，那怎么去做这个功能呢？首先我们得来看来来到我们这里边，在pages我们找到这个detail，嗯，往上大家看咱们这是不是写了一个普通的button，哎，那这个时候呢，你看我这一点击它是没有任何反应的，而我写好的这个大家可以看一下，来过来我点击，诶这儿是不是可以分有分享的这个弹窗呀，那这个是怎么做到的呢？首先呢，在这儿我得说一下，呃，之前我们在创建这个小程序的时候啊，呃，创建这个小程序项目的时候呢，我们上来，呃，我们说了刚开始如果是没有APPID的话，咱们。

在这个项目的配置文件里边啊，在这儿，这是不是一个游客ID，哎，那后来呢，我呢是把它换成了对应的APPID，哎，在哪找呢？就是在我们上来啊，通过我们的这个账号密码登录上来以后，嗯，来到这个界面，然后呢，我们选择开发的选项，在开发选项里面右侧第二栏啊，这儿呢，就有我们对应的APID，那这个时候呢，大家应该是把这个呃先加上来，避免呢，我们有些权限没有，如果说大家把这个自己的APPID填好了以后，来我们就可以把这个关掉，那这个时候呢，我们应该是来到我们对应的开发文档里面，咱们去找一下对应的组件，哪个组件呢？那就是我们要用的button，那这个button呢，是在表单组件里面，第一个就是它。

来往下翻，往下翻，其中有一个属性叫open type，那对应的说是微信的开放能力，那都有哪些开放能力呢？我们可以往下看一下这个open type详细的说明，哎，在这一侧，这有一个open type的合法值，其中有一个呢叫下触发用户转发，那这个时候呢，我们先给它设置一下这个属性啊，对应的属性名呢叫嗯，Open，然后呢，T值呢叫share，来把这个添加好以后，我们重新看一下我们的项目啊走过来。

靠一点几，哎，这个时候呢，大家看，呃，我们上来是能出现这个弹窗对吧，然后呢，这一侧我们还能看到一个报错，哎说是什么，在这个function里面不能读一个属性叫apply，首先呢，这个方法呢，我们现在还没有，那这个时候大家再看一下我这写好的这个区别。在这儿呢，我有一个什么硅谷书城，这个是当前我们小程序账号的名称啊，那你看我写好了这个这什么没有啊，哎，我写咱们现在这个没有，那我写好那个为什么有呢？那是因为我可以自定义你分享的内容来这个时候呢，我们来到官网继续看，那再往下呢，其实它就没有明确的说明了，但是呢，大家看这啊，使用前先去读这个使用指导，那这是一个链接，我们可以去访问一下来，这是专门针对于我们这个转发的一个说明啊，其实内容呢有很多，我们重点去看这啊，通过给button呢设置这个open type被share，就可以在用户点击按钮后触发。

什么？其实是转发？同时呢，他还说了，佩姐的这个世界也能被触发。哎，这个配置是谁呢。这个时候大家想象我们原生小程序的每个页面是不是都有一个配置调用，而且我们知道在配置里面对应的是不都有自己的生命周期函数啊，在这儿呢，我们要能分析出来的是啥，这个配件其实代表的就是当前页面的实例，而这个呢，对应的也是一个回调函数，只不过是这个回调是在点击这个设置为open time为share的时候的button，它才会触发。呃，所以呢，这个对应的实间呢，我们需要定义，呃，在哪定义呢？呃，Mounted是吧，唯有组件的生命周期函数啊啊，其实在这儿呢，这个世界啊同mounted它们是平级的，那我们可以验证一下是不是啊，这个是用户啊，点击转发好了，写完了以后我们来到页面里面。

再一次点击大家看那个事件是不是被触发了，而且之前的报错是不是也没有了，哎，其实之前的报错呢，就是因为我没有，我们没有什么设置对应的回调。OK，那这个转发呢，呃，到现在为止其实已经可以发送了啊，但是大家看啊，我在这一点发送没有任何反应，哎，说到底呢，现在我们处在的环境还是小程序的开发工具啊，这属于它的模拟环境。哎，其实真正你要去看这个功能的时候，大家最好是在这儿点击预览，然后呢，去拿你的真机去扫一下啊，上边给我们的二维码，稍等他在编译。

OK，扫这个二维码，把小程序装到你的真机上，你点击转发，是可以发送给你的微信好友以及微信群的。嗯，好，那这个转发的功能其实不难，那接着我们还可以呃去控制它，或者去设置它转发的内容，呃，在这呢，其实没有明确的说明了，然后大家看啊，这个on share，哎，APP message，它也是一个链接，那这个时候呢，我们过来看一下。哎，在配置里面有一项叫on share APP message，来，我们点击一下，这有明确的说明接听这个页面内转发或右上角菜单转发按钮的行为，在这呢，我得强调一个事情，大家看，如果说我没有写这个on share message，这个对应的回调我们看一下啊，来来，回到我们的页面，我点击分享，除了这会报错，对吧，你看一下右上角的这个。

哎，咱们平时用小程序的时候，点击右上角这个三个点，通常来说下边这儿是不是也有一个转发呀，那这个时候如果说你不设置对应的回调的话，你连转发的功能都没有来，我们还原了以后再去看一下啊，好点击这个转发走，这儿是不也有一个转发的选项，哎，这个功能呢，跟我们在页面内点击button是一样的啊，是一样的，好，知道了这个以后，我们再看一下啊，这个方法对应的。嗯，这是一个什么。有一个对象，那这个对象参数对象呢，可以有什么from target，哎哎，这就是说可以这些东西都是干嘛的呢？可以自定义转发的内容，而且这儿也说了。

只有定义了这个事件处理函数，右上角的菜单才会显示转发的按钮。那再往下我们再来看这个事件处理函数呢，需要return的一个对象啊，用于自定义转发的内容，返回的内容如下，那也就是说在这儿的内容是我们自定义返回的内容，而上边这个参数呢，是我们可以规定在转发的时候。干嘛呀？哎，它里面的一些事件参数，比如说我点击的是button呀，还是右上角的menu呀，包括我的目标是谁呀，都可以去设置。那这个时候我们真正关心的是谁呢？是我们转发的内容，哎，如果说大家看不清楚的话，往下看，这儿有案例，哎，这是那个方法，只不过是他在这做了个判断啊，那就是说这个方法，你看对应的有个事件对象，那这个事件对象呢，我可以给大家打印一下，比如说叫嗯，Event，那那这个时候呢，我们先去对这个event进行一个输出，来到我们的项目里面点击一下。

点击转发答，看这是把那个世界对象，那这说的很清楚啊，From target来自哪了？是个button，哎，这个from啥意思呢？我再给大家点一下右上角这个按钮你就知道了，走这是不是也有一个对象，那这个时候呢，From呢叫menu啊，就是导航的按钮，菜单按钮。好，呃，这是这一个啊，这是我们世界对象，那世界对象这其实对于我们来说用处不大啊，这只是去判断一下到底是点的是哪。对吧，那重点是下边的内容，哎，如果你要自定义转发内容，那你就需要手动ard当前的内容，Ard一定是一个什么，一定是一个对象，OK，那这个对象呢，有什么呀？首先有title啊，这是自定义转发的标题啊，自定义转发的标题，比如说这叫哎硅谷图书，然后呢，还有什么呢？哎。

你要转发给别人，那你要说声明你当前转发的是哪个页面，所以呢，对应的有个pass，那再看这个pass的时候，我们往上看，这有个详细的说明啊，转发的路径必须是什么当前页面的pass，哎，而且呢，必须是以什么跟路径开头啊，说的很详细了啊，在这呢，我们来一个pass，那当前一面那就是page下边的嗯，Detail下边的什么me，同时呢，你要传参的话，是不是还可以传参啊，那除了这个还有什么image URL，就是我们可以去自定义那个图片的路径，就是说你转发的内容，它不是应该有一张图片吗？那这个图片是由我们来设置好在这呢，我去写一下啊，首先把这个拎过来，在这呢，我去找这个static下面啊，我们有个images，然后呢，呃。

First view相片，我们有个女神点PNG。啊，就是用我特定的一张图啊，那这个时候来到我们那一面，咱们来看一下，点击过来走你呃，现在那个图片没出来，那十有八九是什么，是我这个图片路径写的不对了，我们看一下static image下边，哎，First view女神很有可能是个GBG了，来看一眼，哎，果然是它，那后面这个我们去换一下，保存一下，我们再来一遍。点击过来分享，嗯，是不是就有了这个呢？其实在真机的体验效果更好啊，建议大家用真机去看一下最终的效果。

好，那这节课呢，我们就讲了一个分享的功能，好，我先暂停一下视频。