- 复制任意微信小程序页面路径
以下以微信小程序“虎牙直播”为例,演示如何复制微信小程序页面的路径。 1.进入小程序的“关于虎牙直播”页面 [图片] 2.点击右上角的“…”进入“更多资料”页面 [图片] [图片] [图片] 3.复制AppID:wx74767bf0b684f7d3 4.进入小程序后台输入appid并搜索,然后点下一步 [图片] 5.鼠标移动到“获取更多页面路径”,在弹出窗口输入当前登陆的小程序的任意开发者微信号,然后点击开启,出现顶部的“开启入口成功”就可以使用手机访问“虎牙直播”任意页面进行复制了 [图片] 6.某个直播间的页面路径:pages/main/liveRoom/index.html?anchorUid=1678113423&source=search[图片] PS:复制出来的页面路径在小程序里使用的时候记得删除 .html 才能正常访问。
2020-01-16 - 微信证件OCR小程序应用案例分享
应用场景 身份证/银行卡识别 用户身份认证 - 应用于政务、金融、企业服务等应用下的远程用户身份认证,自动识别并录入各字段信息,降低用户输入 成本,有效提升用户体验。 商户身份核验 - 应用于电商、外卖、运输服务等场景下的商户身份认证、资质文件审核,提高平台服务质量,规避恶意违规等业务风险。 身份证识别: [图片] 银行卡识别: [图片] 营业执照识别 企业信息电子化存档 - 准确识别营业执照的关键字段,快速核验企业资质,完成企业信息的快速录入,提升企业信息化管理水平,有效节约人力成本 。 商家资质审查 - 通过对供应商企业信息的结构化识别和审核核验,提高合作伙伴的管理效率 银行金融信贷服务 - 适用于企业银行开户、信贷评估等金融服务场景,通过对企业信息的自动化审查,提升银行业务效率,有效控制业务风险。 [图片] 驾驶证/行驶证识别 车主身份认证 - 只需拍照即可快速上传本人证件信息,帮助车主快速完成身份认证,降低车主输入成本,广泛应用于 ETC 办理、打车、租车、车险投保理赔等场景。 车主信息服务 - 在汽车保险理赔、二手车交易、车辆租借和年审等场景,帮助用户快速录入车辆相关信息,提高业务人员的办公效率和服务准确性。 [图片] 通用印刷体识别 纸质文档电子化- 使用通用文字识别技术,助您完成大量的文档整理工作,从书籍、纸质论文、档案、PPT 课件等印刷资料,到课堂笔记、作业作文等手写内容,均可实现拍照自动识别文字,方便用户进行文本录入和文档管理,提高产品易用性和用户体验。 [图片] 补充:微信证件OCR的接口文档 银行卡识别 营业执照识别 驾驶证识别 身份证识别 通用印刷体识别 行驶证识别 服务平台 OCR 接口
2020-10-10 - 微信小程序有身份证护照拍照显示模具的是怎么弄的?
[图片]
2019-10-11 - 小程序内用户帐号登录规范调整和优化建议
为更好地保护用户隐私信息,优化用户体验,平台将会对小程序内的帐号登录功能进行规范。本公告所称“帐号登录功能”是指开发者在小程序内提供帐号登录功能,包括但不限于进行的手机号登录,getuserinfo形式登录、邮箱登录等形式。具体规范要求如下: 1.服务范围开放的小程序 对于用户注册流程是对外开放、无需验证特定范围用户,且注册后即可提供线上服务的小程序,不得在用户清楚知悉、了解小程序的功能之前,要求用户进行帐号登录。 包括但不限于打开小程序后立即跳转提示登录或打开小程序后立即强制弹窗要求登录,都属于违反上述要求的情况; 以下反面示例,在用户打开小程序后立刻弹出授权登录页; [图片] 建议修改为如下正面示例形式:在体验小程序功能后,用户主动点击登录按钮后触发登录流程,且为用户提供暂不登录选项。 [图片] 2.服务范围特定的小程序 对于客观上服务范围特定、未完全开放用户注册,需通过更多方式完成身份验证后才能提供服务的小程序,可以直接引导用户进行帐号登录。例如为学校系统、员工系统、社保卡信息系统等提供服务的小程序; 下图案例为正面示例:校友管理系统,符合规范要求。 [图片] 3.仅提供注册功能小程序 对于线上仅提供注册功能,其他服务均需以其他方式提供的小程序,可在说明要求使用帐号登录功能的原因后,引导用户进行帐号注册或帐号登录。如ETC注册申请、信用卡申请; 如下反面示例,用户在进入时未获取任何信息,首页直接强制弹框要求登录注册ETC,这是不符合规范的。 [图片] 建议修改为如下正面示例所示形式:允许在首页说明注册功能后,提供登录或注册按钮供用户主动选择点击登录。 [图片] 4.提供可取消或拒绝登录选项 任何小程序调用帐号登录功能,应当为用户清晰提供可取消或拒绝的选项按钮,不得以任何方式强制用户进行帐号登录。 如下图所示反面示例,到需要登录环节直接跳转登录页面,用户只能选择点击登录或退出小程序,这不符合登录规范要求。 [图片] 建议修改为下图正面示例形式,在需帐号登录的环节,为用户主动点击登录,并提供可取消按钮,不强制登录。 [图片] 针对以上登录规范要求,平台希望开发者们能相应地调整小程序的帐号登录功能。如未满足登录规范要求,从2019年9月1日开始,平台将会在后续的代码审核环节进行规则提示和修改要求反馈。
2019-07-20 - 关于小程序接入给赞赞赏功能(给赞小程序已于2020年5月5号暂停小程序服务)
给赞小程序已于2020年5月5号暂停小程序服务,本文章仅起纪念意义 - 关于小程序接入给赞赞赏功能 背景:由于个人小程序没有支付功能,无法让用户直接通过调用支付接口直接打赏,喵咪咪科技专门开发了一款打赏小程序:‘给赞’:它可以每个用户创建一个独立的打赏账户,还可以编辑各种打赏样式风格,废话不多说上图; 1. 觉得有用可以先打赏个啦!没事就算1分钱也是支持!(长按识别) [图片] 2. 首先微信搜索‘给赞’小程序完成授权注册(也可直接扫上面我的赞赏码直接进入后点击左下角:我也要收赞赏 即可),然后再关注‘给赞’公众号:回复‘路径’二字如图,系统会自动返回一个小程序带参跳转地址,将这个地址放在跳转路径里面即可; [图片] [图片] 3.前端页面代码如下图: app_id : wx18a2ac992306a5a4 路径:path=“pages/apps/largess/detail?id=cTq9h%2BdgXUU%3D” 你到时候自己填入自己的就行了,我比较懒就不打码了别填错了; [图片] 4.运行示意图(闪图有些粗糙): [图片] 5.体验程序: [代码]a.此生余时(生命话题)(长按识别) [代码] [图片] [代码] b.心疑(恋爱话题)(长按识别) [代码] [图片] 6. 到此收工,确实觉得有用可以打赏个啦!没事就算1分钱也是支持!(长按识别) [图片]
2020-08-16 - 微信小程序swiper高度动态适配(子元素高度不固定)
示例代码地址 https://github.com/s568774056/swipe.git 对于整页都是swiper的情况下。例如下面这张图: [图片] 则可以使用如下css [代码] [代码] [代码]swiper,swiper-item{[代码] [代码] [代码][代码]height[代码][代码]: [代码][代码]100[代码][代码]vh [代码][代码]!important[代码][代码];[代码][代码]}[代码] [代码] [代码] [代码]或者 [代码] [代码] [代码] [代码][代码] [代码][代码] swiper,swiper-item{ height: calc(100vh - 75rpx) !important; } [代码][代码] [代码] [代码] 对于swiper占据部分高度的情况下。 [图片] 使用如下代码 原理为在[代码]swiper-item[代码][代码][代码]的最上面和最下面插入空view,并利用wx api获取两个之间的高度差,然后设置给[代码]swiper[代码]。 细节方面需要自己调整下。为什么小程序不把这个组件做好呢?还得自己计算- -! <swiper class='hide' bindanimationfinish="swiperChange" style="height:{{swiper_height}};" current="{{isIndex}}"> <swiper-item wx:for="{{roomList}}" wx:for-item='room' wx:for-index="index"> <view id="start{{index}}" class='start-view'></view> <block wx:for="{{imgUrls}}" wx:for-item='path' wx:for-index="img-index"> <image mode="aspectFill" src="{{path}}" /> </block> <view id="end{{index}}" class='start-view'></view> </swiper-item> </swiper> [代码][代码][代码][代码] swiper { margin-top: 45rpx; } Page({ data: { roomList: ['Room1', 'Room2', 'Room3'], imgUrls: [ 'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640', 'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640', 'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640' ], swiper_height: 0, isIndex:0 }, onLoad: function () { this.autoHeight(); }, changeNavBar: function (e) { this.setData({ isIndex: e.detail }); }, swiperChange: function (e) { this.setData({ isIndex: e.detail.current }); this.autoHeight(); }, autoHeight() { let { isIndex } = this.data; wx.createSelectorQuery() .select('#end' + isIndex).boundingClientRect() .select('#start' + isIndex).boundingClientRect().exec(rect => { let _space = rect[0].top - rect[1].top; _space = _space + 'px'; this.setData({ swiper_height: _space }); }) } }) 参考文章https://developers.weixin.qq.com/community/develop/doc/00008aaf4a473056d1c69a8b253c04
2019-09-04 - 干货
<view>{{~~(1.999)}} </view> 这样可以取整; 注意:是向下取整的 即 <view>{{~~(1.999)}} </view> 最终渲染为 <view>1</view> 感谢 寒雪 提醒 . 为了防止setData一次传输大量的代码导致页面卡顿或者报错,个人建议使用下面的做法: 滚动加载或者点击加载更多数据的时候,我们一般会采取分页的形式,后端一次会给我10条数据或者5条 给我们的数据一般都是数组 page({ data:{ mrData:[] } }) 我们把从后端拿到的数据这样做 【我是第一次获取的数据是一个数组】 当用户滚动加载的时候 从后台获取到第二次数据 【我是第一次获取的数据,我是第二次获取的数据】 具体写法 let that = this; this.setData({ [[代码]mrData[${that.data.mrData.length}][代码]]:后台给的数组 }) 不知道为什么 我写上 ``不显示了 记住是利用 ES6字符串模板 其转化后为 this.setData({ [‘mrData[0]’]:后台给的数组 }) 循环数据的话 <block wx:for=’{{mrData}}’ wx:key> <block wx:for=’{{item}}’ wx:key wx:for-item=‘it’ wx:for-index=‘ind’> {{it}} </block> </block> 这样就可以了 这样做的好处就是 每次修改只修改部分 这样就解决了 每次滚动加载的是 我们都要重新赋值大量的数据 我还是粘贴一下代码的好 如下: [图片] [图片] [图片] 渲染后的页面出现的效果 如下 [图片] 点击第一个 小浪花 [图片] 成功改变了 nice 一般的写法是这样的 不知道和你写的是否一样 [图片] [图片] 从后台获取数据后 然后把这个数据 push到原来的大数组中 然后再setData 每次setData的数据都会增大 最后超过限制导致页面卡顿影响性能 有可能还会报错 还有就是 第一次写文章 不知道这样写是否有人能看懂 ,希望大家能由此举一反三,看到类似的问题可以想到这样的方法 虽然有些繁琐 但是真的能优化性能,如果能帮到你 希望动动小手指 给我点个赞吧~ O(∩_∩)O哈哈~ 默默无闻的余小浪
2019-05-22 - 小程序图片上传,存储,获取,显示
我们在做小程序开发时,难免会遇到图片上传的功能,我们如果自己搭建图片服务器的话,成功太大了,并且还要写后台程序来接收上传的图片,还要有存储服务器。好在小程序云开发为我们提供了云存储的功能,这样我们就可以轻松的实现小程序图片的上传和存储。 老规矩,先看效果图 [图片] 本节知识点 1,小程序图片的选取 2,小程序图片的上传 3,小程序图片的存储 4,获取云端图片并显示 下面就来具体讲解下具体实现步骤 图片的选择和上传 index.wxml文件如下 [代码] <view class='item_root' bindtap='chuantupian'> <text>{{zhaopian}}</text> <view class='right_arrow' /> </view> [代码] index.js文件如下 [代码] //上传图片 chuantupian() { let that = this; let timestamp = (new Date()).valueOf(); wx.chooseImage({ success: chooseResult => { wx.showLoading({ title: '上传中。。。', }) // 将图片上传至云存储空间 wx.cloud.uploadFile({ // 指定上传到的云路径 cloudPath: timestamp + '.png', // 指定要上传的文件的小程序临时文件路径 filePath: chooseResult.tempFilePaths[0], // 成功回调 success: res => { console.log('上传成功', res) wx.hideLoading() wx.showToast({ title: '上传图片成功', }) if (res.fileID) { that.setData({ zhaopian: '图片如下', imgUrl: res.fileID }) } }, }) }, }) }, [代码] 到这里其实我们就可以实现图片的选取和上传功能了。 下面讲讲具体是如何实现的 首先我们通过wx.chooseImage来获取相册里的图片 再获取照片成功后,我们用当前时间戳命名图片,然后使用 wx.cloud.uploadFile方法来实现图片的上传 在上传成功后,会有如下回调。下图中的filenId就是我们在云存储中的路径,可以直接用这个路径来获取图片并显示的。 [图片] 到这里我们就轻松的实现了小程序图片上传的功能,是不是很简单。 有任何关于编程的问题都可以加我微信2501902696(备注编程开发) 编程小石头,码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。 视频讲解地址:https://edu.csdn.net/course/play/9604/281187 [图片]
2019-06-11 - 地图挡住固定在底部按钮的解决办法
主要代码: wxml: [代码]<view class="container"> <scroll-view class="main" scroll-y> <view style="height: 100%;"></view> <map class="map" id="map" style="width: 100%; height: 200px;"></map> </scroll-view> <view class="btn">按钮</view> </view> [代码] wxss: [代码]page, .container { height: 100%; width: 100%; } .container { display: flex; flex-direction: column; } .container .main { flex: 1; } .container .btn { height: 90rpx; background: #ff5200; color: #fff; line-height: 90rpx; text-align: center; } [代码] 手机上效果图 [图片] 代码片段:https://developers.weixin.qq.com/s/A0JmrkmN7087
2019-05-13 - 小程序图片访问失败使用默认图片
不知道大家注意image组件没有,img组件里面有一个binderror属性。 binderror 当错误发生时触发,event.detail = {errMsg} 我们利用这个属性,当图片访问失败时就会访问我们自定义的函数。 好,首先我们在data里面有一个图片数组 [图片] wxml循环输出这个图片数组 同时给图片绑定数据data-index 为循环的序号 {{index}} [图片] 看一下界面(ps:第三个图片我故意写错地址) [图片] 然后我们写图片访问失败函数,很简单,直接替换images中序号为index的图片地址为我们的默认图片地址 [图片] 欧了,看一下效果 [图片]
2019-05-13 - cover-view实现input标签功能
html代码: [代码]<cover-view class='items'> <cover-view class='name'>设备名</cover-view> <cover-view class='display' bindtap='inputNameState'> {{nameInfo}} </cover-view> <cover-view class='border'></cover-view> <input type="text" focus="{{nameTrue}}" bindinput="inputName"></input> </cover-view> [代码] js代码: [代码]inputNameState(){ this.setData({ nameTrue: true }) }, inputName(e){ this.setData({ nameInfo: e.detail.value }) } [代码] 实际效果 [图片]
2019-05-13