什么是微信小程序 微信小程序是一种不需要下载安装即可使用的应用，基本实现APP的功能。开发成本低，推广更容易简单。 什么是公众号 公众号是内容媒体和O2O生活服务的信息化平台。 微信用户8亿以上，微信每月活跃用户已达到5.49亿，微信公众号的数量已破1000万，用户覆盖200多个国家、超过20种语言。 微信小程序和公众号的区别是什么？ 1、定位不同（公众号服务于营销与信息传递，小程序面向产品与服务） 公众号主要用于信息的传递实现人与信息的连接，借助H5 能够实现简单的交互，主要以营销和信息传递为主简单的服务为辅。 而小程序从功能上与公众号有严格区分（不支持关注、消息推送等营销手段），一方面使得产品与服务不至于淹没在公众号营销信息中，另一方支持公众号、朋友圈、群与小程序之间的互动与导流，使得开发者专心做产品与服务，从而为微信带来大量长尾服务叠加微信自身重度服务打造从社交到信息连接再到服务的生态圈。 [图片] 2、实现技术区别（公众号基于H5，小程序基于微信自身开发环境与开发语言） 小程序是微信内的云端应用（所以无需安装），不是原生App，通过WebSocket 双向通信（保证无需刷新即时通信）、本地缓存（图片与UI 本地缓存降低与服务器交互延时）以及微信底层技术优化实现了接近原生APP 的体验。 公众号是基于传统H5 开发与运行，传统H5 运行环境是浏览器，你可以理解为公众号里面放的是一个网站，而小程序是一个APP。 3、功能不同（公众号功能围绕信息展示与营销，小程序面向产品与服务） 微信与公众号在开发语言、设计规范、营销方式、审核机制等功能方面均有较大不同。公众号是一种账号类型，为用户提供信息与咨询发布平台，提供了一种新的信息传播方式，构建与读者之间更好的沟通与管理模式，结合H5以后公众号也能够提供一些简单交互功能。小程序主要旨在提供服务，相比公众号运行更流畅，能够提供更加复杂的产品与服务。公众号功能主要围绕信息传递与营销展开，小程序对营销功能进行了严格控制以与公众号区别，使得小程序的服务在使用体验与便捷性能够得到提升，不至于淹没在公众号过度营销信息中。 4、体验上的差别（公众号操作延时较大，小程序体验接近原生App） 公众号中点击应用功能后顶部出现绿色进度需要等一段时间，对于业务逻辑复杂交互要求高的应用使用起来体验较差。而小程序将会非常流畅几乎无需等待，类似普通APP 操作一样流畅。主要原因是公众号没有本地缓存，所以每次打开都是会请求服务器刷新页面，造成延时较长体验下降，小程序对UI 与图片本地缓存，只需要对服务器请求交互数据，页面切换无需刷新，所以体验能够接近原生APP 的流畅程度。 如果到现在，你还没有自己的小程序，那就是错失了移动互联网时代可能最大的风口。不管你做不做，小程序就在这里，不离不弃，为你带流量。 最后分享一下我收集的小程序源码 https://www.sucaihuo.com/source/0-0-266-0-0-0

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 [图片] 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false }, // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw }) }, getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 }) }, fail: err => { console.log(err) } }) } }) [代码] 最后绘制分享图的自定义组件就完成啦~效果图如下： [图片] tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。