- H5页面分享不显示自定义标题和图片?
原因是H5用旧的方式申请JSAPI分享权限,后台返回无权限,因此分享的时候不能自定义,建议开发者接入新的分享方式:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html ,使用新的wx.updateAppMessageShareData和wx.updateTimelineShareData接口来设置分享数据。
2020-04-23 - # 使用小程序云开发API更新数组中的单个数组元素
使用小程序云开发API更新数组中的单个数组元素 看了看mongoDB的更新数据方式,找到了解决办法,解决方法如下,亲测可用: 第一种方法:使用位置操作符$ [代码]代码,条件更新写在云函数中 [代码] [图片] [代码]test_api集合原始数据如下 [代码] [图片] [代码]在云函数中执行1中的代码,数组users中id为1001的用户添加了一个新的属性test [代码] [图片] [代码]原理分析 [代码] where条件是查找数组中id属性为1001的用户 update中的使用’users.$.test’: ‘test’ 注意里面的$符号,在mongoDB中,这个符号叫做位置操作符,代表数组的下标,如下引自《mongoDB实战》 [图片] 第二种方法:直接使用数组下标 云函数代码 [图片] test_api集合原始数据如下 [图片] 代码执行后 [图片] 相对于第一种方法,这种方法更加简单,只不过users.1.test这种写法有点颠覆js和java中的属性书写规则,让人感觉怪怪的,在mongoDB中,也支持点数字这种写法。 一个可能的疑惑 可不可以写作’users[1].test’:‘test’,测试结果如下: [图片] [图片] 可以看到’user[1]'无法被识别为数组的第二个元素,而是作为了属性名新增了一个属性,结论:必须写成”点数字“不能写成“中括号” 结论: 经过测试,使用这两种种方法可以更新数组中的一个元素。 方法一适合在不知道数组元素下标的情况下根据查询条件更新元素; 方法二适合在知道数组元素下标的情况下更新元素; 当然也存在既知道元素下标也可以通过属性查到的情况,想用哪个就看心情了-.- 但是暂未找到查询返回数组中的一个元素的方法,再探索探索吧 ——。——
2019-03-06 - 将小程序原生异步函数promisify后,在async/await中使用
目前,小程序中支持使用async/await有三种模式: 1、不勾选es6转es5,不勾选增强编译;该模式是纯es7的async/await,需要基础库高版本。 2、勾选es6转es5,勾选增强编译;一般是因为调用了第三方的es5插件,通过增强编译支持async/await。 3、勾选es6转es5,不勾选增强编译;手工引入runtime.js支持async/await。 据最近更新情况,原生的函数已经大部分同时原生支持同步化了,不需要本方案转化了,直接加上await即可;比如wx.chooseImage、wx.showModal。。。具体有哪些,可以自己试。 如果只是wx.request的同步化,可参考: https://developers.weixin.qq.com/community/develop/article/doc/0004cc839407a069f77a416c056813 app.js代码: function promisify(api) { return (opt, ...arg) => { return new Promise((resolve, reject) => { api(Object.assign({}, opt, { success: resolve, fail: reject }), ...arg) }) } } App({ globalData: {}, chooseImage: promisify(wx.chooseImage), request: promisify(wx.request), getUserInfo: promisify(wx.getUserInfo), onLaunch: function () { }, }) 某page的index.js代码: const app = getApp() testAsync: async function(){ let res = await app.chooseImage() console.log(res) res = await app.request({url:'url',method:'POST',data:{x:0,y:1}}) console.log(res) }, [图片]
2020-10-20 - app.js生命周期函数onHide能捕捉到微信异常退出吗?
大家看这个功能可以做吗? [图片]
2020-06-18 - 针对新手很容易出现理解误区的微信小程序订阅消息模块
1. 写在前面 微信小程序下架了模板消息功能,取而代之的是订阅消息功能。这个订阅消息目前又分为「一次性订阅」和「永久订阅」。使用订阅消息也有一段时间了,感觉对新手订阅消息很容易让新开发者进入一个理解的误区,这里觉得有必要说出来 2. 理解误区 很多新手认为,只要用户勾选了小程序端订阅消息弹出时底部的「总是保持以上选择…」后,就可以「为所欲为」的不限次数的推送订阅消息给用户了。如下图: [图片] 3. 正确理解 如果你使用的「一次性订阅」模板(目前发现绝大多数开发者都是只能用一次性的,因为永久性的订阅消息申请门槛太高),那么勾选底部的「总是…」这个并不代表以后可以直接推送了。官方原话wx.requestSubscribeMessage的介绍里是这样写的: 3.1 官方说明 wx.requestSubscribeMessage(Object object) 基础库 2.8.2 开始支持,低版本需做兼容处理。 调起客户端小程序订阅消息界面,返回用户订阅消息的操作结果。当用户勾选了订阅面板中的“总是保持以上选择,不再询问”时,模板消息会被添加到用户的小程序设置页,通过 wx.getSetting 接口可获取用户对相关模板消息的订阅状态。 注意事项 一次性模板 id 和永久模板 id 不可同时使用。 低版本基础库2.4.4~2.8.3 已支持订阅消息接口调用,仅支持传入一个一次性 tmplId / 永久 tmplId。 2.8.2 版本开始,用户发生点击行为或者发起支付回调后,才可以调起订阅消息界面。 2.10.0 版本开始,开发版和体验版小程序将禁止使用模板消息 fomrId。 3.2 重点关注 这里重点关注第7条:「用户发生点击行为或者发起支付回调后,才可以调起订阅消息界面。」这就意味着你需要在用户主动点击某个组件是触发调用wx.requestSubscribeMessage方法再次订阅,订阅后,你才可以「为所欲为」推送一次模板消息,注意只能一次。下次再想推送时,需要用户再次点击触发wx.requestSubscribeMessage。 4. 破局方案 目前订阅消息功能,就是这么个情况,所以针对这个情况的替代方案有以下 4.1 永久性订阅消息 如果能达到申请「永久性订阅」消息的模板的门槛,那自然是极好的,直接用永久性模板「为所欲为」。 4.2 使用服务号的模板消息替代 比较常用的是使用公众号服务号的模板消息代替小程序的订阅消息功能,公众号的模板消息功能限制就比订阅号好多了,基本上可以「为所欲为」的推送。但是这个方案有个致命的运营成本:必须要用户关注公众号,还有小程序要跟公众号同一主体并绑定在开放平台下。同时开发成本有所增加,要采用unionId机制来打通小程序跟公众号的openId。这个具体的实现方案,大家有兴趣的话可以讨论下。笔者目前就是用这种方案的。 5. 几个注意点 5.1 官方提示 订阅消息如果选择选择‘总是保持以上选择,"不再询问"后的设置问题: 目前是选择‘总是保持以上选择,"不再询问"后,可以在设置中开启或拒绝接收,但不会再次拉起授权弹窗 6. 长期性订阅消息 请参考官方最新文档: 小程序模板消息能力调整通知 | 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/00008a8a7d8310b6bf4975b635a401 长期性订阅消息 一次性订阅消息可满足小程序的大部分服务场景需求,但线下公共服务领域存在一次性订阅无法满足的场景,如航班延误,需根据航班实时动态来多次发送消息提醒。为便于服务,我们提供了长期性订阅消息,用户订阅一次后,开发者可长期下发多条消息。 目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放,后期将逐步支持到其他线下公共服务业务。 7.题外话 鉴于被戴上各种「刷赞,冲级,让社区点赞“通货膨胀”」等等一些恶毒字眼(最近多了个职业回复的「雅称」),各种帽子戴得,做一个开发爱好者积极分享和解决各种问题太难了,姑且不论咱写一篇文章需要截图多少,单单排版就得废掉俺多少时间哈,很受伤,所以本人决定在微信开放者社区封笔。你看到是俺最后一篇发表在微信开放社区的文章。如果你想继续查看俺的一些文章可以私聊我。我会在其他平台保持继续创作。bye-bye~ 8. 最最重要的来了 看完后觉得有用记得点赞~~ ↓点赞处↓
2020-09-04 - 为了更好的用户体验,wx.chooseAddress的返回值中能否增加用户选择的地图定位的经纬度?
因为用户选择省市区时选了地图定位,是否顺便返回用户选择的地图定位点,方便平台更好的为客户服务
2020-08-14 - 改变多选checkbox里radio的背景色,不生效?
[图片] 这里家里ext-class,但是没有生效,生效的只有后边的文字,radio的背景色修改不了[图片] 添加color 还是backbg 都没有改变radio的背景色
2020-03-01 - 数据库怎么查询一段 时间内的,不需要日期,只要时分秒那种。
[图片] 这数据库怎么设计啊,好烦恼啊。有个查询地铁的需求,地铁每天都有且时分秒固定,那么怎么给筛选出来啊
2020-10-30 - 如何调用云开发uploadFile获取文件上传链接?
需求:外部代码通过HTTP API实现上传图片文件至微信小程序云存储 问题:使用Postman测试调用此‘uploadFile获取文件上传链接’的API时出错: [图片] 错误代码:"errcode": 44002, "errmsg": "empty post data hint: [dFAfKowFE-wNDFEa] rid: 5f9f8617-104918bd-699ff721" API 文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-http-api/storage/uploadFile.html 请问该如何解决?
2020-11-02 - 小程序云开发,在小程序云开发控制台中启用了“未登录用户访问权限”,为什么在Web中访问依然报错?
[图片] [图片] [图片] 修改完权限后还等了半个小时访问也是报没有启用匿名访问的错误。
2020-11-02 - 什么时候支持多个小程序云开发环境使用同一个腾讯云账号扣费?
你好,现在每个小程序开通云开发,会自动创建一个腾讯云账号,每个账号单独出账单单独计费,费用管理很不方便,什么时候可以支持多个小程序的云开发环境的计费从同一个腾讯云账号中扣费和出账单?
2020-11-03 - 如何保存云函数的返回数据?
在云函数,通过数据库查询获取数据,例如一些配置或者权限信息,如何把返回的数据缓存起来?而不是每一个每次都要重复反复的请求? PS:不考虑把数据返回客户端,然后每次请求都在客户端回传的情况,因为这样只要参数被恶意修改,那就会请求到不该有的数据了。
2020-11-03 - 小程序云函数码请求好慢,有什么办法提升速度?
[图片] 请求总共耗时将近3s才返回结果,对用户体验非常的不好!
2020-11-04 - 订单不存在?
从商户平台复制过的商户号 都提示订单不存在 (退款)云开发
2020-11-05 - 小程序云开发后台是否可以用作微信公众号自动回复的后台?
现有小程序和云开发后台完成了小程序的基本功能。现在申请了新的微信公众号(服务号)需要响应用户的输入,访问小程序的数据,然后反馈给用户。 微信公众号的设置中需要设置开发者模式中的网址,而小程序的云开发后台似乎没有提供任何api地址。查阅了小程序云开发的接口也只支持HTTP POST方法带access_token的调用,好像不能作为微信公众号的后台进行接入。 网上有一些文章说腾讯云的云函数提供API网关方式,可以实现云函数对外提供服务。而小程序本身也是基于腾讯云的serverless。 请问小程序的云开发支不支持自己配置API网关的方式从而对微信公众号提供服务? 或者有什么办法能够使用一套云函数环境同时为小程序和公众号提供后台服务的。
2020-11-07 - 微信小程序云开发,使用云函数,tenpay微信支付签名失败,请问是什么情况?
商户号 1562970741
2020-11-07 - 内容安全检测图片API:openapi.security.imgSecCheck完美解决方案。
背景需求: 我个人做了一款小程序的小游戏,本质是小程序。里面有个自定义图片的功能。用户从本地相册选一张图片进行裁剪,之后保存到缓存中或者上传到服务器。然后用户再用这张图片作为素材进行其它操作。这里就涉及到内容安全了,提交审核没有通过也是因为这个没有做内容安全。防止一些色情低俗的事情发生。 正文: 思路:相册选图片 --> 裁剪小的图片 --> 内容安全检测 --> 通过 --> 裁剪大的图片 --> 保存。 失败的原因:绝大多数是因为检测图片不能大于1M,而导致超时,或者是errCode:-1,又或者是其它问题。 [图片] [图片] 核心代码图片: [代码]默认裁剪小尺寸图片 (我的业务需求是正方形图片,也可动态计算宽高比例) [代码] [图片] 检测图片 部分iOS不兼容encoding: ‘ucs2’。注释掉就好了 [图片] [图片] 云函数 [图片] 测试情况: 正常图片不含违法违规,测试20次,全部通过。小程序上线后暂无发现检测失败情况。百度搜索的“人体油画”等等均可通过。 PS:第一次写经验分享哈,看不懂可以问我。体验一下我的小程序想问我这个小程序其它的功能点也可以喔! 技术会迭代更新,用到的技术会有时效性,看编辑时间,可能当时的技术现在不适用了
2020-10-22 - input placeholder的字体在<scroll-view/>拖动是会上下移动
[图片][图片]
2020-05-18 - input标签在真机下不会触发input事件
在真机下,中文输入法输入的时候,会有候选文字,但是你输入的字符会在input标签中出现,当你通过点击空白处让input失去焦点的时候,你输入的英文字符会填充到input标签中,但是不会触发input事件。
2020-07-29 - 滚动到底部,弹出键盘会导致input上移
http://www.56.com/u23/v_MTY0MDUwODQ0.html 视频地址 [图片][图片]
2020-04-30 - 制作自己的模态弹窗组件 - vue篇
起因 H###s:#满,微信小程序有模态弹窗吗? #满:有啊,喏。wx.showModal(随手甩出一个链接) 短暂的几十秒后… H###s:不对啊,我要的不是这种 #满:那你要哪种? H###s:就是那种组件,可以自己在里面写wxml代码的。 #满:组件?那没有 H###s:那难顶哦,有这个需求 祺##:自己写一个呗,又不难 因为我一般使用 kbone - vue ,所以这里也拿 vue 做示例。另外,使用 typescript 语法,请使用 javascript 的童鞋自行理解~ 最终效果 [图片] 编写过程 我们先创建一个空的 vue 组件,我这里命名为 Modal [图片] [图片] 组件创建好了,随便写点东西,然后引入到页面,看看对不对吧 组件: [图片] 页面: [图片] 实际效果: [图片] OK,组件引入正确,但是这也只是一个组件,并不是模态弹窗。众所周知,模态弹窗,是一个弹出框,应该浮动到最上层,那就加一点 css 吧 组件: [图片] 实际效果: [图片] emmmm,有点丑,不过意思是这个意思,接下来,让弹出框水平垂直居中,再给点宽度高度吧 组件: [图片] 实际效果: [图片] 是不是有内味儿了?但毕竟是模态弹窗组件,显示什么内容应该由页面来决定,所以,slot 走起! 组件: [图片] 页面: [图片] 实际效果: [图片] OK,那既然是模态弹窗,那就代表可以关闭打开,其实我个人推荐的是在页面里面使用 v-if / v-show 来控制,让组件干净一点 页面: [图片] 实际效果: [图片] [图片] OK,既然打开有了,接下来就是关闭了 组件: [图片] 页面: [图片] 行了,关闭打开也有了,再搞点小东西 组件: [图片] 页面: [图片] 实际效果: [图片] 完成 简单的模态框做完啦!怎么样?似8似很简单! **考虑到会有一些组件的层级,并且设置 z-index 无效,组件的外部标签可修改为 [代码]cover-view[代码] ** [图片] 结束 H###s:真的诶!超简单的,感谢你的组件了(白嫖成功)!
2019-12-26 - 真机调试获取的windowHeight是否包含tabbar的值?
在调用wx.getSystemInfoSync().windowHeight时,真机返回的windowHeight没有计算tabbar的值,但是在开发工具上返回的又是减去了tabbar的值 机型: Iphone X IOS版本:13.4.1 微信版本:7.0.12 开发工具版本:1.03.2005140 开发工具获取的窗口高度: [图片] 真机模拟获取的窗口高度: [图片] 差值82刚好是我自定义的tabbar的高度
2020-06-02 - dialog+textarea的bug?
dialog+textarea翻车现场。 存在问题,textarea拉起键盘时,textarea跟随页面上推,但dialog不跟随上推,导致textarea错位。是否有解决方案?请指教,谢谢。 [图片] WXML: <!-- 新增需求对话框 --> <view wx:if="{{currentDialog=='newRequest'}}"> <view class="weui-mask"></view> <view class="weui-dialog margin-lr-sm width-auto"> <view class="weui-dialog__hd"><strong class="weui-dialog__title">新增支撑需求</strong></view> <view class="weui-dialog__bd padding-0 margin-bottom-sm"> <view class="text-left margin-bottom"> <view class="weui-cells__group weui-cells__group_form"> <view class="weui-cells__title flex justify-between"><text>类别</text><text bindtap="bindRequestTypeTips" class='cuIcon-info text-green'></text></view> <view class="weui-cells weui-cells_form"> <view class="weui-cell weui-cell_active weui-cell_select"> <view class="weui-cell__bd"> <picker bindchange="bindPickerChange" range="{{arrRequestType}}" data-target="RequestType"> <view class="weui-select">{{arrRequestType[selectedRequestType]}}</view> </picker> </view> </view> </view> </view> </view> <view class="text-left"> <view class="weui-cells__group weui-cells__group_form"> <view class="weui-cells__title">描述</view> <view class="weui-cells weui-cells_form"> <view class="weui-cell"> <view class="weui-cell__bd"> <textarea class="weui-textarea" placeholder="请描述你的支撑需求" auto-height cursor-spacing="5" maxlength="120" bindinput="bindNewRequestInputChange" data-target="newRequestInput"></textarea> <view class="weui-textarea-counter"><text>{{newRequestInputLength}}</text>/120</view> </view> </view> </view> </view> </view> </view> <view class="weui-dialog__ft"> <a class="weui-dialog__btn weui-dialog__btn_default" bindtap="bindDialogChange" data-target="null">取消</a> <a class="weui-dialog__btn weui-dialog__btn_primary {{isNewRequesting?'text-gray':'text-green'}}" bindtap="bindNewRequest"><i wx:if="{{isNewRequesting}}" class="weui-loading"></i>新增</a> </view> </view> </view>
2020-07-25 - 2019年微信小程序开发大赛总结
首先,感谢微信官方举办这一次【微信小程序大赛】大学生专属活动,能让我们更好的去学习,并且锻炼自己。 [图片] 高手请忽略 作为一个真正的菜鸟,在此次活动中我学到了很多: 如何能够更好地与小伙伴沟通?【执行力】 在技术层次上,怎么学习才是正确的? 怎么正确对待技术? 本次项目开发的相关学习经验。 第一:如何解决开发项目时执行力的问题。 此次比赛是面的全体高校学生,个人技术水平的差异+跨地区组合,怎么才能发挥出一个小团队高效的执行力呢?(以下是个人在开发项目时的经验) 正确对待比赛,以锻炼为主。如果是为了拿奖,首先这个想法在一定程度上是错误的。我们团队的愿景就是:锻炼自己为主。边学习边开发,所以在开发项目时团队氛围很好。 约定好时间,组建QQ群开语音来同时开发项目这对于一个团队项目的成果是很重要的,因为我相信如果你愿意挤出你周末休息的时间来学习,不会太差。 定制计划,每周做了什么,学到了什么。 在学习的过程中要学会总结,把用法,钩子函数,语法,关键字,get,post,jsonp请求处理数据等等自己做一个总结 而且有的小伙伴想考研究生,所以你也应该提前准备一下,因为据我了解,研究生也有每周项目计划表 第二:怎么去更好的学习技术【小程序技术路线】 刚学习计算机的小伙伴一脸懵逼,尤其在自己没有参加培训机构,没有开发经验的情况下要完成这样的项目,我当初都不敢想。我们是这么做的: 从基础入手,html,css,js,jq,es6语法,mvc模型 学习官文文档,非常重要 各种地方寻找免费的小程序开发教程 死磕,没其他办法,技术就是这样 学到一定程度,你可以接触一些ajax,node,vue,webpack等知识 充分理解面向对象与闭包,跨域,文件处理,KOA,正则,Express等为架构师先打下一定基础 我最近也是花了好大力气搞到一份2019年黑马程序员联合出品的架构师视频,可以免费分享给看到的学生,我看了差不多俩星期,感觉不错,我也是学生,能理解各位追求技术的热情,希望我们一起学习,加油。 第三:怎么正确对待技术? 菜不可怕,可怕的是你菜,还在群里只吹不做 1. 技术驱动永远是建立在解决需求的层次上。 2.北上广技术大佬多的是,别学了点东西就沾沾自喜,学会谦虚。 第四:本次项目开发的相关学习经验 1. 小程序的相关语法以及table栏的动画效果。 2. 引入框架,学习了vue等前端框架的知识。 3. 排版以简洁易操作为主,培养用户的懒习惯。等等 4.了解了生产环境与开发环境 5.MVC模型与MVVM模型的区别等等 因为我本身很菜,所以我没有运营经验,但我想法是:要专注作品本身,踏踏实实做事运营这方面都是后期的事。 好像没什么可以说的了,文采不好,各位见谅。 再次致谢微信官方,同时也感谢我们队伍的3个小伙伴,谢谢这缘分让我们能组队到一起,接下来的日子里要更好的学习哦 ------------------小程序队伍:太岳军区386旅独立团 ----------------------------时间:2019年6月3日
2019-06-04 - 微信开发者工具手机预览无效
手机无法预览,手机打开以后一直白屏loading 但是真机调试,秒开应用 昨天还能正常使用的
2019-04-12 - 更新了最新版的微信开发者工具后,手机预览的时候显示不出来
[图片]
2019-08-15 - 小程序将小程序码与图片结合生成海报分享朋友圈
样例参考(瑞幸咖啡小程序) [图片][图片][图片] 需求分析 服务器端会返回不确认的图片资源到前端 前端将返回的每张图片都要贴上小程序码 将贴上小程序码的图片使用 swiper 组件轮播 用户点击保存时,将图片保存至相册。 至于点击保存如何保存至相册(wx.saveImageToPhotosAlbuml 了解一下,注意一下授权问题即可) 碰到的问题 canvas为原生组件, 而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 [代码]采用方法: 通过定位,将其移除到不在可视范围,如iphone6 .canvas { position: relative; left: -375px; } [代码] 绘制多张图片时, 一个canvas 标签只能对应画一张图片 (目前我测试的是这样,如有其它方法,欢迎评论交流) [代码]采用方法: 1. html端循环要生成的图片张数,对应循环出多个 canvas 组件,分别设置不同的 canvasId 区分 2. 封装一个绘制海报的函数,返回一个Promise对象,用于后面绘制完所有的图片,统一赋值渲染,避免多次触发数据更新 3. js端 循环执行一次 绘制海豹函数,存于一个数组列表 4. 使用 Promise.all 函数,统一绘制完毕将生产图片路径赋值 html: <canvas v-for="u in m.urlList" :key="u" :canvas-id="'poster'+index" class="canvas" style="width:100%; height:100%;"> </canvas> <swiper :indicator-dots="true" :circular="true" :autoplay="true" indicator-color="rgba(255,255,255,.2)" indicator-active-color="#fff" class="swiper"> <swiper-item v-for="f in m.filePaths" :key="index"> <image :src="f"> </swiper-item> </swiper> js: // 数据 (mpvue 开发) function data(){ return { m : { urlLIst: [ // 图片资源 '/static/poster0.jpg', '/static/poster1.jpg' ], filePaths: [], // 生成图片(贴上小程序码) } } } try { let res = wx.getSystemInfoSync(); // 同步获取系统信息 let w = res.windowWidth; // 手机可用区域宽度 let h = res.windowHeight; // 手机可用区域高度 let codeUrl = '/static/code.jpg'; // 小程序码 let drawList = []; // 用于保存绘制海报图Promise对象 m.urlList.forEach( (u, i)=> { // 传入canvas组件ID,图片路径(测试使用的是本地路径) drawList.push(drawPoster('poster'+i, u, codeUrl)); }) // 统一更新数据 Promise.all(drawList).then((valuse)=>{ m.filePaths = valuse; }); // 封装绘制图片函数 function drawPoster(canvasId, bgUrl, codeUrl){ return new Promise( (resolve, reject) => { // 创建画布实例 let ctx = wx.createCanvasContext(canvasId); // 绘制背景图: 图片路径,x坐标,y坐标,宽,高 ctx.drawImage(bgUrl, 0, 0, w, h); // 绘制小程序码 ctx.drawImage(codeUrl, w-120, h-120, 100, 100); // 绘制 ctx.draw(false, ()=>{ // 该通过函数将canvas绘制导出为图片 wx.canvasToTempFilePath({ x: 0, y: 0, width: w, height: h, canvasId: canvasId, success(res){ resolve(res.tempFilePath); } }); }); } }catch(e){ // 自己封装了一成 wx.$toast(e); } [代码] 最终demo效果图 [图片][图片] 在社区中暂未看到多张海报实现的方案,如果有更好的实现方案,欢迎交流
2019-07-30 - 生成分享朋友圈微海报
[图片] 描码体验 文未有小程序源码地址 (另有偿提供后台数据接口服务) [图片] 模板代码参考 [代码] <view class='padding text-center'> <image src="{{shareImage}}" mode="widthFix"></image> <canvasdrawer :painting.sync="painting" @getImage.user="eventGetImage"></canvasdrawer> </view> <view class="padding"> <button wx:if="{{shareImage}}" class='cu-btn block bg-red margin-tb-sm lg' @tap="eventSave">保存分享图</button> </view> [代码] 部分js代码 [代码]event = { getImage (e) { wepy.showToast({ title: e, icon: "success", duration: 2000 }); } } async buildPoster(){ if(this.shareImage == ''){ wepy.showLoading({ title: "生成中", mask: true }); let poster = await commApi.GetArticlePoster(this.id) this.painting = poster } this.showposter = true; this.$apply(); } methods = { async eventSave() { // 保存图片至本地 const res = await wepy.saveImageToPhotosAlbum({ filePath: this.shareImage }); if (res.errMsg === "saveImageToPhotosAlbum:ok") { wepy.showToast({ title: "分享图已保存到相册", icon: "success", duration: 2000 }); } }, eventGetImage(event) { wepy.hideLoading(); const { tempFilePath, errMsg } = event; if (errMsg === "canvasdrawer:ok"){ this.shareImage = tempFilePath; }else{ wepy.showToast({ title: errMsg, icon: "success", duration: 2000 }); } }, } [代码] 后端php代码 [代码]public function defalutArticlePoster($app, $user, $article){ // $title_length = Str::length($article->title,'UTF-8'); // dd($title_length); $poster = [ 'width'=>460, 'height'=> 500, 'clear'=> true, 'views'=>[ [ 'type'=> 'rect', 'background'=> '#666', 'top'=> 0, 'width'=> 460, 'height'=> 500, 'left'=> 0 ], [ 'type'=> 'rect', 'background'=> '#ffffff', 'top'=> 2, 'width'=> 456, 'height'=> 496, 'left'=> 2 ], [ 'type'=> 'image', 'url'=> $article->cover? $article->cover:'https://wx1.wechatrank.com/base64img/20190402233111.jpeg', 'top'=> 70, 'left'=> 28, 'width'=> 400, 'height'=> 320 ], [ 'type'=> 'text', 'content'=> $article->title, 'fontSize'=> 18, 'lineHeight'=> 24, 'color'=> '#333', 'textAlign'=> 'left', 'top'=> $title_length>22?16:26, 'left'=> 28, 'width'=> 387, 'MaxLineNumber'=> 2, 'breakWord'=> true, 'bolder'=> true ], [ 'type'=> 'text', 'content'=> str_replace(array(" ", " ", "\t", "\n", "\r", "\r\n", PHP_EOL), '', $article->intro), 'fontSize'=> 18, 'lineHeight'=> 24, 'color'=> '#666', 'textAlign'=> 'left', 'top'=> 406, 'left'=> 28, 'width'=> 310, 'MaxLineNumber'=> 3, 'breakWord'=> true, 'bolder'=> true ], [ 'type'=> 'image', 'url'=> url('/qrcode/article/'.$article->qrcode), 'top'=> 406, 'left'=> 360, 'width'=> 68, 'height'=> 68 ] ], ]; return $poster; } [代码] 示例代码来源: https://github.com/yizenghui/wxcms/blob/master/src/pages/poster/index.wpy 项目地址: https://github.com/yizenghui/wxcms https://github.com/simmzl/wepy_canvas_drawer 觉得对您有帮助请点个赞,谢谢
2019-05-27 - #小程序云开发挑战赛#-优鲜配送联盟-JYTX
前言 2020年1月中旬,新型冠状病毒在华南海鲜市场中发生快速传播并迅速蔓延到市场之外。2020年6月中旬,北京新发地市场再次传出,农贸市场再次因是病毒首先被发现的场所而成为关注焦点。实际上,除了需要各类主体对疫情防控组织的配合和人员救治的能力外,需要的是智慧化升级改造的农贸市场,更需要的是能够充分发挥信息化工具的作用,进行【智慧防疫】。 应用场景 优鲜配送小程序帮助大家实现线上点单购买【日常食材】,如果蔬肉蛋、粮油酱醋等等,不用再每天挤出时间去菜市场买菜,同时避开密集人群。而联盟会根据人口密集地区安排【冷库点】,每天采购卫生条件良好的商户的市场食材,并当天及时发放给下单的用户,以保证食材的新鲜程度。 目标用户 主要的目标用户是【家庭主妇】,以及每天忙碌于工作但想自己做饭的【上班族】,优鲜配送小程序为他们省下了去菜市场买菜的时间,实现“下班到家,菜肉到家”。还有一部分想自己做饭但远离菜市场的【大学生】,优鲜配送小程序拉近了宿舍与菜市场的距离。 项目架构图 [图片] 技术方案 前端(小程序端)使用了第三方组件库vant-weapp组件作为前端设计的组件库IDE:微信开发者工具,Vscode后端云函数:腾讯云云开发(获取openid,添加商品数据,修改集合数据等)数据库:云开发数据库IDE:云开发控制台存储:云存储实现思路 (一)用户进入首页,小程序即调用云函数获取用户openid放入全局变量,用于【订单分配】、【收藏夹】等功能。 [图片] (二)通过云存储(放置图片)+云数据库(放置商品信息)来实现整个小程序的商品展示。 [图片] (三)用户从多个途径进入商品详情页后点击“立即购买”。 (四)用户在【buynow】页面填写完相关信息后,将【商品信息】+【用户信息】一起打包到【order】页面。 (五)此时,在云开发数据库中就出现了绑定在一起的(商品+用户)信息,商户结合硬件【如:订单打印机】即可快速收到【订单信息】,并根据用户下单后订单的地址信息,通知安排距离用户地址最近的冷库点的配送人员进行配送,一小时内送达。配送员送达之后用户可提供【订单详情页】的信息进行核对。 [图片] (六)同时根据大量的订单信息,商户可以清楚的了解到哪个地区、哪个城市需求量的大小,并以此增减冷库点数量,以及大概判定用户们的集中位置,改进冷库点的位置,减少配送距离及时间,以保证食材的新鲜程度。 功能代码展示 (一)使用云函数获取用户openid 在首页调用后放入全局变量 [图片] [图片] (二)展示功能 (三)搜索功能 [图片] [图片] (四)海报绘制功能 (五)提交订单功能[获取地址][生成订单号] [图片] [图片] (六)订单管理系统 [图片] (七)商品管理系统 [图片] [图片] 【上传商品】 【商品下架】 [图片] [图片] 【修改商品信息】 【更新今日推荐内容】 项目效果截图 首页【index】 [图片] [图片] [图片] 【轮播图+今日推荐】 【搜索功能】 【排行榜】 分类【sort】 [图片] [图片] [图片] 【分类展示】 【商品详情】 【海报图片】 [图片] [图片] [图片] 【填写订单信息】 【订单页】 【订单详情】 发现【discover】 [图片] [图片] 【发现附近冷库点】 购物车【shopcart】 [图片] 我的【mine】 [图片][图片][图片] 【我的页面】 【收藏夹】 【商品管理系统】 [图片][图片][图片] 【添加商品】 【商品下架】 【今日推荐】 [图片][图片] 【配送员服务】 【发送订阅消息】 作品体验二维码 [图片] 团队简介 陈梓杰 深圳大学 wx: Czj929350256
2020-11-03 - unshift 的使用问题
请教一下 向数据库里面一个集 添加数据 add 没有向头部添加的情况吗? updata unshift 也不行啊。 它只能更新 向一个集下面的一组数据其中一个 对象 的头部添加数据。 集里面不可以吗?
2019-11-30 - 小程序云开发数据库,如何在数据库头部插入数据,或者从数据库底部请求数据?
就是想把最新发布的数据放在数据库的第一条,而不是默认的尾部插入,又或者是请求数据时,从数据库底部往上请求数据,总之最后得到的数据列表是最后最新发布的数据会放在最前面的位置,这个怎么做,谢谢 (ps. 拿到数据后再对数组reverse那样不切实际,因为实际上一次只请求十条数据,不可能一次请求所有的数据然后reverse)
2020-06-30 - (17)分享功能调整背后的故事
有时候我们使用一个小程序会遇到以下情形: 我们打开一个小程序,就看见提示“分享到5个群,可以获得一张20元的优惠券”,吸引我们去无脑分享到不同的群里; 打开某个小游戏,提示我“一定要分享到xx个群,才能继续玩游戏”; …… 而我们在群里打开这类小程序,仍然是提示我分享的信息,这类功能无疑打断了我们对小程序/小游戏正常的功能使用。 我们收到了很多用户对这类小程序/小游戏的抱怨。这类分享并非是用户主动自发的,而是受到了某类利益的诱惑,或是被迫分享。这样的内容充斥在群里、小程序里,对用户造成了骚扰,是对分享功能的滥用。 在原来的分享接口中,用户发起分享动作之后,可以通过 success 、fail、complete等回调来判断用户是否完成了最后的分享动作。通过这个能力,开发者是可以将产品交互在分享这个能力上做得比较自然和顺畅。但却被上述情形的小程序滥用。在我们权衡了分享功能带来的利弊后,我们打算回收这个能力。调整为:我们将不再支持分享回调参数 success 、fail 、complete 。即开发者无法判断用户最终是否完成了分享动作,也无法获取到分享成功后的回调参数shareTicket 。 接下来将与大家介绍此次分享功能调整后,小程序的调整建议。 对应小程序调整建议 此次调整可能影响到两种分享功能的用法。 第一种:通过判断用户最终是否有分享来做分支逻辑的小程序。 例如,通过判断 success 回调触发,来判断用户是否分享出去了,进而给奖励,如果用户没有分享出去则不给奖励。这类功能是我们平台不倡导的,后续将没有办法实现。 如果是需要在分享完成后变更当前页面的状态,可以适当调整交互方案。例如过去赠送代金券后显示“等待领取”等应用场景,可以改成在分享后继续保留“赠送”按钮,但提示用户一个代金券只能被一人领取,重复赠送无效。 第二种:获取用户分享之后的 shareTicket ,换取群唯一标识 openGId ,进而显示对应群的相关信息的小程序。 例如,部分小程序实现了群内的排行信息,通过分享小程序到某个群里,可以查看该群内成员的排行榜。 此次调整后,用户分享完成后无法立刻显示该群的排行榜信息,但仍可在用户从群消息点击进入小程序时显示该群的排行榜信息。 因此建议适当修改产品流程,在用户分享小程序之时,提示用户可进入群内查看群排行等信息。避免调整策略生效之后带来的交互不完整影响。 调整覆盖范围提示 近期新提交的版本中将会受到此策略的影响。 除此之外,调整策略在即将发布的基础库版本 2.3.0 生效,该基础库版本对应本月即将发布的微信客户端版本(暂定版本号 6.7.2)。即:近期提交审核的小程序版本,在基础库版本 2.3.0 以下的环境中仍不受此策略影响,仅在基础库版本 2.3.0 以上的环境受影响。 开发者需要注意,近期提交审核的版本都需要考虑兼容上述调整带来的影响,请各位开发者及时调整分享能力。
2018-08-17 - 这文档是敌特派来的人写的吗?目的就是为了整死我们搬砖工吗?
事情是这样的。 我司一小破程序,打开时类似这样,显示一个logo,一个标题 [图片] 经过一个2秒的动画效果,logo和标题就移动到上面部分了,同时渐显出来一个loading组件,这些都是使用小程序的Animation API实现的。 [图片] [图片] 现在需求来了。 我们想在首屏渲染后。在图标往上移的动画执行周期中,将背景色缓慢从蓝色变为白色。 (别问为什么要变背景色,我们准备待会加完班拿上弹弓组团去打设计师家玻璃了) [图片] 有朋友会说了,这不是很简单嘛,弄个定时器去替换class不就行了? 我只想说,no no no。朋友,我们搬砖就要有搬砖的样子嘛。 什么时间搬,搬多少,什么时间停,都要严谨嘛。 天真的我,想当然的就拍着胸脯向BOSS表示小意思啦。 [图片] naive的我心里想着 肯定会有动画执行开始和结束一个callback接口的嘛 然鹅,、翻遍了小程序文档里关于动画的各个段落之后才发现 [图片] 神马?? 我不信!一定是我的眼刚刚瞎了,我要再看一遍。 [图片] [图片] [图片] [图片] [图片] PS 看,多么言简意赅的文档! 在看多了外面那些"妖艳贱货"的文档后,如此小清新的文档,还真让我这老司机虎躯一震。 // TODO 我当即在心里暗暗发誓,我一定要强烈建议我司将此文档规范引进并在我司大范围实践,太他【文明用语】高效了。 END PS 在我不懈的努力下 在某毒找到了一篇关于动画重置的实例 [图片] [图片] 哦也,三七三十一,一定是我聋了才没看见这么大个接口 同事心里还在做自我批判,怎么能轻易的就甩锅给腾讯爸爸。 祭出我的Ctrl+F大法 [图片] 果然。还是我太天真。竟然没有搜到 0/0? 在经过了一番苦苦的某毒搜索之后,猛然意识到,或许是我姿势不对? [图片] 谢天谢地,博客园诚不我欺。确实有这个东东。 我默默的打开了唯一的一条搜索结果学习了起来。你猜怎么着? [图片] 我发现了腾讯爸爸藏起来的彩蛋。 哇,没想到小程序团队这么调皮。 在动画相关的所有文档里,竟然半个字都没提有这几个事件。保密工作做的很到位。表扬。5星好评。 [图片] 根据文档,照猫画虎。 [图片] [图片] 控制台没有任何反应 [图片] 一定是我姿势不对,我换换姿势。 [图片] [图片] 一顿操作猛如虎,然鹅发现并没有什么卵用。 [图片] [图片] [图片] 我盯着这条说明,默默的给自己点上了一根烟后陷入了痛苦的沉思。 期间我尝试了各种姿势,都没有找到关于WXSS animation到底是个什么鬼。 我只知道有Animation这个动画API。或许他俩是一个东西? 但是为什么Animation里没有关于它的只言片语? [图片] 既然Animation里没有写,肯定是另外一套体系吧? 灵光一闪, oh no,别又是腾讯爸爸调皮了把文档藏起来了吧。 [图片] [图片] 经过地毯式的搜索及换遍了各种姿势想要跟我的小程序互动一把后。 [图片] [图片] [图片] 我选择死亡。 [图片] [图片] 我想起那天夕阳下调的微信小程序,那是我逝去的青春。。。 IDE: v1.02.1901230 Library: 2.4.2
2019-01-28