微信小程序
文章平均质量分 52
hangGe0111
这个作者很懒,什么都没留下…
展开
-
checkSession一直回调success怎么回事
1.https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.checkSession.html2.https://developers.weixin.qq.com/community/develop/doc/0000645417c8980194baf9e4d57000转载 2020-11-05 17:20:41 · 1131 阅读 · 0 评论 -
微信小程序video组件使用poster设置封面图没有效果;object-fit类型,网络环境wx.getNetworkType,网络环境改变wx.onNetworkStatusChange
1.背景:在某些情况下poster会发生无效展示状态:1.1 若 controls 属性值为 false 则设置 poster 无效1.2 poster取视屏第一帧做背景,如果第一帧为空白,则不展示海报图;1.3 某些情况下,需要统一视屏的海报图,例如做活动需要展示一个比较好看的海报背景...此时,如果使用video的poster都不能实现以上需求2.实现思路:自己放一张海报图放在原生组件video上,做一个播放按钮,点击播放。video这种原生组件的层级比较高,通过cove...原创 2020-11-11 14:47:43 · 3294 阅读 · 0 评论 -
微信小程序video自定义control
1.背景:有些时候需要用到video自定需求,可以参考如下案例2.思路2.1 把原生的controls(底部的控制,进度条,暂停播放)隐藏掉,然后自己重写controls:2.2 把原生的show-fullscreen-btn(全屏,退出全屏)隐藏掉,并重写;2.3 定义bindplay(播放),bindpause(暂停),bindended(播放完毕),bindtimeupdate(更新播放时间,在拖动进度条时需要用到),一一通过代码实现即可3.代码:3.1wxml<v原创 2020-11-11 14:03:56 · 3380 阅读 · 2 评论 -
小程序锚点跳转(字母滚动到相关城市楼层)
城市快捷导航,可以点击触发,也可以触摸(手指在快捷导航从上往下连着往下触摸移动,导航跟着变动)1.util.jsvar cityObj = [{ "id": "35", "provincecode": "150000", "city": "\u963f\u62c9\u5584\u76df", "code": "152900", "initial": "A" }, { "id": "38", "provincecode": "210000", "city": "\u978d\u5c71\u5e02"转载 2020-09-25 15:21:12 · 1434 阅读 · 0 评论 -
weui在微信小程序中使用
1.方法一 (useExtendedLib方式 (推荐此方式)):说明:这种方式引入的组件将不会计入代码包大小,并且 不需要 在app.wxss 中引入weui.wxss,比较方便:1.1 首先在app.json 配置:{ "useExtendedLib": { "weui": true }}1.2 在需要使用的页面 的 json文件 引入组件:"usingComponents": { "mp-dialog": "weui-miniprogram/...原创 2020-09-15 14:51:44 · 721 阅读 · 0 评论 -
微信小程序吸顶两种方式,一种js,一种css (position: sticky; top: 0;)
1.比较常用的方式,通过js获取当前元素距离顶部的高度,同时通过onPageScroll监听页面滚动的高度,对比二者的大小,通过fixed定位来实现置顶悬浮。(此方式需注意,不要一直setdata,不然会出现卡顿现象)。1. wxml<view style="width: 100%; height: 300rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view><view style="width: 1原创 2020-08-10 14:58:09 · 1831 阅读 · 0 评论 -
微信小程序分享盆友圈(onShareTimeline)
1.代码Page({ onShareTimeline: function() { return { title: '自定义标题', query: 'name=xxx&age=xxx', imageUrl: 'http://demo.png', } },})2.参数 (官网传送门)3.分享到朋友圈 Beta,注意事项,点击可参考:3.1 基础库 大于等于 2.11.3 才开始支持;3.2 目前为Beta版本,暂时只支持在 Android 平...原创 2020-08-10 09:58:42 · 6003 阅读 · 3 评论 -
微信小程序优化注意点(用户体验,数据逻辑优化)
1.对于列表请求数据,使用二维数组,以分页的页码做一维下标,以条数做二维下标,每次setData只setData当前页的数据,其他页的数据不用。因为每次setData的数据量大小有限制,官网也有说明;可以参考2.对于列表中删除某一项,会存在状态不对的情况。例如:左滑删除,一页数据有10条,左滑删除第5条,此时第6条变为第5条,此时的第5条应该不是出于左滑状态,但是显示的是左滑状态,应该给每条for循环的添加一个key即可。(点击参考传送门)3.对于表单提交:3.1对于input填写,然后原创 2020-07-02 14:16:27 · 3579 阅读 · 0 评论 -
微信小程序跳转微信小程序传参
1.背景:在某些情况下,需要使用到微信小程序间的跳转携带参数。例如:小程序A跳转到小程序B,小程序A是北京的数据,跳转到小程序B(B默认的是西安的),此时就需要将A的北京的城市传给B,让B的信息也切换为背景的才对,此时就需要把小程序A的城市信息通过小程序跳转的方式传给B小程序。2.参数携带有两种:(1)path方式(参数拼接到路径中通过 ? 或者 & 进行拼接,和pc段类似,然后对路径进行解析,获取携带参数,此法官网api中也有说明,详情见官网)。(2)extraData方式(跳原创 2020-07-01 15:00:48 · 1275 阅读 · 0 评论 -
微信小程序获取rich-text(富文本)渲染内容高度,rich-text(富文本)里img 样式设置
1.背景:在某些场景下,例如在某些详细信息内容展示数据量特别大的时候(有时候特别小),当数据量特别大的时候,需要做展示固定高度,展开更多内容完全展示,收起内容又还原。当内容特别少的时候,例如小于3行,不展示更多按钮。(小程序内容获取的时候是不能知道当前内容有几行的,可能有人会说,我知道字体大小一行内放几个字,几行就再乘以几,让后台算好,传两个字段,展开收起,分别用两个字段即可,理论上是可行的(...原创 2020-04-30 15:15:37 · 12841 阅读 · 1 评论 -
小程序结合腾讯地图(QQMapWX)SDK做位置周边搜索在地图上展示气泡点,点击气泡展示不同状态
1.背景:在微信小程序中,地图上展示一个坐标点周边的医院学校等周边设施,通过地图上气泡的方式。点击气泡展示不同的气泡状态,点击导航跳转到对应气泡点所在的坐标位置。2.实现思路:2.1布局:地图全屏展示,地图上的位置tablist展示在地图底部,跳转导航按钮位于地图右上角。因为map属于原生标签,而且层级比较高,所以tablist和按钮都需要通过cover-view和cover-im...原创 2020-04-21 11:24:45 · 5792 阅读 · 1 评论 -
小程序结合腾讯地图(QQMapWX)SDK做位置周边搜索展示
1.wxml<view class="container"> <view class='newHouseTitle'> 当前位置 </view> <view class="map_wrap"> <map id="map" longitude="{{t_lng}}" latitude="{{t_lat}}" scale="...原创 2020-04-20 16:39:44 · 4016 阅读 · 3 评论 -
微信小程序css方式animation动画弹幕实现
1.背景:背景一:在某些场景下需要用到弹幕,例如视屏直播网站等等需要用到弹幕,视屏直播等平台会用到输入发送弹幕,这个可以参考小程序的视屏播放部分video传送门,在video组件中直接有弹幕配置方式,详细参考官方文档,这里不做赘述。场景二:有些场景只需要播放弹幕(例如在重大节日里,需要烘托节日气氛,后台填写几条,然后接口返给前端,前端在屏幕固定范围内播放即可,这里无需用户手动输入)...转载 2020-01-15 10:24:08 · 1406 阅读 · 6 评论 -
wx.createSelectorQuery().select微信小程序获取dom节点位置
1.场景:在某些情况下需要用到某个元素距离顶部的距离。1.1场景一:例如在某些小程序的详情页,由于页面展示的内容特别多,页面有好几屏的高度,辣么庞大的数据量,放在一个接口里显然是不合理的(小程序setData有1024大小限制;如果数据太大请求时间会比较长用户的页面等待时间特别长,总之一句话用户体验不好),所以就需要把接口分开为几个,同时小程序对于页面的进程数有限制(好像是5个还是几个...原创 2019-12-27 14:10:38 · 3447 阅读 · 4 评论 -
微信小程 input序键盘弹起时,是否自动上推页面 adjust-position,input底部悬浮聚焦键盘弹起遮盖
1.背景:对于某些在输入框聚焦时不需要向上推动页面的需求,可以尝试此方法,小程序官方文档也有说明。2.思路:2.1给底部悬浮的部分动态设置bottom,聚焦时设为键盘弹起的bottom值,失焦时设置bottom为0;2.2 给input框设置adjust-position="{{false}}" 即可。3.代码3.1 wxml3.2js4.效果5....原创 2019-12-27 11:09:35 · 4981 阅读 · 1 评论 -
微信小程序自动回复机器人(模拟云信案例)
1.场景:输入关键词,对内容库进行检索,得到搜索结果,反馈给用户。其实也不算是机器人,也类似于搜索的样子,只不过以聊天界面的形式展现出来,当然了,在完成这个流程的过程中,也会出现一些问题,思路记录,仅供参考。2.思路:2.1 毋庸置疑,首先搭建前端界面(这块没什么可说的,对方和自己的样式最好大多数一样,通过一个‘me’和‘you’来进行区分,比较好);2.2 逻辑处理部分(数据缓存...原创 2019-12-27 11:09:53 · 13043 阅读 · 0 评论 -
微信小程序制作楼栋鸟瞰分布图
1.思路后台上传一张楼栋背景图底图,分别定位出每个楼栋号的横向,和纵向的坐标位置,通过for循环展示每个楼栋状态的icon,点击每个icon获取当前index,取到数据对应信息展示即可。因为后台楼栋分布底图每个楼盘可能都不一样,但是前台展示会有一个大小(不可能不限宽和不限高),所以这里会涉及一个背景图缩放比的计算问题。图片缩放比的计算,点击参考这篇文章。2.代码实现2.1wxml...原创 2019-11-13 13:55:37 · 4706 阅读 · 0 评论 -
微信小程序获取图片的宽高,计算宽高比,image图片的bindload,image的wx.getImageInfor
1.背景在某系场景下可能会需要获取图片的宽高,例如做楼盘相关的,楼栋分布,一张底图,然后每个楼栋号在不同页面的具体位置,就需要通过定位来实现。不能保证每一张楼栋分布底图的宽高比都一样,此时就须算出宽高比从而得到位置。2.思路2.1思路一:通过 wx.getImageInfo 方法,只需要一个图片的地址,就能获取图片的信息,这张图片的域名须在当前小程序中配置合法域名,必须为https...原创 2019-11-13 09:54:09 · 10188 阅读 · 2 评论 -
小程序自定制从顶部弹出的picker,模拟贝壳找房
1.背景1.1.要求:顶部有一个tab栏,点开后会存在1级,2级,3级菜单(不论有积极菜单,都要点击到最后一级才会选中)1.2.要求:对于有些数据第一项需要加不限,有些不需要,根据要求自行添加,点击不限展示原文字,只有点击不限之外的文字选项才会放在tab中展示1.3.要求:对于筛选的部分,里边有可以多项选择的,有些不是多项的,须分开1.4.要求:有多级的只有点击了最后一级才会把选择的...原创 2019-11-07 15:22:05 · 1473 阅读 · 0 评论 -
微信小程序双向滑动slider
1.使用场景,通过滑动滑块,获取价格的范围,提交表单获取搜索结果。slider是单向的,这种范围获取的可能不行(当时的想法),还有一种思路,就是通过touch事件,使用view进行布局,手写一个(这种当然可以)。然后再网上找了一些资料,发现有人也有相同的需求,而且有案例,然后就做了伸手党,并且把找到的资料做了一下整理,方便后续参考使用,如有侵权,请联系博主删除。2.代码2.1wxml...转载 2019-11-07 13:52:44 · 2709 阅读 · 0 评论 -
小程序搜索页(bindfocus,bindblur,bindconfirm,bindinput)
1.老版1.1小程序一般会在首页的顶部做一个假的搜索样式 = => 点击该样式跳转到有输入框的页面,在页面输入要搜索的文字,①点击空白处input框失去焦点跳转到搜索结果页②也可以点击键盘上的搜索键,触发跳转到搜索结果③点击取消按钮一般不是清除input框内容停留在本页面而是返回到首页 ==> 到搜索结果页,结果页拿到input框页带过来的关键字请求接口即可;1.2在inp...原创 2018-07-27 17:42:40 · 16757 阅读 · 4 评论 -
picker-view 和 picker-view-column 自定义可以切换的picker
场景:对于小程序官方提供的picker基本能满足大多数需求,但如果涉及类似于在picker的弹出层上进行两种不同类型的picker切换,还是无法实现的。但官方最近新提供了picker-view ,可根据自己的使用场景来自定义自己的picker。1.wxml<!-- 楼层的picker --><view class='lcBtn flex flexC'> &l...原创 2019-07-19 17:52:22 · 5513 阅读 · 0 评论 -
小程序swiper制作分门别类的轮播
简单的轮播图在文档中可直接使用,但有写需求可能需要改动一下。例如,在轮播图底部放几个分类的按钮,点击各个按钮,分别跳转到该分类的第一张图,当轮播图在滚动的过程中,由分类1的最后一张图切换为分类2的最后一张图,下边的分类状态也从第一个激活状态变为分类2的激活状态,以此类推...当点击图片再进行分门别类的跳转。1.代码1.1wxml<!-- 轮播图 --><view ...原创 2019-09-18 16:18:02 · 6358 阅读 · 0 评论 -
小程序页面分批次加载(模拟懒加载)
有些情况,例如在详情页,可能涉及的接口个数比较多,因为详情一般数据量比较庞大,如果部分开,一个接口请求,会导致请求时间比较长,用户体验会很差,所以此时就可把这个大接口分开,当页面滚动到某个楼层时再请求后边楼层的数据。1.代码1.wxml<view style="width:100%;height:200rpx;">1</view><view styl...原创 2019-09-18 17:16:28 · 1310 阅读 · 0 评论 -
小程序 模拟今日头条导航栏,点击锚点跳转对应楼层
使用场景,顶部导航的个数不确定,会有超出屏幕的情况,在一行展示,每点击一个导航的tab会判断是否向左或者像右滚动一个距离,以使当前的点击的导航能看到。同时点击导航会锚点跳转对应楼层,当前导航会变为激活状态。滚动屏幕,滚动到对应楼层,对应导航变为激活状态。1.代码实现1.1wxml<!-- 楼盘相册 --><scroll-view class='xcnyTab' s...原创 2019-09-20 09:27:55 · 10037 阅读 · 0 评论 -
小程序常用组件(video,map,wx.showToast,wx.showModal,button,打电话,text)
1.video(官方地址:https://developers.weixin.qq.com/miniprogram/dev/component/video.html)1.1wxml<view class="mask"> <view class='mask-wrap'> <video class='mask-video' id="myVideo" ...原创 2019-09-20 09:28:09 · 14147 阅读 · 0 评论 -
微信小程序component父子组件传值
在某些场景,用到组件还是比较多的。例如,在页面的底部有一个悬浮,悬浮分两种,每种里边有四个按钮,每个按钮分为登录和没登录两个状态,点击每个按钮绘根据后台传的值的状态不同分别请求不同的接口(当然了,有些处理完页面也可能是跳转,或者跳转webview,或者reLaunch某个页面......)。总之一句话,这个底部悬浮比较麻烦,考虑的场景比较多,然后呢,好多页面都会用到,不用写那么多的重复代码,写好一...原创 2019-09-23 11:15:20 · 3075 阅读 · 0 评论 -
小程序button=disable样式修改,弹起多个蒙层限制
在好多场景都需要对点击按钮做限制,防止连续点击。why?例如场景获取电话号码授权,如果不做限制,会弹起多次授权弹窗,好;多个进行叠加,想关闭,得点击多次。场景2:接口比较慢时,用户会多次点击按钮,多次请求接口,这显然不好......诸如此类,所以限制点击势在必行。百分之99以上的公司对界面的要求都比较高,按钮都会使用自己公司UI设计的样式,而非原生的button组件,我从网上查过一些资料,有些...原创 2019-09-23 16:13:30 · 1228 阅读 · 0 评论 -
微信小程序强制更新
(如果想直接使用,可直接拉到最底部5.2,有比较全的代码)1.场景:随着这些年的不断完善,移动端的产品在往小程序倾斜,以前是小程序为app倒流,现在小程序不断完善app能做到的功能,小程序基本都能做到,而是小程序属于轻应用,无需下载,用完即走,也可添加到桌面快捷方式,使用起来非常方便,深受广大用户的喜爱;而且发布审核的周期也比较短,功能更新发布也比较迅速。所以公司在大力开发,推广使用小程序。小...原创 2019-09-25 14:33:15 · 1385 阅读 · 1 评论 -
小程序左滑删除
1.场景:在做列表页和收藏页面都用到了列表的样式,就想着做一个组件或者模板,都能共用,但收藏又有不同,因为收藏页的列表有取消(即就是取消收藏),产品要求是删除按钮是隐藏的,只有左滑才会出现,点击删除按钮就会取消收藏。当时立马就有了思路,然后开干。2.思路:2.1 思路一:通过touch事件来判定是否左滑,通过translateX来控制左滑或者右滑,当时在看云信im的小程序代码,它就是通过这...原创 2019-09-25 15:59:01 · 418 阅读 · 0 评论 -
小程序锚点跳转(例如楼层快捷导航,点击字母滚动到相关城市)
使用场景:楼层之间的快速切换,锚点的跳转,点击字母滚动到相关的城市原理解析1.代码1.1.wxml<view class='container'><view class='left'> <scroll-view class='leftScroll' scroll-y> <block wx:for="{{list}}" wx:...原创 2019-07-19 13:20:38 · 1716 阅读 · 2 评论 -
微信小程序图片上传,删除,拖拽,(裁剪参考链接,参看说明5.6)
场景:从相册中选择照片,展示图片列表,删除某张不需要的图片,通过拖拽调整图片的位置顺序。1.wxml<!-- 上传图片 --><view class='uploadPic'> <view class='uploadPic-ul clearfix'> <movable-area class='uploadPic-ul-wrap cle...转载 2019-07-18 16:43:45 · 4864 阅读 · 0 评论 -
用户位置授权
1.在微信小程序中很多场景都需要用户授权,例如用户相册权限,位置权限...,当需要将海报保存在相册就会用到相册权限(海报参考),在城市定位,店家列表由远及近排序就会用到位置权限,这里主要考虑位置权限使用场景。2.主体思路,进页面立马弹出微信授权位置弹窗,提示用户授权位置,授权成功则会获取用户地理经纬度坐标,根据经纬度信息请求接口,获取城市名称。如果用户拒绝授权,则拿不到用户位置,展示未知(当然...原创 2019-07-18 15:21:27 · 1011 阅读 · 0 评论 -
小程序保存海报,canvas绘制然后保存到相册,canvas文字换行计算
1.wxml<view class="box-canvas"> <canvas canvas-id='myCanvas' class='myCanvas'></canvas></view><view class='myPage'> <view class='myPage-title'>{{myPageT原创 2018-12-29 17:24:18 · 1019 阅读 · 0 评论 -
小程序自定义头部导航栏(“navigationStyle“: “custom“),自定义tabBar
1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏;2.代码部分2.1首先在app.json的window中配置"navigationStyle": "custom"(使用自定头部导航栏)2.2导航栏组件部分(1)custom-component.wxml<...原创 2018-12-29 17:23:26 · 46573 阅读 · 3 评论 -
form表单,表单提交,formid
1.在使用提交表单时,尽量使用form表单,提交时有event参数,好多参数都可通过event.detail.value(此时,表单的各个元素需要添加name属性,否则这里会打印不到)来获取,比较方便,而且可以减少页面变量的使用,当然了,如果有些不能通过event来获取的话,还是得要用变量来储存的;2.在有些时候可能还要用到formid,在form标签里添加report-submit='tru...原创 2018-12-29 17:23:13 · 8035 阅读 · 0 评论 -
微信小程序跳转微信小程序
1.在有一些公司,可能职能部门分工比较详细,每个部门针对自己的业务做了自己的小程序,但在有些时候需要用到别的部门小程序的,这时就需要在小程序之间做跳转,还好在小程序的更新文档中新增了小程序间跳转的api,以前直接通过api调用跳转即可,但在2018.11.1下午微信公众平台通知需做navigateToMiniProgramAppIdList配置,否则无法提交审核。2.代码部分(1)wxml...原创 2018-11-02 10:26:15 · 1055 阅读 · 1 评论 -
小程序微信授权登录
1.大多数的小程序中,会有账号和密码登录,有些时候为了方便用户快速登录,会给微信授权登录;2.在微信授权登录时,会涉及几种情况:①该用户注册过咱们公司的网站,可以直接登录;②该用户未注册过咱们公司的网站,咱们需要帮助用户注册,注册完成后再登录;(此法需用户授权获取电话号码)③可能在某些老版本(long long ago)中,会没有在微信中绑定电话(由于这种情况很少,这里不做考虑);...原创 2018-10-30 17:26:41 · 639 阅读 · 0 评论 -
微信小程序image图片宽度100%,高度自适应
1.xml(①宽度须设置width:100%;②mode须设置为widthFix)<image src='../images/1.jpg' mode='widthFix' style='width:100%;'></image>2.效果3.建议图片的宽度在750px左右,否则图片上的文字不太容易看清...原创 2018-09-09 10:07:41 · 1385 阅读 · 0 评论 -
小程序scroll-view简单使用,子元素换行在ios中出现子元素不换行问题,没有顶部对齐的问题;去除滚动条样式;子元素文字不换行
1.代码1.1.wxml<!-- 图片,横向scroll-x必须设置为true --><scroll-view class='parentone' scroll-x="{{true}}"> <view class='sonone' style='background-color:red;'></view> <view cla...原创 2018-07-31 11:03:44 · 962 阅读 · 0 评论