微信小程序
文章平均质量分 55
swag_特约男演员
一个小丑啊,一个小丑罢了!
展开
-
排查wx.previewImage真机预览一直loading问题
排查wx.previewImage预览问题原创 2022-12-27 11:54:10 · 1392 阅读 · 0 评论 -
uniapp使用canvas写环形进度条
uniapp使用canvas绘制环形进度条原创 2022-07-21 14:45:42 · 1350 阅读 · 2 评论 -
微信小程序tree下拉复选组件(带源码)
效果鸣谢感谢这位大佬的思路难点如何根据层级缩进,这里是根据indextree组件是自调用(递归)由于组件是递归渲染,导致平级非点击项数据为原始状态,这里把修改的状态放在map结构里。所以需要把collapse状态、checked状态记录在map结构里,每次折叠、点击操作需要根据map结构进行修正。checked:0未选中,1选中,-1有选中但未全选collapse: true折叠,false展开组件是递归调用的,所以不要在递归中频繁的setData最好是return一个值,最后在set原创 2021-11-18 09:34:25 · 5399 阅读 · 18 评论 -
自制微信小程序popover菜单
效果平常我们在刷一些列表是会发现点击按钮会弹出类似菜单,小程序好像没看到有类型组件,所以打算自己实现。实现思路整个列表项要设置成相对布局position relative,popover菜单设置成绝对布局position absolute,正所谓子绝父相popover菜单的小三角是纯css画的,它是popover菜单的before伪类其实after也是一样的需要根据点击处的坐标来设置popover菜单的left,根据x坐标减去一部分的宽度style="left:{{x-(55*0.8)}}p原创 2021-07-02 15:41:25 · 1943 阅读 · 0 评论 -
记微信小程序订阅消息使用及拒绝后引导启用
原文注意订阅消息必需由tap事件触发保持以上选择不在询问,这辈子都不会再弹窗了,需要openSetting去设置页打开。没勾选每次都会弹窗。用户引导很重要。代码// 判断是否授权微信订阅消息 auditSubscriptionsSetting() { let that = this const tmplId = '把这个换成你自己的模板ID就彳亍了' wx.getSetting({ withSubscriptions: true,原创 2021-05-18 18:01:28 · 2372 阅读 · 1 评论 -
微信小程序用户拒绝授权地理位置信息再次调起授权窗口
目的注意chooseLocation() { let that = this wx.chooseLocation({ latitude: '', longitude: '', success(res) { console.log(res) that.setData({ 'query.dz': res.address, 'query.x': r原创 2021-04-21 09:07:06 · 1189 阅读 · 0 评论 -
微信小程序纯css制做跑马灯效果
效果思路太多案例都是js操作了,我真的看不懂,偶然看到有人用css做,但是不太合我心意,我的这个noticeBar两端是有间距的,方便可以放点slot。类似于有赞的效果:利用动画@keyframes实现利用盒子的相对定位、绝对定位。利用子绝父相的道理,用view套住要展示的文字。一开始文字是left:100%到最后left:-150%就是为了能全部文字过一遍。用两个伪类before和after遮住文字,营造出有间距的样子。源码(随便改改都彳亍)<view class="rollC原创 2021-04-13 15:45:19 · 469 阅读 · 0 评论 -
微信小程序最新canvas2d手写签名
canvas2d效果注意canvas2d其实和web的canvas一样,可以参考web的canvas的apicanvas 2d 没有draw() 方法清空笔记可以使用clearRect()方法没有setFillStyle方法,只有fillStyle属性没有setStrokeStyle方法,只有strokeStyle属性没有setGlobalAlpha方法,只要有globalAlpha属性canvas初始化建议要设置宽、高,虽然有默认值但是实际需求不一定是这样源码(mpx框架)原创 2021-03-15 18:09:35 · 1533 阅读 · 4 评论 -
记微信小程序setData动态修改字段名
一般setData都是修改右边的值赋值给左边如:如果我想修改左边的字段名呢?可以用属性选择器,如下这个field要传进data中已经有的值原创 2021-03-11 11:41:21 · 427 阅读 · 0 评论 -
微信小程序自定义多项选择器
需求要多选怎么办?选择器有多列、单项但是就是没有多项,自己动手,丰衣足食!需要达到的效果在引入页面打印确认的值实现思路要有遮罩层,遮罩层和选择器不要嵌套,否则点击选择器可能会触发遮罩层事件。遮罩层是固定布局,布满整个屏幕;选择器是绝对布局,占屏幕的60%。选择器的工具条要固定,工具条下的选项要可以滚动。点击选项要可以选中,再次点击取消。点击工具条的取消,确定;点击遮罩层要有triggerEvent如何判断选项是否已经选中?这里我使用数组selectedArray要选择的选项就把原创 2021-03-04 16:47:54 · 1601 阅读 · 1 评论 -
微信小程序打开文件流
接收后台返回的文件流并打开 // 预览文件 topreFile(url, name) { wx.showLoading({ title: '加载中' }) wx.request({ url: downloadFile, // 请求地址 data: { fileUrl: url, fileName: name }, // 请求参数 method: 'GET', header:原创 2021-02-25 15:04:32 · 1943 阅读 · 3 评论 -
微信小程序搜索关键字高亮和ctrl+f搜索定位实现
原理把需要高亮的字段,分割成数组,用wx:for 在<text>中遍历数组,判断当前的item等不等于keyword等于就高亮。注意事项关键代码这里以item.title字段为例什么时候分割?进入列表页时是没有筛选的状态,当在搜索框输入时就可以进行分割了。就是不管你输入关键字还是删减关键字都要分割并且是关键字有值的时候分割该字段分割成数组了,当关键字改变时怎么办?这就有一个问题了,没输入关键字时,item.title是字符串,遍历字符串进行循环。当你输入关键原创 2021-02-02 09:06:56 · 1607 阅读 · 2 评论 -
微信小程序底部导航栏中间突出
站在前人基础上研究 =>大神原文,我是在此基础上自己改造的。业务需求中间的突出,点击就跳转去别的页面添加知识点微信自定义底部导航栏页面之间跳转是要用wx.switchTab,但是业务需求我不想跳转到tab页我只想wx.navigateTo去别的(没有tabbar的)页面,你可能会说wx.hideTabBar隐藏tabBar啊,但是这样返回页面会有问题。所以可以借助微信路由组件<navigator/>但是如果想要中间的那个可以用wx.navigateTo,在app.json里的原创 2021-01-08 18:03:21 · 4030 阅读 · 0 评论 -
微信小程序子组件向页面传值(父子组件间的通信)带源码
很多同学可能知道怎么在页面调用子组件内部方法,但是组件里的值怎么传到页面中来呢?快使用事件触发!要点:要在组件的随便一个函数里,没错,就是随便,可以是生命周期如attached,也可以是点击函数bindtap,看业务需求,创建一个触发器triggerEvent在页面引用的组件要绑定这个事件,因为你创建了事件触发器,你绑定了这个事件才能触发啊!怎么创建触发器?微信官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/cu原创 2020-12-30 17:26:48 · 766 阅读 · 0 评论 -
记自定义微信小程序顶部导航栏
有需求就要有解决方法如何让自定义导航栏兼容所有机型,一定要拿到statusBarHeight(顶部的状态高度),怎么拿?状态栏的高度:在它的下面才能写我们自定义的导航栏,这样所有机型都适用,不会被挡住。注意在哪个页面自定义顶部导航栏,就要对应的自己再写一个,小胶囊会保留,返回按钮要自己加即wx.navigateBack({delta: 1})就行最好用固定布局fixed不然有可能导航栏会随着页面进行滚动,这样不彳亍用了自定义导航栏的页面,其返回的可用高度windowHeight是不包含原创 2020-12-29 17:33:46 · 383 阅读 · 0 评论 -
记微信小程序分享代码片段
我一直以为是可以直接选中代码创建代码片段就分享的那种,但事实上我错了首先要按照官方文档创建好https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html其次直接把要分享的片段复制到index文件夹下对应把该改的改一下就彳亍了,本质上和项目没区别,点击分享就可以生成链接了...原创 2020-12-21 17:15:30 · 431 阅读 · 2 评论 -
微信小程序判断url的文件格式
有两种思路第一种思路例: http://www.example.com:8888/group1/M00/00/85/rBITVV_Qh2mAdwB0cSE513.jpg1.查找URL最后一个“.”的索引2.截取这个索引后面的所有字符(这里就是后缀名)3.拿到后缀名去匹配判断是否是某某格式// 文件是否为图片 (方法一)var isImg = function (url) { //获取最后一个.的位置 var index = url.lastIndexOf(".") //获取后缀原创 2020-12-10 15:23:26 · 1889 阅读 · 0 评论 -
promise方法的简单使用
es6的promise会简单的使用,知道使用场景就够日常使用了,这里仅仅只是小笔记,记录resolve和reject的使用效果:这里的resolve,reject按字面意思就是成功时走resolve,失败走reject;在resolve,reject添加数据就可以在then回调函数里拿到。需要注意then接受两个函数,第一个是处理resolve的第二个是reject的// promise方法 testPromise() { var _Prom = new Promise(fun原创 2020-12-08 09:57:40 · 150 阅读 · 0 评论 -
微信小程序map点击回到当前位置(不需要用空间,函数就完事)
一定要仔细看微信官方文档,有时得来全不费功夫这不就完事了¿<!-- 定位图标 ,map现在支持同层渲染,可以直接用view,样式用固定定位--> <view class="location flexVertical" catchtap="backLocal"> <van-icon name="aim" size="30" /> </view>核心就两行代码// 回到当前位置 backLocal(e) {原创 2020-12-07 16:24:51 · 1150 阅读 · 2 评论 -
微信小程序地图的应用例子
一、地图打点Marker对着微信官方文档的数据结构敲就完事了,这里分两种一种是原生callout标签一种是自定义callout,两种在微信官方文档里都有// 地图标注点 markers: [ { id: 1, latitude: 22.794295799, longitude: 114.649265899, zIndex: 2, height: 30, width: 20,原创 2020-12-07 14:58:29 · 643 阅读 · 0 评论 -
微信小程序直接获取用户头像、昵称等(无需按钮授权)
直接使用微信提供的组件在页面使用获取用户头像、昵称头像是直接返回图片需要对样式进行修改,其它数据也是直接展示头像圆角需要加这个,否则实现不了原创 2020-12-03 15:44:01 · 5933 阅读 · 0 评论 -
如何在wxml循环遍历的节点中判断当前数值是否在数组中
笔者根据业务需求做了一个折叠面板(手风琴风格,即点击按钮只展示一个)类似于有赞vant-weapp这种。后来我看到有赞的基础风格(即点一个展开一个,点击隐藏只隐藏当前的),但不知道如何实现所以我偷偷看了有赞的源码,了解了它的思想:给每一项增加唯一标识符,新建一个数组用于存放需要展开项的唯一标识符,在节点中判断数组中是否存在当前点击展开的标识符,存在则展开,隐藏则是出栈当前的标识符微信小程序不支持像vue一样的{{ arr.includes(id) }}这种直接调用函数或者过滤器,需要用到微信脚本原创 2020-11-30 18:01:45 · 2484 阅读 · 5 评论 -
微信小程序使用echart插件绘图(实用方便)
本案例在MPX框架下使用,大家可以根据自己的框架去使用首先要在小程序设置中引用插件点击添加插件搜索所需插件即可点击详情即可查看插件的开发文档根据开发文档试试吧在app文件的json中引入<script> import mpx, { createApp } from '@mpxjs/core' import apiProxy from '@mpxjs/api-proxy' mpx.use(apiProxy, { usePromise: true }) // app原创 2020-11-10 15:29:49 · 1367 阅读 · 0 评论 -
(搬运)微信富文本转义
微信富文本转义主要是使用正则表达式进行替换标签贴代码 =>//富文本转义方法 convertHtmlToText: function convertHtmlToText(inputText) { var returnText = '' + inputText returnText = returnText.replace(/<\/div>/gi, '\r\n') returnText = returnText.replace(/<\/l原创 2020-11-10 10:08:35 · 288 阅读 · 0 评论 -
微信小程序使用echarts画饼图、条形图
一、条形图首先我们需要在GitHub,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。解压文件,拿到ec-canvas, 就是我们需要的组件,其他文件是如何使用该组件的示例。把ec-canvas这个文件放到我们项目中去。我们可能多次用到echart画图,因此可以抽出来作为一个组件条形图组件创建组件写好文件结构,json区域引入我们的ec-canvas组件<script type='application/json' lang='json'原创 2020-09-11 11:15:08 · 5709 阅读 · 4 评论