微信小程序最大要的作用控制模块之一

做为手机微信微信小程序最大要的作用控制模块之一--共享控制模块作用,在营销推广经营层面拥有没法取代的功效,能够说共享控制模块没搞好,经营微信小程序就被削掉了一大臂膀

做为手机微信微信小程序最大要的作用控制模块之一--共享控制模块作用,在营销推广经营层面拥有没法取代的功效,能够说共享控制模块没搞好,经营微信小程序就被削掉了一大臂膀,那麼在开发设计微信小程序时有哪些必须留意的呢?


微信小程序共享基本 API 详细介绍

手机微信共享的 API 只出示了共享给手机微信朋友的工作能力,并沒有出示共享微信朋友圈的工作能力,它是为什么子呢!!!

从在网上搜集的一些资询看来,关键有以下二点缘故:因为微商代理泛滥成灾,微信公众号老母鸡汤泛滥成灾,微信朋友圈品质早已有一定的降低,假如微信小程序再对外开放共享微信朋友圈作用,将会会进一步危害到全部手机微信绿色生态,导致客户活跃性度降低,客户外流等难题。手机微信不许微信小程序在微信朋友圈分享,大量是维护微信朋友圈的”广告宣传位”阵营,不可以够让这方面”肥肉”变为了公益性设备。

使用方法:

Page({ onShareAppMessage: function(){ return { title: 'xxxxx', //自定分享题目 path: '/page/user?id=123', //共享网页页面相对路径 imageUrl: '/common/images/xxx.png' //共享照片 宽高比 5:4 }}) //假如只写出以下方式,title默认设置是微信小程序名,path为当今网页页面相对路径(没有主要参数),imageUrl为当今网页页面截屏 Page({ onShareAppMessage: function(){}})
?

开启方式(一定要在page中先载入所述方式):

点一下微信小程序的胶囊莱单,会从底端弹出来分享选择项。
华企智能化云建网站 button 部件 open-type="share" 即 button open-type="share" ,点一下后开启。

开启后实际效果以下:


观查所述結果,不会太难看得出,title能共享出来的信息内容十分比较有限,那么我们能否对共享的照片做些文章内容,让它带出大量的信息内容呢?下边进到到大家的第二个一部分根据 canvas 动态性绘图共享照片


根据 canvas 动态性绘图共享照片

由于每一个网页页面的信息内容许多全是根据插口回到或是客户键入造成,是不在断转变的,设计方案师所绘的静态数据照片毫无疑问不是得以去展现这种信息内容的,那麼大家就需要想,有木有一种方法,是能够把静态数据照片和动态性信息内容绘图在一起后在转化成一张新的照片?回答是毫无疑问的!!!

把照片和文本画在一起?大家就一定会想起奇异的canvas,依据微信小程序画布有关的API绘图以下:

//建立画布(部件中一定要关联this,谨记!!!) 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();

所述早已根据canvas把照片和文本绘图来到一起,那怎样把这一画布转成一个照片,供开发设计者应用呢?

强劲的微信小程序帮我们出示了原生态的方式:

//在上边编码的draw()的回调函数中应用wx.canvasToTempFilePathvar that = this;ctx.draw(true, () = { setTimeout(() = { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) = {  that.setData({ //res.tempFilePath 转化成照片的临时性相对路径 picUrl: res.tempFilePath
}, that); //在部件中应用这儿一定还记得要关联this,谨记!!! }, 300); //这里添加300毫秒廷时是以便处理微信小程序绘图全过程中的3D渲染难题});

把照片相对路径传送给 image 标识,获得下面的图結果。

 image src="{{picUrl}}"/ 

同样:把picUrl取值给onShareAppMessage中的imageUrl,共享出来后的照片则含有了动态性信息内容!

对不一样来源于照片的解决(当地照片, 互联网照片 , base64照片 )

在上边的事例中,绘图当地照片时立即应用ctx.drawImage(path, 0, 0, width, height),path立即传到照片相对路径就可以。可是假如是互联网照片或是是base64的照片时,drawImage是没法立即绘图的,下边就详细介绍下对于所述二种状况怎样做适配解决。

互联网来源于照片
//将互联网照片变换为当地相对路径 handleNetImg: function(imagePath) { var that = this; return new Promise((resolve, reject) = { wx.getImageInfo({ src: imagePath, success: function(res) { resolve(res);handleNetImg('互联网照片详细地址').then((res) = { console.log(res.path); //輸出变换后的当地照片相对路径 ctx.drawImage(res.path, 0, 0, width, height); //这时照片就可以在画布上绘图出去 })
base64 照片

应用ctx.drawImage(base64Data, 0, 0, width, height)在微信小程序开发设计者专用工具上是能够绘图的,但是!!!这一大骗纸!!!真机上是无效的!!!(心碎一分鐘。。。)

紧跟面相近的构思,大家把base64的照片变为当地的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,分析內容bodyData(除掉data:image/png;base64,之后的內容) 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 版本号刚开始增加的定义。出示了一个客户文档文件目录给开发设计者,开发设计者对这一文件目录有彻底随意的读写能力管理权限。根据 wx.env.USER_DATA_PATH 能够获得到这一文件目录的相对路径。 */ var filePath = `${wx.env.USER_DATA_PATH}/${FILE_NAME}.${imgType}`; //按特定载入文档的标识符编号encoding,向详细地址filepath,载入数据信息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 转换为照片后的当地相对路径,就可以在画布上绘图取得成功 that.ctx.drawImage(res, left, top, width, height);});

根据所述的一些內容,大家早已了解怎样运用canvas把照片和文本绘图在一起后转化成一张新的照片,这儿就造成了一个新的难题:大家怎样把转化成的照片储存出来呢 ???大家然后往细看canvas 转化成照片后怎样储存到当地

canvas 转化成照片后怎样储存到相册图片中

要想储存到相册图片中第一步最先自然是要得到浏览相册图片的管理权限!!!

//浏览相册图片受权

wx.getSetting({ success: (res) = { //查验是不是有浏览相册图片的管理权限,假如沒有则根据wx.authorize方式受权(受权只必须一次就行,后边便可以立即浏览相册图片) if (!res.authSetting['scope.writePhotosAlbum']) { console.log('沒有获得受权'); wx.authorize({ scope: 'scope.writePhotosAlbum', success: (res) = { //客户点一下容许获得相册图片信息内容后逻辑性进到这儿,如圖所显示 }}); //获得了相册图片的浏览管理权限,应用 wx.saveImageToPhotosAlbum 将照片储存到相册图片中 wx.saveImageToPhotosAlbum({ filePath: that.data.sharePicPath, success: (res) = { //储存取得成功弹出来提醒,告之一下要户 wx.showModal({ title: '已储存拿到机相册图片', content: '将照片推送到微信朋友圈,邀约朋友添加', confirmColor: '#0bc183', confirmText: '了解了', showCancel: false })})
怎样转化成微信小程序码及认证微信小程序码所带信息内容

在微信小程序的共享微信朋友圈的处理计划方案中,通常在转化成的宣传海报网页页面上都会出现一个微信小程序码,促使客户有进到微信小程序的通道,那麼这一微信小程序码怎样转化成呢?

官方网文本文档:获得微信小程序码

留意:由于转化成微信小程序码的插口主要参数必须 access_token,安全性考虑,一般都根据后台管理启用在取得base64的数据信息在回到给前端开发。

大家在返回主题:

所述三种转化成插口,大伙儿依据状况按需应用,由于我的新项目里,必须常常转化成不一样网页页面相匹配的微信小程序码,B类插口较为合乎我的规定,这儿就关键叙述下B类插口的应用和测试

B类插口入参,出参官方网表明--

关键看看scene: 较大3两个由此可见标识符,有网页页面相对路径带主要参数的状况下要特别是在留意!!!

把page,scene等主要参数传送给后台管理后,后台管理启用B类插口,回到给前端开发一个base64的照片数据信息,大家把这一数据信息绘图到宣传海报上就行!!!

绘图方式上边早已说过canvas 对不一样来源于照片的解决(当地照片, 互联网照片 , base64照片 )

如今微信小程序码的照片早已转化成了,那麼大家要怎样测试呢?如何才可以了解微信小程序码中常带上信息内容是不是恰当呢?

官方网得出的方式:

所述方式在开发设计环节是较为便捷,可是在宣布的提测环节,此类方法看起来一些苍白无力,有些人想起真机调节?

官方网插口只有转化成已公布的微信小程序的二维码

换句话说,你扫二维码就连上生产制造自然环境了!!!沒有方法调节,那究竟如何办呢???

处理方法就需要依靠强劲的微信小程序开发设计者专用工具啦!!!

最先把转化成的微信小程序码储存到电脑上里,方式见所述canvas 转化成照片后怎样储存到当地一部分。

随后根据开发设计者专用工具挑选二维码编译程序方式,文档夹选中择含有微信小程序码的照片就可以!!!

留意: 获得scene值时要decodeURIComponent

Page({ onLoad(query) { // scene 必须应用 decodeURIComponent 才可以获得到转化成二维码时传到的 scene const scene = decodeURIComponent(query.scene)})
抽离配备文档,使绘图更为灵便

大家观查以下一个微信小程序宣传海报:

除开图中红框中的的內容会产生写转变之外,总体的构造大部分分是基本早已固定不动了的,由于宣传海报內容和业务流程是强有关的,假如我将绘图的逻辑性载入部件里,那简直换一个业务流程,我的部件就需要改一次?那样丧失了部件的通用性型毫无疑问不是行的,那如何办呢?下边详细介绍一个业内较为好的处理计划方案:

微信小程序宣传海报简言之便是由canvas画布上绘图的一些样子,照片,文本,线这些构成的,那么我们不是是能够把这种绘图的基本能反应力封裝成方式,根据设计方案稿量启航报上每一个原素的部位尺寸等信息内容,作为一个配备文档传送给这种绘图方式,那样就确保部件的通用性型,并且绘图信息内容抽离成一个配备文档也更为便捷中后期维护保养。

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: '长按或扫描仪二维码,查询这根线路', 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 }

只必须在好多个动态性信息内容更改时,传到这种转变的值就可以。

import { setShareInfo } from '../../common/config/share-config';page({ onLoad: function() { this.setData({ shareMessageInfoTimeline: setShareInfo('三月花了7天时间 中午16:30发班', '腾迅商务大厦', '安全国际性管理中心', '') }); //... },});

根据shareMessageInfoTimeline获得配备信息内容

 view mod-share-timeline timelineShow="{{timelineShow}}" picContent="{{shareMessageInfoTimeline}}" bindcloseTimelineShow="closeTimelineShow"/ /view 
小结

文中对微信小程序共享需要的基本工作能力开展了分拆详细说明,把所述工作能力开展不一样的组成,应当能够考虑大部分分的共享要求。

例如:

动态性绘图共享给手机微信朋友的共享照片。转化成并储存微信小程序宣传海报。

受欢迎强烈推荐:?

  • 一年二度“双11”有什么用

    过去的1七时间,京东商城商城系统与阿里巴巴巴巴几乎不一样层面秀全身上下全身肌肉确认本身对“6·18”大促的控场工作中工作能力,拼多多平台服务平台半推半就的被拉进此次“三

  • KTV微信小程序必须什么作

    手机微信微信小程序日渐受欢迎,美容护肤美容制造行业都不想忽略这一出风口,竞相参加微信小程序开发设计。 那麼美容护肤美容制造行业开发设计手机微信微信小程序有哪些益处呢

  • 内推+社交媒体,微信小程

    老话说:“七十年代看个人,八十年代看楼产,90时代看个股,目前,看互连网。“ 在这里样的一个发展趋势标准下,网上开一家微信小程序商城系统,针对如今来讲是当下时兴的,对

  • 凡科抠图制作漂亮的五彩

    PS制作好看的五彩缤纷的霓虹灯文本实际效果 公布 创作者:佚名 我想评价这篇实例教程是向脚本制作之家的朋友详细介绍PS制作好看的五彩缤纷的霓虹灯文本实际效果方式,实例教

  • 开发设计制作手机微信微

    手机微信微信小程序可以为中小型型实体线线店解决许多的难题。1、降低成本费费门槛:手机微信微信小程序开发设计设计方案、运营成本费费低,无需许多的初期资产资金投入即可令