找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

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

作者:模板之家 2018-4-23 10:07 2568人关注

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

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宽高*设备像素比可解决,相关问题链接

2、类似淘宝的分享有礼是怎么实现的?
 
就是用户分享的时候,url后面会带个小尾巴,类似r=xxxx之类的,这个xxxx是和用户有一对一关系的.
 
3、如何让无关联appID的小程序重新关联appID呢?
 
问:一开始写小程序的时候选的是无appId,写到一半时,申请到了,怎样把我写到一半的小程序关联到我的新申请的appid上,进行真机测试呢?
 
答:删除项目,重新添加,即可。
 
4、微信小程序主动发起分享
 

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

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

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

 


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)