欧美人与动牲交zooz,久久这里只有精品18,啦啦啦在线视频免费观看高清 ,欧美激情网,国产欧美亚洲高清 ,久久综合噜噜激激的五月天

作為微信小程序最重要的功能模塊之一--分享模塊功能，在營(yíng)銷運(yùn)營(yíng)方面有著無(wú)可替代的作用，可以說(shuō)分享模塊沒(méi)做好，運(yùn)營(yíng)小程序就被砍掉了一大臂膀，那么在開發(fā)小程序時(shí)有什么需要注意的呢？

小程序分享基礎(chǔ) API 介紹

微信分享的 API 只提供了分享給微信好友的能力，并沒(méi)有提供分享朋友圈的能力，這是為啥子呢?。?！

從網(wǎng)上收集的一些咨詢來(lái)看，主要有如下兩點(diǎn)原因:

1. 由于微商泛濫，公眾號(hào)雞湯泛濫，朋友圈質(zhì)量已經(jīng)有所下降，如果小程序再開放分享朋友圈功能，可能會(huì)進(jìn)一步影響到整個(gè)微信生態(tài)，造成用戶活躍度下降，用戶流失等問(wèn)題。
2. 微信不讓小程序在朋友圈轉(zhuǎn)發(fā)，更多是保護(hù)朋友圈的”廣告位”陣地，不能夠讓這塊”肥肉”變成了公益設(shè)施。

用法：

Page({ onShareAppMessage: function(){
         return { title: 'xxxxx', //自定義轉(zhuǎn)發(fā)標(biāo)題 path: '/page/user?id=123', //分享頁(yè)面路徑 imageUrl: '/common/images/xxx.png' //分享圖片 寬高比 5:4 }
    }
}) //如果只寫成如下形式，title默認(rèn)是小程序名，path為當(dāng)前頁(yè)面路徑（不帶參數(shù)），imageUrl為當(dāng)前頁(yè)面截圖 Page({ onShareAppMessage: function(){}
})

觸發(fā)方法（一定要在 page 中先寫入上述方法）:

1. 點(diǎn)擊小程序的膠囊菜單，會(huì)從底部彈出轉(zhuǎn)發(fā)選項(xiàng)。
2. <button> 組件 open-type="share" 即 <button open-type="share"> ,點(diǎn)擊后觸發(fā)。

觸發(fā)后效果如下：

基于 canvas 動(dòng)態(tài)繪制分享圖片

因?yàn)槊總€(gè)頁(yè)面的信息很多都是通過(guò)接口返回或者用戶輸入產(chǎn)生，是在不斷變化的，設(shè)計(jì)師所畫的靜態(tài)圖片肯定是不足以去展示這些信息的，那么我們就要想，有沒(méi)有一種辦法，是可以把 靜態(tài)圖片 和 動(dòng)態(tài)信息 繪制在一起后在生成一張 新的圖片 ?答案是肯定的?。?！

把圖片和文字畫在一起？我們就一定會(huì)想到神奇的 canvas ，根據(jù)小程序 畫布 相關(guān)的 API 繪制如下：

//創(chuàng)建畫布（組件中一定要綁定this,切記?。。。?/span> var ctx = wx.createCanvasContext('myCanvas', this); //畫布上繪制圖片 ctx.drawImage(path, 0, 0, width, height); //畫布上繪制文字 ctx.setFillStyle('#fff');
ctx.setFontSize(32);
ctx.fillText(startTime, 24, 54); //其他信息繪制 //...  ctx.draw();

上述已經(jīng)通過(guò) canvas 把圖片和文字繪制到了一起，那如何把這個(gè)畫布轉(zhuǎn)成一個(gè)圖片，供開發(fā)者使用呢？

強(qiáng)大的小程序給我們提供了原生的方法: wx.canvasToTempFilePath

//在上面代碼的draw()的回調(diào)中使用wx.canvasToTempFilePath
var that = this;
ctx.draw(true, () => {
    setTimeout(() => {
        wx.canvasToTempFilePath({
            canvasId: 'myCanvas',
            success: (res) => { 
                that.setData({ //res.tempFilePath 生成圖片的臨時(shí)路徑
                    picUrl: res.tempFilePath
                });
               
                
            }
        }, that); //在組件中使用這里一定記得要綁定this，切記！??！
    }, 300); //此處加入300毫秒延時(shí)是為了解決小程序繪制過(guò)程中的渲染問(wèn)題
});

把圖片路徑傳遞給 <image> 標(biāo)簽,得到下圖結(jié)果。

<image src="{{picUrl}}"/>

同理：把 picUrl 賦值給 onShareAppMessage 中的 imageUrl ,分享出去后的圖片則帶有了動(dòng)態(tài)信息！

對(duì)不同來(lái)源圖片的處理（本地圖片， 網(wǎng)絡(luò)圖片 ， base64圖片 ）

在上面的例子中，繪制本地圖片時(shí)直接使用 ctx.drawImage(path, 0, 0, width, height) , path 直接傳入圖片路徑即可。但是如果是 網(wǎng)絡(luò)圖片 或者是 base64 的圖片時(shí)， drawImage 是無(wú)法直接繪制的 ，下面就介紹下針對(duì)上述兩種情況如何做兼容處理。

1. 網(wǎng)絡(luò)來(lái)源圖片

//將網(wǎng)絡(luò)圖片轉(zhuǎn)換為本地路徑 handleNetImg: function(imagePath) { var that = this; return new Promise((resolve, reject) => {
        wx.getImageInfo({ src: imagePath, success: function(res) {
                resolve(res);
            }
        });
    });
}

handleNetImg('網(wǎng)絡(luò)圖片地址').then((res) => { console.log(res.path); //輸出轉(zhuǎn)換后的本地圖片路徑 ctx.drawImage(res.path, 0, 0, width, height); //此時(shí)圖片即可在畫布上繪制出來(lái) })

1. base64 圖片

使用 ctx.drawImage(base64Data, 0, 0, width, height) 在小程序開發(fā)者工具上是可以繪制的， 然而！??！這個(gè)大騙紙?。?！真機(jī)上是失效的?。。。ㄐ乃橐环昼?。。。）

跟上面類似的思路，我們把 base64的圖片 轉(zhuǎn)為本地的 png圖片

var handleBase64Img = function() { //wx.getFileSystemManager 小程序文件管理器 var fsm = wx.getFileSystemManager(); var FILE_NAME = 'base64src'; var base64src = function(base64data) { return new Promise((resolve, reject) => { //解析base64，提取出圖片類型: imgtype,解析內(nèi)容bodyData（去掉data:image/png;base64,以后的內(nèi)容） var [, imgType, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []; if (!imgType) {
                reject(new Error('ERROR_BASE64SRC_PARSE'));
            } /**
             *wx.env.USER_DATA_PATH
             *本地用戶文件
             *本地用戶文件是從 1.7.0 版本開始新增的概念。提供了一個(gè)用戶文件目錄給開發(fā)者，開發(fā)者對(duì)這個(gè)目錄有完全自由的讀寫權(quán)限。通過(guò) wx.env.USER_DATA_PATH 可以獲取到這個(gè)目錄的路徑。
             */ var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`; //按指定寫入文件的字符編碼encoding，向地址filepath，寫入數(shù)據(jù)data。 fsm.writeFile({
                filePath, data: bodyData, encoding: 'base64',
                success() {
                    resolve(filePath);
                },
                fail() {
                    reject(new Error('ERROR_BASE64SRC_WRITE'));
                },
            });
        });
    }; return base64src;
} var base64src = that.handleBase64Img(); var handleBase64src = base64src(base64data);
handleBase64src.then(res => { //res 即為base64 轉(zhuǎn)化為圖片后的本地路徑，即可在畫布上繪制成功 that.ctx.drawImage(res, left, top, width, height);
});

通過(guò)上述的一些內(nèi)容，我們已經(jīng)知道如何利用 canvas 把圖片和文字繪制在一起后生成一張新的圖片，這里就產(chǎn)生了一個(gè)新的問(wèn)題: 我們?nèi)绾伟焉傻膱D片保存下來(lái)呢 ？？？ 我們接著往細(xì)看canvas 生成圖片后如何保存到本地

canvas 生成圖片后如何保存到相冊(cè)中

想要保存到相冊(cè)中第一步首先當(dāng)然是要獲得訪問(wèn)相冊(cè)的權(quán)限?。?！

//訪問(wèn)相冊(cè)授權(quán)wx.getSetting({ success: (res) => { //檢查是否有訪問(wèn)相冊(cè)的權(quán)限，如果沒(méi)有則通過(guò)wx.authorize方法授權(quán)(授權(quán)只需要一次就好，后面就可以直接訪問(wèn)相冊(cè)) if (!res.authSetting['scope.writePhotosAlbum']) { console.log('沒(méi)有獲取授權(quán)');
            wx.authorize({ scope: 'scope.writePhotosAlbum', success: (res) => { //用戶點(diǎn)擊允許獲取相冊(cè)信息后邏輯進(jìn)入這里,如上圖所示 }
            })
        } 
    }
}); //獲取了相冊(cè)的訪問(wèn)權(quán)限，使用 wx.saveImageToPhotosAlbum 將圖片保存到相冊(cè)中 wx.saveImageToPhotosAlbum({ filePath: that.data.sharePicPath, success: (res) => { //保存成功彈出提示，告知一下用戶 wx.showModal({ title: '已保存到手機(jī)相冊(cè)', content: '將圖片發(fā)送到朋友圈，邀請(qǐng)好友加入', confirmColor: '#0bc183', confirmText: '知道了', showCancel: false })
    }
})

如何生成小程序碼及驗(yàn)證小程序碼所帶信息

在小程序的分享朋友圈的解決方案中，往往在生成的海報(bào)頁(yè)面中都會(huì)有一個(gè)小程序碼，使得用戶有進(jìn)入小程序的入口，那么這個(gè)小程序碼如何生成呢？

官方文檔:獲取小程序碼

注意：因?yàn)樯尚〕绦虼a的接口參數(shù)需要 access_token，安全起見(jiàn)，一般都通過(guò)后臺(tái)調(diào)用在拿到base64的數(shù)據(jù)在返回給前端。

我們?cè)诨氐秸}:

上述三種生成接口，大家根據(jù)情況按需使用，因?yàn)槲业捻?xiàng)目里，需要經(jīng)常生成不同頁(yè)面對(duì)應(yīng)的小程序碼， B 類接口比較符合我的要求，這里就重點(diǎn)描述下 B 類接口的 使用 和 自測(cè)

B 類接口入?yún)?，出參官方說(shuō)明-- 接口 B：適用于需要的碼數(shù)量極多的業(yè)務(wù)場(chǎng)景

重點(diǎn)看下 scene : 最大32個(gè)可見(jiàn)字符，有頁(yè)面路徑帶參數(shù)的情況下要尤其注意！??！

把 page , scene 等參數(shù)傳遞給后臺(tái)后，后臺(tái)調(diào)用 B 類接口，返回給前端一個(gè)base64的圖片數(shù)據(jù)，我們把這個(gè)數(shù)據(jù)繪制到海報(bào)上就好?。?！

繪制方法上面已經(jīng)說(shuō)過(guò)canvas 對(duì)不同來(lái)源圖片的處理（本地圖片， 網(wǎng)絡(luò)圖片 ， base64圖片 ）

現(xiàn)在小程序碼的圖片已經(jīng)生成了，那么我們要如何自測(cè)呢？怎么才能知道小程序碼中所攜帶信息是否正確呢？

官方給出的方法:

上述方法在開發(fā)階段是比較方便，但是在正式的提測(cè)階段，此種方式顯得有些牽強(qiáng)，有人想到真機(jī)調(diào)試？

官方接口只能生成已發(fā)布的小程序的二維碼

也就是說(shuō)，你掃碼就連上生產(chǎn)環(huán)境了?。?！沒(méi)有辦法調(diào)試，那到底怎么辦呢？？？

解決辦法就要借助強(qiáng)大的小程序開發(fā)者工具啦！??！

首先把生成的小程序碼保存到電腦里，方法見(jiàn)上述canvas 生成圖片后如何保存到本地部分。

然后通過(guò)開發(fā)者工具選擇二維碼編譯模式，文件夾中選擇帶有小程序碼的圖片即可！??！

注意： 獲取 scene 值時(shí)要 decodeURIComponent

Page({
  onLoad(query) { // scene 需要使用 decodeURIComponent 才能獲取到生成二維碼時(shí)傳入的 scene const scene = decodeURIComponent(query.scene)
  }
})

抽離配置文件，使繪制更加靈活

我們觀察如下一個(gè)小程序海報(bào):

除了上圖紅框中的的內(nèi)容會(huì)發(fā)生寫變化以外，整體的結(jié)構(gòu)大部分是基本已經(jīng)固定了的，因?yàn)楹?bào)內(nèi)容和業(yè)務(wù)是強(qiáng)相關(guān)的，如果我把繪制的邏輯寫入組件里，那豈不是換個(gè)業(yè)務(wù)，我的組件就要改一次？這樣失去了組件的通用型肯定是不行的，那怎么辦呢？下面介紹一個(gè)業(yè)界比較好的解決方案:

小程序海報(bào)說(shuō)白了就是由 canvas 畫布上繪制的一些形狀，圖片，文字，線等等組成的，那我們是不是可以把這些繪制的基本能力封裝成方法，通過(guò)設(shè)計(jì)稿量出海報(bào)上每個(gè)元素的位置大小等信息，當(dāng)作一個(gè)配置文件傳遞給這些繪制方法，這樣就保證組件的通用型，而且繪制信息抽離成一個(gè)配置文件也更加方便后期維護(hù)。

share-config.js:

function setShareInfo(time, start, end, imageSrc) { return { width: 750, height: 1300, background: '#F2FCF8', views: [{ type: 'rect', parent: true, radius: true, radiusVal: 16, left: 40, width: 670, height: 1140, shadow: true, background: '#cacacd', shadowColor: 'rgba(0,0,0,.6)', line: true
            }, //.... { type: 'text', content: '長(zhǎng)按或掃描二維碼，查看這條線路', color: '#9B9BA1', top: 1052, left: 224, fontSize: 28, font: 'PingFangSC-Medium',
            },
            { type: 'image', path: '/common/images/station-flag.png', top: 746, left: 80, width: 32, height: 104 }
        ]
    }
} export { setShareInfo }

只需要在幾個(gè)動(dòng)態(tài)信息改變時(shí)，傳入這些變化的值即可。

import { setShareInfo } from '../../common/config/share-config';
page({ onLoad: function() { this.setData({ shareMessageInfoTimeline: setShareInfo('3月7號(hào) 下午16:30發(fā)車', '騰訊大廈', '平安國(guó)際中心', '')
        }); //... },
});

通過(guò) shareMessageInfoTimeline 獲取配置信息

<view class="container"> <mod-share-timeline timelineShow="{{timelineShow}}" picContent="{{shareMessageInfoTimeline}}" bindcloseTimelineShow="closeTimelineShow"/> </view>

總結(jié)

本文對(duì)小程序分享所需的基礎(chǔ)能力進(jìn)行了拆分詳解，把上述能力進(jìn)行不同的組合，應(yīng)該可以滿足大部分的分享需求。

比如:

1. 動(dòng)態(tài)繪制分享給微信好友的分享圖片。
2. 生成并保存小程序海報(bào)。