微信朋友圈小程序(微信朋友圈小程序设置)

前沿拓展：

微信朋友圈小程序

步骤如下：
打开微信聊天软件，在我里选择收藏并点击打开；
在我的收藏页面找到要分享到朋友圈的小程序，并点击打开；
在要分享的小程序页面上面点击右上角的分享图标，然后选择分享到朋友圈；
打开要分享的小程序之后，编辑文字，准备就绪就可以发送了。

来源 | https://www.cnblogs.com/MohunBlogs/archive/2018/05/23/9079942.html

小程序提供onShareAppMessage 函数，此函数只支持分享给我微信朋友。小程序如何分享到朋友圈呢？我提供的方法是，使用canvas绘制一张图片，并用wx.previewImage预览图片，然后长按图片保存图片到手机。

再通过发朋友圈的方式，选择保存的图片，当用户浏览朋友圈时，可以长按图片、识别图中二维码进入小程序。

效果展示：

准备工作和小程序配置（步骤一和步骤二）

配置小程序下载域名(不效验合法域名，可忽略此选项)，准备一张带有小程序二维码的图片、一张背景图、内容缩略图

Page({
data: {
bgImg: "http://image.lqmohun.com/canva**g.jpg", //背景图
dataImg: "http://image.lqmohun.com/ceshi.jpg", //内容缩略图
ewrImg: "http://image.lqmohun.com/erweima.jpg", //小程序二维码图片
systemInfo: null, //系统类型
canvasWidth:0, //canvas的宽
canvasHeight: 0 //canvas的高
},

步骤三：下载需要的图片资源到本地

downloadImages: function () {

let that = this;
wx.downloadFile({ //背景图
url: that.data.bgImg,
success: function (res) {
wx.downloadFile({ //内容缩略图
url: that.data.dataImg,
success: function (res1) {
wx.downloadFile({
url: that.data.ewrImg,
success: function (res2) {// 小程序二维码图
that.convas(res.tempFilePath, res1.tempFilePath, res2.tempFilePath);
},
fail: function () {
}
});
}
});
}
})
},

步骤四：将需要分享的信息绘制成图片

convas: function (bgImg, dataImg, ewrImg) {
let that = this;
var ctx = wx.createCanvasContext('myCanvas');
var scWidth = that.data.systemInfo.windowWidth;
var scHeight = that.data.systemInfo.screenHeight;
var defaultHeight = 0.020 * that.data.systemInfo.screenHeight;
//第一步：刻画背景图
ctx.drawImage(bgImg, 0, 0, scWidth, scHeight);
//第二步：刻画背景色
ctx.setFillStyle('white');
ctx.fillRect(20, 30, scWidth-40, scHeight-60);
//第三步：刻画内容缩略图
var imgHeight = parseInt(this.imageProportion());
ctx.drawImage(dataImg, 20, 30, scWidth – 40, imgHeight);
//第三步：刻画标题
ctx.setFontSize(0.056 * scWidth);
ctx.setFillStyle('#333333');
ctx.setTextAlign('center');
ctx.fillText("食物美容，远离肌肤衰老", (scWidth) / 2, imgHeight + 63 + defaultHeight );
//第四步：刻画内容;(备注：canvas好像没有自动换行，有需要此步骤的同学，可根据canvas宽度，设置文字个数)
ctx.setFontSize(0.044 * scWidth)
ctx.setFillStyle('#333333');
ctx.setTextAlign('left');
ctx.fillText("简介：岁月如刀，刀刀催人老，到我们25", 35, imgHeight + 100 + defaultHeight);
ctx.fillText("岁的时候，皮肤就开始进入衰老期，皱纹", 35, imgHeight + 125 + defaultHeight);
ctx.fillText("、色斑。皮肤松弛等现象逐渐出现，这时", 35, imgHeight + 150 + defaultHeight);
ctx.fillText("，抗衰老工程也正式展开。", 35, imgHeight + 175 + defaultHeight);
// 第五步：刻画小程序码
ctx.drawImage(ewrImg, 35, imgHeight + 200 + defaultHeight, 120, 120);
//第六步：提示用户，长按图片下载或分享
ctx.setFontSize(0.050 * scWidth)
ctx.setFillStyle('#333333')
ctx.fillText('长按码查看详情', 165, imgHeight + 250 + defaultHeight);
ctx.fillText('小程序名字', 165, imgHeight + 280 + defaultHeight);
//第七步将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中

ctx.draw(false, function (e) {
//第八步：生成图片并预览
that.imageGeneratePreview();
});
}

小程序canvas做测试时，文字好像不能自动换行。提供一种比较笨的方法，根据屏幕宽度判断文字个数，循环绘制文字就行了；

this.imageProportion()的方法获取缩略图等比例缩小之后的宽高。defaultHeight不同宽高屏幕，绘制内容上下间距优化。

步骤五：将canvas画布导出成指定大小图片、并预览

imageGeneratePreview: function () {
let that=this;
//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
wx.canvasToTempFilePath({
width: this.data.systemInfo.windowWidth,
height: this.data.systemInfo.screenHeight,
destWidth: this.data.systemInfo.windowWidth * 3,
destHeight: this.data.systemInfo.screenHeight * 3,
canvasId: 'myCanvas',
success: function (res) {
//预览图片
wx.previewImage({
urls: res.tempFilePath.split(','), // 需要预览的图片http链接列表
fail: function (res) {
console.log("预览图片失败" + res)
}
})
},
fail: function (res) {
console.log("出错了:"+jsON.stringify(res));
},complete:function(){
wx.hideLoading();
}
})
},

备注：

测试手机（苹果5，华为）

本文章只提供一种思路，具体排版还请以实际项目为主。

我是@半糖学前端 ，专注前端技术领域分享，关注我和我一起学习，共同进步！

拓展知识：

微信朋友圈小程序

App 面向所有的智能手机用户，约23亿台；小程序面向微信用户，约8亿用户。
二、 功能的实现
App可以实现完整功能，灵活性强；小程序仅限微信提供的接口功能。小程序低频、非刚需、轻量级、功能单一，高频刚需还是要靠APP。
小程序提供框架和 API，基于 HTML5 进行开发，对接开发者现有的APP后台的用户数据，其开发难度比APP低。虽说是小程序但是也能够实现很多功能，比如消息通知、线下扫码、公众号关联等。小程序还能帮你查找附近的一些应用，这又方便了不少。但是对于一些需要大量计算的功能类应用，如图片处理或文档编辑，小程序是无法满足的。小程序更贴近于生活中的吃喝玩乐。
APP的视觉效果设计得更加人性化和绚丽。开发设计者的能力有多大，APP就越让人惊艳。因此， APP能够在交互、视觉等用户体验上满足用户的高要求。如果你想要一个更丰富、更细化、个性化的功能，这都是需要更大容量来实现，那么这就需要在APP上去承载。
三、自主性
小程序的优势就是背靠微信，引流效果好。但是微信对小程序进行了诸多限制，特别是流量获取方面，很多使用的营销策略在小程序被腾讯禁止，比如**分销，腾讯封号严重而且没有事先的警告，很难申述；而APP内部的功能、内容由**全权把控。
四、发布展现
就发布上来讲，APP需要向十几个应用商店提交资料，流程繁琐；小程序只需要提交到微信公众平台审核。
就展现来讲，App可根据自己需求放置手机屏幕位置，随手可点击打开；小程序只有一个基于使用顺序排列的列表，不能直接点击，需要打开微信-发现-小程序，过程相对冗长。
五、 下载安装
App需要用户主动下载，对网络环境依赖性强；小程序通过二维码、微信搜索等方式直接获得。微信是一个集中展示小程序的商店，我们只能通过二维码或者搜索小程序的名称，以及微信群或好友分享来使用小程序。
APP可以在APP Store，Android市场，360手机助手、百度应用、安全管家等应用市场进行下载安装。下载渠道是相对较多的。
小程序是与微信一同占用手机空间，内存较小，对于手机内存较小的用户，微信小程序就是一个福音。而APP需要**下载，占用内存较多。
六、 开发周期
因为微信小程序实现的功能较少，大大虽短了开发周期，其平均开发周期只需2周的时间。那么一个完整的APP平均开发周期需要1个月。开发一个APP的时间花费是小程序的2倍，甚至更多。
总的来说，微信小程序和APP是各有各的优势。微信小程序时间和资金投入较少，能够满足一些初创团队。APP能够满足一些复杂度高的产品，适合比较成熟的公司。
七、开发成本
App的界面内容更丰富，运转速度快，系统更加流畅，从表面上看小程序是APP的缩减版，但实际上，小程序在界面流程上进行了大量的简化，实现的只是核心服务。小程序在很多功能、用户体验等方面还是比不上APP，但是小程序开发成本比APP要低得多，并且不允许推送广告。
总结一下，小程序拥有相对优秀的交互体验、分享增加的拉新能力。但小程序并不是APP的革命者，更像是一个助手，通过在微信内的延伸，帮助企业打通 APP 和微信，“以老带新，以高频带低频，以服务带交易”。微盛小程序作为专业的第三方服务平台，致力于持续为各大商家企业服务，助力在新一波小程序爆发期中收割红利。

微信朋友圈小程序

APP需要单独下载并在手机上安装之后才能使用它的功能。而微信小程序是集成在微信中的，只需要在微信中搜索出来添加一个名称就可以使用了。

由于APP需要安装，所有会占用手机内存空间，不同的APP占用的空间大小是不一样的。小程序是通过html5网页技术来实现的，需要使用什么功能就加载什么页面，使用完后关闭页面即相当于卸载。所以小程序几乎不占用手机空间。

APP是基于**作系统开发，直接调用手机系统的原生功能，所以速度方面会略快。而小程序是通过中转后再去调用系统中的功能，所以响应速度略慢。

在开发阶段，如果不考虑权限的话，APP可以调用手机上的任意功能，所以APP的功能设计更加灵活。而小程序调用的功能受微信控制，只能使用它开放给你使用的功能。当然腾讯为了发展小程序，肯定会开放尽量多的功能给你。

升级的时候，APP必须重新下载和安装新版本的APP。而小程序的升级对使用者来说是毫无感知的，使用进入的时候自动就是最新版本了。

本回答被提问者采纳

微信朋友圈小程序

微信小程序和APP各有各的好处，适合自己最重要。至于两者的区别，有以下几点：
1.APP**作流程复杂，小程序**作简单流畅。
2.APP占用手机内存，小程序无需下载，用完即走。

3.APP开发成本高，小程序 基于微信，微信体系内无缝打通。

4.获取用户成本高，小程序有众多入口，容易获取用户。

微信朋友圈小程序

微信小程序和APP对比，猜猜谁优谁劣