用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序开发问答《五十七》小程序实时生成可分享卡片的方案 & 主动发起分享 ...

Rolan 2017-7-29 00:15

1、小程序实时生成可分享卡片的方案问:需求背景:用户评论后实时生成一个图文卡片,可保存至手机后分享给朋友,像豆瓣标记某本书后生成的卡片思路之一是用canvas画好图文,后通过API:wx.canvasToTempFilePath(OBJE ...

1、小程序实时生成可分享卡片的方案

问:
  • 需求背景:用户评论后实时生成一个图文卡片,可保存至手机后分享给朋友,像豆瓣标记某本书后生成的卡片

  • 思路之一是用canvas画好图文,后通过API:wx.canvasToTempFilePath(OBJECT)输出为图片,预览该图片,用户可保存该图片到手机,而后可分享给朋友;

  • 一些问题:文字换行html5 canvas通过measureText测量文字宽度来实现换行,而小程序API没有提供这个;

  • 其他:

    1. 不知道能否直接用wxml写好卡片,再将其转化为图片,似乎想多了...

    2. 看到WeZRender:微信小程序Canvas增强组件, 来源于ZRender:一个轻量级Canvas类库,未确定是否能解决文字换行的问题

不知道这种需求,你们是怎么实现的;如果是用canvas,文字换行的问题是怎么解决的;是否还有其他比较重要的问题?


答:
  • 文字换行解决方案:

    • 使用WeZRender绘图,文字间加上"n"换行符,可以成功换行,根据这个,可以限制一行显示固定字数比如20个,在画文字前,先在该换行的位置出入"n";

    • 按照上面这个思路,直接canvas画图的话,也可将文字分多段画

  • 其他的问题:

    • 图片以圆形显示:暂不确定WeZRender可否用一个同样大小的圆来裁切图片,从而使得以圆形显示

    • 卡片圆角:同上

    • canvas输出图片模糊:使得输出宽高为canvas宽高*设备像素比可解决,相关问题链接


就是用户分享的时候,url后面会带个小尾巴,类似r=xxxx之类的,这个xxxx是和用户有一对一关系的.


问:一开始写小程序的时候选的是无appId,写到一半时,申请到了,怎样把我写到一半的小程序关联到我的新申请的appid上,进行真机测试呢?

答:删除项目,重新添加,即可。


问:微信小程序分享是在页面里配置onShareAppMessage

Page({
  onShareAppMessage: function () {
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

但有些小程序会在页面有分享按钮,点击按钮主动分享,这个是怎么实现的呢?

答:弄个按钮,open-type 设置 为 share具体参见

       share 触发用户转发,使用前建议先阅读使用指引 。支持了!1.2.0版本之后!


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: segmentfault 来自: segmentfault问答整理

相关阅读