xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > 微信小程序分享到朋友圈,微信小程序分享到朋

微信小程序分享到朋友圈,微信小程序分享到朋

发布时间:2019-05-12 22:59编辑:计算机尝试浏览(116)

    小程序提供onShareAppMessage 函数,此函数只支持分享给本身微信朋友。小程序如何享受到对象圈呢?

    有众多童鞋在做小程序分享时,发掘未来只可以分享到微信很好的朋友和微信群,不可能享受到微信的相恋的人圈。截至到明天(20一7.0陆.0贰)微信小程序开放平台依旧未有开放分享到微信朋友圈的意义。希望做小程序分享的童鞋能够观察。

    图片 1

    微信小程序开垦者者必读,内容包涵小程序开拓实战必要专注的叁拾陆个技艺点,供大家参考:

    本人提供的艺术是,使用canvas绘制一张图纸,并用wx.previewImage预览图片,然后长按图片保存图片到手提式有线电话机。再通过发朋友圈的方法,选取保存的图纸,当用户浏览朋友圈时,能够长按图片、识别图中二维码进入小程序。

    微信小程序最新官方回复:小程序最近支撑分享到朋友圈吗?

    透过反复珍视更新,微信始终未曾开放小程序直接分享到朋友圈的相关api。

    Q:为啥脚本内无法应用window等指标

    功能显示

    咱俩一向开宗明义,用直接的格局来落到实处微信小程序分享到朋友圈

    A:页面包车型客车剧本逻辑是在JsCore中运作,JsCore是叁个没有窗口对象的蒙受,所以无法在剧本中动用window,也不能在本子中操作组件

    ![](https://images2018.cnblogs.com/blog/962910/201805/962910-20180523214042396-155088722.jpg)      ![](https://images2018.cnblogs.com/blog/962910/201805/962910-20180523211933715-735523183.jpg)     ![](https://images2018.cnblogs.com/blog/962910/201805/962910-20180523212053639-1018690021.jpg)

    此间先来罗列一下贯彻思路

    Q:为啥 zepto/jquery 不可能使用

     

    1. 透过微信api申请小程序二维码获取小程序二维码接口文书档案

    2. 微信小程序分享到朋友圈,微信小程序分享到朋友圈之曲线救国。下载贰维码到服务器并赶回url

    3. 小程序接收url并从服务器下载图片

      wx.downloadFile

    4. 小程序将下载好的图纸保存至用户相册

      wx.saveImageToPhotosAlbum

    A:zepto/jquery 会使用到window对象和document对象,所以无法运用。

    安不忘危职业和小程序配置(步骤壹和步骤二)

    首先通过阅读获取小程序2维码接口文书档案获取申请小程序2维码的接口

    Q:wx.navigateTo不恐怕展开页面

    布置小程序下载域名(不效验合法域名,可忽略此选项)

    此处自身利用的是不限次的2维码接口即B方案

    A:三个运用还要只可以张开多少个页面,当已经张开了八个页面之后,wx.navigateTo不能够不奇怪张开新页面。请制止多层级的交互方式,大概利用wx.redirectTo

    常备不懈一张带有小程序贰维码的图样、一张背景图、内容缩略图

    代码示例:

    Q:样式表不援救级联选取器

    1 Page({
    2   data: {
    3     bgImg: "http://image.lqmohun.com/canvasbg.jpg",  //背景图
    4     dataImg: "http://image.lqmohun.com/ceshi.jpg",   //内容缩略图
    5     ewrImg: "http://image.lqmohun.com/erweima.jpg",  //小程序二维码图片
    6     systemInfo: null,  //系统类型
    7     canvasWidth:0,   //canvas的宽
    8     canvasHeight: 0   //canvas的高
    9   },
    
    wx.request({ method: 'POST', url: app.apiUrl   '/miniprogram/qrcode', data: { appid: app.appid, page: 'pages/activityInfo/activityInfo', scene: 'id:'   this.data.activity.id }, header: { 'content-type': 'application/x-www-form-urlencoded', 'X-TOKEN': app.jwt }, success { res = res.data // 这里我是从服务器直接返回保存好的图片url ... // 后文介绍保存过程 }, fail() { wx.hideLoading() app.$alert('分享失败', 'wrong', _this) }})
    

    A:WXSS扶助以.发轫的类接纳器。

     

    出殡请求前我们要求预备好页面包车型客车page(开首无法带有“/”)路线及scene

    Q:本地财富不可能通过 css 获取

    手续三:下载需求的图样能源到地方

    文书档案中对scene字段唯有大致的叙说并从未给到骨子里示例,这里其实很轻巧误导新人,不驾驭那么些scene具体应该什么行使。

    A:background-image:能够选用网络图片,大概base64,恐怕选取<image/>标签

     1   downloadImages: function () {
     2        
     3     let that = this;
     4     wx.downloadFile({  //背景图
     5       url: that.data.bgImg,
     6       success: function (res) {
     7         wx.downloadFile({  //内容缩略图
     8           url: that.data.dataImg,
     9           success: function (res1) {
    10             wx.downloadFile({
    11               url: that.data.ewrImg,
    12               success: function (res2) {//  小程序二维码图
    13                 that.convas(res.tempFilePath, res1.tempFilePath, res2.tempFilePath);
    14               },
    15               fail: function () {
    16               }
    17             });
    18           }
    19         });
    20       }
    21     })
    22   },
    

    最大三13个可知字符,只辅助数字,大小写英文以及部分特殊字符:!#$&'()* ,/:;=?@-._~,其它字符请自行编码为法定字符(因不帮忙%,普通话不能够使用 urlencode 管理,请使用其它编码方式)

    Q:怎样修改窗口的背景象

     

    如上是法定对scene的介绍

    A:使用 page 标签选拔器,能够修改顶层节点的体制

    手续四:将索要分享的音信绘制成图片

    事实上这里正是2个壹味的字符串,至于参数怎么样传递大家完全能够自行设计,自个儿喜爱就好。一定要留心官方有限定使用的特殊字符(!#$&'()* ,/:;=?@-._~) 这里自个儿使用的是key:value;key:value方式,当用户扫码后经过onLoad来博取scene

    page {

     1  convas: function (bgImg, dataImg, ewrImg) {  
     2     let that = this;
     3     var ctx = wx.createCanvasContext('myCanvas');
     4     var scWidth = that.data.systemInfo.windowWidth;
     5     var scHeight = that.data.systemInfo.screenHeight;
     6     var defaultHeight = 0.020 * that.data.systemInfo.screenHeight;
     7     //第一步:刻画背景图
     8     ctx.drawImage(bgImg, 0, 0, scWidth, scHeight);
     9     //第二步:刻画背景色
    10     ctx.setFillStyle('white');
    11     ctx.fillRect(20, 30, scWidth-40, scHeight-60);
    12     //第三步:刻画内容缩略图
    13     var imgHeight = parseInt(this.imageProportion());
    14     ctx.drawImage(dataImg, 20, 30, scWidth - 40, imgHeight);
    15     //第三步:刻画标题
    16     ctx.setFontSize(0.056 * scWidth);
    17     ctx.setFillStyle('#333333');
    18     ctx.setTextAlign('center');
    19     ctx.fillText("食物美容,远离肌肤衰老", (scWidth) / 2, imgHeight   63   defaultHeight );
    20     //第四步:刻画内容;(备注:canvas好像没有自动换行,有需要此步骤的同学,可根据canvas宽度,设置文字个数)
    21     ctx.setFontSize(0.044 * scWidth)
    22     ctx.setFillStyle('#333333');
    23     ctx.setTextAlign('left');
    24     ctx.fillText("简介:岁月如刀,刀刀催人老,到我们25", 35, imgHeight   100   defaultHeight);
    25     ctx.fillText("岁的时候,皮肤就开始进入衰老期,皱纹", 35, imgHeight   125   defaultHeight); 
    26     ctx.fillText("、色斑。皮肤松弛等现象逐渐出现,这时", 35, imgHeight   150   defaultHeight);
    27     ctx.fillText(",抗衰老工程也正式展开。", 35, imgHeight   175   defaultHeight);
    28   //  第五步:刻画小程序码
    29     ctx.drawImage(ewrImg, 35, imgHeight   200   defaultHeight, 120, 120);
    30     //第六步:提示用户,长按图片下载或分享
    31     ctx.setFontSize(0.050 * scWidth)
    32     ctx.setFillStyle('#333333')
    33     ctx.fillText('长按码查看详情', 165, imgHeight   250   defaultHeight);
    34     ctx.fillText('小程序名字', 165, imgHeight   280   defaultHeight);
    35     //第七步将之前在绘图上下文中的描述(路径、变形、样式)画到 canvas 中
    36    
    37     ctx.draw(false, function (e) {
    38       //第八步:生成图片并预览
    39       that.imageGeneratePreview();
    40     });
    41   }
    
    onLoad  { // 因为这里要跟正常url传参做区分,所以要先判断scene是否存在 if (options.scene) { let scene = decodeURIComponent(options.scene) // 官方要求一定要先decodeURIComponent才能正常使用scene scene = scene.split let obj = {} for (let i = 0; i < scene.length; i  ) { let item = scene[i].split obj[item[0]] = item[1] } // 将options.id 替换为scene中提取的id 以保证后续业务不受影响 options.id = obj.id }} 
    

    display: block;

    小程序canvas做测试时,文字好像不可能自动换行。提供1种比较笨的主意,依照显示屏宽度判别文字个数,循环绘制文字就行了;

    服务端小编用的是golang

    min-height: 100%;

    this.imageProportion()的方式获得缩略图等比例裁减之后的宽高

    从不什么原因,就因为该项目标后端是golang搭建的,本人也在操练golang,所以服务端代码写的未有其它水平,还请途经的大神教导一二,这里根本介绍实现思路

    background-color: red;

    defaultHeight差别宽高荧屏,绘制内容上下间距优化

    func GetMiniProgramQrcode(c *gin.Context) { // 获取应用的appid appid := c.PostForm // 后端获取小程序传来的page及scene page := c.PostForm scene := c.PostForm // 考虑到反复请求微信接口的耗时及服务器io消耗,我打算把图片通过MD5(page scene)的方式命名 h := md5.New() h.Write([]byte(page   scene)) // 需要加密的字符串 cipherStr := h.Sum result := hex.EncodeToString(cipherStr) exist, _ := model.PathExists("服务器文件存储路径"   result   ".jpg") // 检测图片是否已经存在(即之前是否有人分享过相同页面) if exist { // 若二维码文件存在直接返回路径 c.String(200, "URL访问路径" result ".jpg") } else { // 不存在则直接请求微信获取二维码 token, ok := GetAccessToken // 首先获取access_token 这里大家根据自己的业务方式来获取 if !ok { c.JSON(200, gin.H{ "code": 4001, "msg": "accesstoken 获取失败", }) } else { // 向微信请求小程序二维码图片 // 这里需要注意!!! 官方只介绍了通过该接口以post的形式传参,但其实参数是要严格的json格式传递才能正常获取 resp, err := http.Post("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" token, "application/x-www-form-urlencoded", strings.NewReader(`{"page":"` page `", "scene":"` scene `"}`)) if err != nil { fmt.Println } defer resp.Body.Close() body, err := ioutil.ReadAll(resp.Body) if err != nil { // handle error } // 图片写入本地 err = ioutil.WriteFile("服务器文件存储路径" result ".jpg", body, 0755) if err != nil { fmt.Println c.JSON(200, gin.H{ "code": 4002, "msg": "文件写入服务器失败", }) }else{ // 写入成功 直接返回url c.String(200, "URL访问路径" result ".jpg") } } }}
    

    }

     

    通过上述逻辑我们能够健康获取到图片url地址 接下来便是将图片下载到小程序本地并保存到用户相册中

    Q:为何上传不成事

    手续5:将canvas画布导出成钦命大小图片、并预览

    // 接着第一块代码片中省略部分 我们已经获取到服务器返回的二维码图片urlwx.downloadFile({ // 调用wx.downloadFile接口将图片下载到小程序本地 url: app.webUrl   res, success { // 下载成功后会生成一个临时文件路径 res.tempFilePath(这时res变量已经被新的回调替换了哦,已经不是服务器返回来的res了) wx.saveImageToPhotosAlbum({ // 接着调用wx.saveImageToPhotosAlbum将图片保存到用户手机相册,该接口需要用户授权才可以使用,在调用过程中微信会自动弹框请求授权,如果用户拒绝则直接调用fail回调,且一段时间内不会重新请求,这里大家可以通过微信权限设置接口重新引导用户授权 filePath: res.tempFilePath, success { wx.hideLoading() wx.showModal({ // 保存成功后记得提醒用户二维码已经存到他的手机相册了哦 title: '分享二维码已保存到系统相册', content: '快去分享给朋友,让更多的朋友发现这里的美好', success: function  { if (res.confirm) { console.log } else if (res.cancel) { console.log } _this.shareCancle }, fail { wx.hideLoading() app.$alert('分享失败', 'wrong', _this) } }) }, fail: function  { wx.hideLoading() app.$alert('分享失败', 'wrong', _this) }})
    

    A:为了进步体验流畅度,编写翻译后的代码包大小需小于 1MB ,大于 1MB 的代码包将上传失败。

     1 imageGeneratePreview: function () {
     2     let that=this;
     3     //把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
     4     wx.canvasToTempFilePath({
     5       width: this.data.systemInfo.windowWidth,
     6       height: this.data.systemInfo.screenHeight,
     7       destWidth: this.data.systemInfo.windowWidth * 3,
     8       destHeight: this.data.systemInfo.screenHeight * 3,
     9       canvasId: 'myCanvas',
    10       success: function (res) {
    11         //预览图片
    12         wx.previewImage({
    13           urls: res.tempFilePath.split(','),   // 需要预览的图片http链接列表
    14           fail: function (res) {
    15             console.log("预览图片失败"   res)
    16           }
    17         })
    18       },
    19       fail: function (res) {
    20         console.log("出错了:" JSON.stringify(res));
    21       },complete:function(){
    22         wx.hideLoading();
    23       }
    24     })
    25   },
    

    那样就达成了微信小程序分享到朋友圈的效果,以为也会有一些困苦啊。

    Q:HTTPS 请求不成功

     

    正文笔者:holdno原来的书文地址:微信小程序分享到对象圈之曲线救国-教程-小程序社区-微信小程序-微信小程序开辟社区-小程序支付论坛-微信小程序结盟

    A:tls 仅扶助 一.贰 及以上版本

    备注:

    展开表彰

    Q:互连网请求的 referer

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

    A:互联网请求的 referer 是不可能安装的,格式固定为 {appid} 为小程序的 appid,{version} 为小程序的本子号,版本号为 0 表示为开荒版。

      相互调换学习QQ群:726466十九

    Q:不能平素操作 Page.data

      

    A:制止在一直对 Page.data 举行赋值修改,请使用 Page.setData 进行操作能力将数据同步到页面中举办渲染怎么获取用户输入

    能够收获用户输入的零部件,必要利用组件的质量bindchange将用户的输入内容同步到 AppService。

    <input bindchange="bindChange" /><checkbox bindchange="bindChange" />

    var inputContent = {}

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:微信小程序分享到朋友圈,微信小程序分享到朋

    关键词: 条微信小 曲线 技巧 朋友圈

上一篇:分布式哈希与一致性哈希,哈希函数

下一篇:没有了