cml 框架小程序转发功能实现
cml 框架小程序转发功能实现
文章目录
- cml 框架小程序转发功能实现
- 一 场景介绍
- 二 问题分析
- 1. 设置页面允许分享
- 2. 设置分享内容
- 3.结果展示
- 三 提高篇
- 多态封装
- 总结
- 参考网站
一 场景介绍
在业务系统中经常会遇到转发业务, 例如资讯详情的转发, 下面讲讲如何实现:
二 问题分析
点击右上角 三个点 发现当前页面没有设置分享转发, 搜索得知
https://www.cnblogs.com/jane2160/p/11685618.html
这里我们需要实现的是第一种, “自带菜单的分享”,
1. 设置页面允许分享
观察看到有个 onLoad ** 生命周期方法, 这个方法在cml** 中是对应的哪一个, 所以需要找到onLoad 对应的生命周期方法, 查阅文档:
https://cml.js.org/doc/example/wx_to_chameleon.html?h=生命周期
发现对应的是created 方法, 将上面的代码cml写法:
<script>
import cml from 'chameleon-api'
class Detail {
...
created(query) {
wx.showShareMenu({// 开启当前页面的分享,(如需使用多端, 需要封装为多态接口方法调用)
withShareTicket: true
})
}
...
}
export default new Detail();
</script>
2. 设置分享内容
这个方法要写在cml methods对象中, cml写法:
<template>
<view class="article">
<text class="article-title">{{ title }}</text>
<view class="article-content">
<m-rich-text nodes="{{ content }}"> </m-rich-text>
</view>
</view>
</template>
<script>
import cml from 'chameleon-api'
import api from '../../components/api/api' // 引用多态方法
class Detail {
data = {
title:'',
content: ''
}
computed = {
}
methods = {
onShareAppMessage(ops) {
const me = this
return {
title: me.title, //分享出来的资讯的标题
path: `pages/detail/detail?title=${me.title}&content=${me.content}`,// 传入页面的query参数(进入beforeCreate中)
success: function (res) {
// 转发成功
console.log("转发成功:" + JSON.stringify(res));
},
fail: function (res) {
// 转发失败
console.log("转发失败:" + JSON.stringify(res));
}
}
}
}
beforeCreate(query) {
this.title = decodeURIComponent(query.title) || ''
const content = decodeURIComponent(query.content)
this.content = content || ''
}
created(query) {
wx.showShareMenu({// 开启当前页面的分享,(如需使用多端, 需要封装为多态接口方法调用)
withShareTicket: true
})
}
}
export default new Detail();
</script>
3.结果展示
三 提高篇
多态封装
多态接口方法
https://cmljs.org/docs/poly.html#%E5%A4%9A%E6%80%81%E6%8E%A5%E5%8F%A3
src\components\api\showShareMenu\index.interface
<script cml-type="interface">
interface ShowShareMenuInterface {
showShareMenu(): void;
}
</script>
<script cml-type="wx">
class Method implements ShowShareMenuInterface {
showShareMenu() {
wx.showShareMenu({
// 要求小程序返回分享目标信息
withShareTicket: true
});
}
}
export default new Method();
</script>
src\components\api\showShareMenu\index.js
import index from './index.interface';
export default function showShareMenu() {
index.showShareMenu();
}
src\components\api\api.js
可以扩展多态方法
import makePhoneCall from './makePhoneCall/index.js'
import showShareMenu from './showShareMenu/index.js'
export default {
makePhoneCall,
....
showShareMenu
}
此时页面Page层调用如下
src\pages\detail\detail.cml
<template>
<view class="article">
<text class="article-title">{{ title }}</text>
<view class="article-content">
<m-rich-text nodes="{{ content }}"> </m-rich-text>
</view>
</view>
</template>
<script>
import cml from 'chameleon-api'
import api from '../../components/api/api' // 引用多态方法
class Detail {
data = {
title:'',
content: ''
}
computed = {
}
watch = {
}
methods = {
onShareAppMessage(ops) {
const me = this
return {
title: me.title, //分享出来的资讯的标题
path: `pages/detail/detail?title=${me.title}&content=${me.content}`,// 传入页面的query参数(进入beforeCreate中)
success: function (res) {
// 转发成功
console.log("转发成功:" + JSON.stringify(res));
},
fail: function (res) {
// 转发失败
console.log("转发失败:" + JSON.stringify(res));
}
}
}
}
beforeCreate(query) {
this.title = decodeURIComponent(query.title) || ''
const content = decodeURIComponent(query.content)
this.content = content || ''
}
created(query) {
api.showShareMenu() // 多态方法的调用
}
}
export default new Detail();
</script>
此时可以转发页面, 并展示信息
总结
-
设置页面允许分享
created(query) { wx.showShareMenu({// 开启当前页面的分享,(如需使用多端, 需要封装为多态接口方法调用) withShareTicket: true }) } -
设置分享内容
onShareAppMessage(ops) { const me = this return { title: ..., //分享出来的资讯的标题 path: ... success: function (res) { ... }, fail: function (res) { ... } } }
参考网站
https://www.cnblogs.com/jane2160/p/11685618.html