前沿拓展：

微信朋友圈小程序

步驟如下：
打開微信聊天軟件，在我里選擇收藏并點擊打開；
在我的收藏頁面找到要分享到朋友圈的小程序，并點擊打開；
在要分享的小程序頁面上面點擊右上角的分享圖標，然后選擇分享到朋友圈；
打開要分享的小程序之后，編輯文字，準備就緒就可以發送了。

來源 | 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對比，猜猜誰優誰劣