cml 框架小程序转发功能实现

cml 框架小程序转发功能实现

一 场景介绍

在业务系统中经常会遇到转发业务, 例如资讯详情的转发, 下面讲讲如何实现:

二 问题分析

点击右上角 三个点 发现当前页面没有设置分享转发, 搜索得知

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>

此时可以转发页面, 并展示信息

总结

1. 设置页面允许分享

     created(query) {
       wx.showShareMenu({// 开启当前页面的分享,(如需使用多端, 需要封装为多态接口方法调用)
         withShareTicket: true
       })
     }
   

2. 设置分享内容

    onShareAppMessage(ops) {
         const me = this
         return {
            title: ..., //分享出来的资讯的标题
            path: ...
            success: function (res) {
   ...
           },
           fail: function (res) {
   ...
          }
        }
      }
   

参考网站

https://www.cnblogs.com/jane2160/p/11685618.html