小程序
linda`li
这个作者很懒,什么都没留下…
展开
-
微信小程序中层叠轮播图(仿微信朋友圈swiper样式)
微信小程序中层叠轮播图(仿微信朋友圈swiper样式)原创 2022-06-21 15:46:44 · 1262 阅读 · 2 评论 -
解决微信小程序穿透滚动问题
防止穿透滚动在非内容区域加一个方法catchtouchmove="preventD" ,双引号中是方法名称,可以自定义 具体代码如下wxml<view wx:if="{{showPost}}" class="poster-wrap" catchtouchmove="preventD"> <view class="poster-content-wrap"> <view class="poster-content" catchtouchmove..原创 2021-02-26 16:32:00 · 286 阅读 · 0 评论 -
微信小程序分享事件中使用异步方法
开发背景:电商小程序中,购买完成后将购买的商品分享给好友~我们在分享事件中需要记录分享者的昵称、头像、购买商品等这些信息,由于信息字段过长所以需要长短码转换,这时需要在分享事件中调用接口可以这样子实现~一、生成短码事件 getShortCode() { let rawData = '用户信息字段+分享商品字段' let pathData = { tenantCode: app.globalData.tenantCode, rawData: rawData原创 2021-01-06 14:53:28 · 991 阅读 · 0 评论 -
微信小程序自定义组件中使用behaviors
前言一、behaviors的定义二、behaviors的作用三、behaviors的使用总结前言首先来说说我为什么要使用behaviors一、业务场景 用户授权用户信息,以及手机号,完成注册会员。授权用户信息以及手机号完毕后得到unionid + mobile字段,我们帮其注册成为会员~由于授权用户信息以及授权手机号两者都需要用户主动触发,所以我们在用户授权信息后会有一个弹窗~弹窗中有一个授权手机号的按钮让用户主动触发。...原创 2020-12-01 18:11:52 · 5912 阅读 · 0 评论 -
npm ERR! code ELIFECYCLE
微信小程序使用npm编译的时候报npm ERR! code ELIFECYCLE一开始我直接百度搜索,https://www.jianshu.com/p/db2ac92842d5原文的解决方案是Step1:npm cache clean --forceStep2:rm -rf node_modulesStep3:rm -rf package-lock.jsonStep4:npm installnpm install 成功之后再次启动 npm start但是一开始是好的,后面编译的时候又报原创 2020-11-24 18:21:26 · 326 阅读 · 0 评论 -
微信小程序中使用npm引入vant weapp
一.思路1.在小程序根目录内,初始化npm2.在小程序中执行命令安装 npm 包3.在微信开发者工具中的菜单栏:工具 --> 构建 npm4.在微信开发者工具中的菜单栏:工具 --> 项目详情, 勾选“使用 npm 模块”选项:5.使用组件库6.使用其他npm 包方法二.具体步骤1.新建一个小程序2.在小程序根目录内,初始化npm,初始化后的文件会多一个package.json3.在小程序中执行命令安装 npm 包 (这边安装的是vant)..原创 2020-11-18 16:57:43 · 470 阅读 · 2 评论 -
微信小程序从服务器端接收图片乱码的解决方案
1.调用后端给我的下载图片的接口,获得二进制流文件2.在网上寻找解决方案的时候,得知那串乱码是arrayBuffer,所以我在发送请求的时候把默认/** * 生成二维码 */ createQr:function(){ return new Promise((resolve, reject) => { let qrData = { width:225, content:this.data.actDetail.mtitle原创 2020-11-04 18:28:29 · 2713 阅读 · 0 评论 -
微信小程序setData大小上限的问题
微信小程序中当setdata超过其大小时,会以上报错,查阅了一下文档,现在更新的这版没有看到setdata有限制其大小,但之前微信开发者文档中有明确标注大小不能超过1024KB~所以在分类列表页面其实要注意的是渲染列表的商品尽量使用二维数组而不是一维数组常规写法:一维数组data:{ // 数据源 list:[]},getListData:function(){ // 本次加载的数据 let _list = []; ... setData({ // ..原创 2020-10-26 15:36:35 · 2441 阅读 · 2 评论 -
微信小程序获取response header中的字段以及在request header中传值给后台
1.微信小程序中获取request header的方法如下:const requestTask = wx.request({ url: rootDocment + $api.home.porList, data: {}, method:'get', header: { 'Content-Type':'application/x-www-form-urlencoded', Authorization: token }, success(res) { c.原创 2020-09-30 13:57:04 · 5089 阅读 · 0 评论 -
微信小程序 分享的图片使用canvas生成
首先来看一下整体的一个效果就是下图这样子的一.整理一下思路1.首先要生成一个canvas画布2.由于onShareAppMessage 不能是异步的哦,promise什么的,就当没有过一样。。所以我们在onload或者是onshow中调用,我主要是在获取PDP详细信息的接口中的complete方法去调用生成画布的方法3.在onShareAppMessage的return对象中把上述生成的路径直接赋值给imageUrl4.需要注意的是开发者工具中的图片会裂掉,所以最好在手机中查看(这也原创 2020-08-24 22:16:21 · 1896 阅读 · 1 评论 -
微信小程序setData复杂数组的更新、删除、添加、拼接
众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染。在此分享小程序里复杂数组的更新、删除、添加、拼接初始数据数组嵌套对象data: { cartList: [{ id: 1, goods: {id: 1, name: 'wechat'}, checked: true }, { id: 2, goods: {}, checked: false }, { id: 3, goods: {}, checked: true }] },索引部分删除l.转载 2020-07-30 10:37:37 · 5450 阅读 · 0 评论 -
小程序图片转Base64,方法总结
转载自:https://blog.csdn.net/qq_36875339/article/details/81086205?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.转载 2020-06-19 11:13:50 · 706 阅读 · 0 评论 -
小程序实现sku商品规格
实现商品颜色和尺码反选的大致思路:1.一开始显示的默认价格是后台传递的。2.调用商品详情接口的时候需要传递SKU数组(存放有颜色和尺码的数组集合),sizeVOList数组(存放商品所有的尺码集合),skcVOList(存放商品所有的颜色集合)。3.用户点击颜色,将尺码中的status状态首先设置为false,这步操作是为什么后面显示是否有货。尺码一致~具体代码 /** * 点击尺寸 颜色改变样式 */ changeSize: function (e) {...原创 2020-06-02 16:42:37 · 3347 阅读 · 1 评论 -
如何是实现微信会员开卡组件中一个手机号绑定一个微信号(思路篇)
微信原生开卡组件可以支持一个手机号绑定多个微信号,这个会导致比如说优惠券等等可以享受两次,现在我们需要实现的功能是一个手机号只支持绑定一个微信号。这就要说说微信现在支持的两种开卡方式!...原创 2020-05-28 18:41:36 · 742 阅读 · 0 评论 -
小程序动态获取组件高度(自定义Tabbar的高度)
1.tabbar组件ready方法中 ready() { // 缓存tabber栏的高度 const query = wx.createSelectorQuery().in(this) query.select('.tabbar').boundingClientRect((rect) => { // console.log(rect.height) wx.setStorageSync('tabbberHeight', rect.height) }).exec()原创 2020-05-22 20:00:57 · 3243 阅读 · 0 评论 -
微信小程序实现安卓机下拉不刷新,ios下拉刷新操作(自定义底部tab栏在安卓机下拉)
由于自定义底部tab栏在安卓机下拉时会跟随下滑,所以针对这种情况,就产生了一种解决方案,购物袋页面在安卓机下拉时不刷新,ios下拉时刷新。思路:1.不用小程序的下拉刷新~真正用的是onPageScroll,基于ios可以下滑时有一个滚动的效果但是安卓机没有这个特点实现的代码:1.json 禁止下拉属性{ "usingComponents": { }, "navi...原创 2020-04-30 17:39:42 · 994 阅读 · 0 评论 -
实现微信小程序底部tab栏自定义开发-封装tabBar组件
小程序中因为购物带需要小圆点或者是加购件数的需求,需要自定义开发来满足。一.首先自定义一个组件tabbar1.tabbar的wxml<view class='tabbar' wx:if="{{activeIdx!=0||!landingPage}}" style='padding-bottom:{{tabBarHeight}}rpx'> <view wx:if...原创 2020-02-25 10:56:10 · 2617 阅读 · 0 评论 -
微信小程序端:Failed to load local font resource /DIN-RegularItalic.eot-do-not-use-local-path-./app.wxss&22
提示:Failed to load local font resource /DIN-RegularItalic.eot-do-not-use-local-path-./app.wxss&229&9net::ERR_CACHE_MISS报错图:前提:字体文件引入路径正确Bug测试:仿照错误代码结构添加子结构view出现报错。使...转载 2020-02-11 17:55:26 · 7214 阅读 · 0 评论 -
腾讯移动分析 mta 接入微信小程序
主要步骤有1.下载对应的SDK ,网址:https://mta.qq.com/mta/ctr_index/download 2.在产品与服务添加应用 3.创建应用完成以后再应用管理页面得到对应小程序的配置代码4.将配置代码放入小程序app.js的onlaunch中5.创建自定义事件,得到事件的ID和key6.在小程序中事件中...原创 2020-01-17 15:36:59 · 1363 阅读 · 0 评论 -
微信小程序中子组件中无法获取到外部样式
在使用组件的时候会发现自定义组件中无法获取外部样式。在组件中Component中添加options: {addGlobalClass: true,},原创 2020-01-14 17:21:23 · 705 阅读 · 0 评论 -
微信小程序中长按保存图片(https/本地)的三种方式
微信小程序长按二维码的方式方法一,图片放在云上或者是https开头的 //保存图片 savePic:function(e){ let that = this; let src = e.currentTarget.dataset.src; wx.showModal({ title: '提示', content: '确定保存二维码?', ...原创 2019-12-02 10:07:21 · 6827 阅读 · 0 评论 -
微信小程序长摁2保存二维码的两种方式
直接上代码 //保存图片 savePic:function(e){ let that = this; let src = e.currentTarget.dataset.src; wx.showModal({ title: '提示', content: '确定保存二维码?', success(res){ if ...原创 2019-11-29 17:22:05 · 3984 阅读 · 0 评论 -
微信小程序报current无效,请修改current值
bug复现方式:商品详情中有多个颜色,点击颜色实现切换swiper中的主图。swiper中未设置current值。当点击栗色滑动第五张在切换到第四章,点击黑色发现小程序中会报current无效,请修改current值,并且主图显示为空白。解决方法:在swiper中设置current为一个变量,默认初始值为0,在点击切换颜色中的切换主图方法中设置current为0即可解决。具体代码如下:...原创 2019-10-31 16:25:52 · 10465 阅读 · 1 评论 -
"navigationBarTitleText": "Demo"设置以后不起作用
小程序中页面的标题设置以后不起作用可以从两方面去查找1.是否在app.json中将页面的地址引入例:order中页面设置标题下面是order的路径,但是我在app.json中有设置2.设置标题部分代码有问题原因是我多套用一个window的属性...原创 2019-06-20 18:58:49 · 3651 阅读 · 0 评论 -
微信小程序组件 component 中自执行一个函数的处理
情景描述:开发了一个微信小程序的页面A, 然后在页面A 中引入一个组件 B,现在想在组件 B 加载进来的时候执行一个请求,获取数据进行B组件的渲染;如何去写这个请求?解决方案1: 使用组件的生命周期你可能指导小程序的生命周期,但是组件自己也是有生命周期函数的,上面的请求我们可以写在组件的生命周期函数attached()中;解决方案2:使用参数传递...转载 2019-06-20 18:46:18 · 6445 阅读 · 0 评论 -
微信小程序开发----Picker中range属性及其他的理解
转载自https://www.cnblogs.com/shimily/articles/10702011.html微信小程序开发文档中针对picker做了详细的解释,但根据笔者的使用,发现了一个好玩的地方。先针对picker普通选择器:mode = selector这个模式说下属性吧上图是微信小程序官方文档的说明,以下是我的自己理解:range属性,类型为array或者...转载 2019-06-14 10:21:54 · 937 阅读 · 0 评论 -
Component "xxx" does not have a method "xxx" to handle event "xxx"
父页面中的方法我这边是checkNum从methods中移除,放的位置是和data平级。这样子就可以找到啦原创 2019-06-06 11:55:43 · 31865 阅读 · 0 评论 -
小程序子组件传值给父组件
父组件页面是carts.wxml 子页面是product.html子组件wxml代码<view class='cartAllSel' bindtap="bindSelectAll" > <icon wx:if="{{selectedAllStatus}}" class='iconDel' type='success' color='#4D4D4D' size...原创 2019-06-06 11:52:16 · 10336 阅读 · 1 评论 -
关于微信小程序控制多次提交的方法
第一种 直接使用微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.htmlwx.showLoading({ title: '加载中',})具体代码可以这样子实现:用户点击按钮后出发comit方法一开始是就直接调用showloading在接口...原创 2019-07-03 20:07:24 · 3587 阅读 · 0 评论 -
视频自定义组件,划出可视区域时停止播放
微信小程序视屏划出可视区域时禁止播放:wxml页面: 主要是在video标签中设置id需要唯一<video wx:if="{{show}}" id='video{{attr.moduleId}}' object-fit="cover" poster="{{attr.attributeJson.screenShotUrl}}" bindended='end1' autoplay...原创 2019-07-26 15:42:57 · 1470 阅读 · 0 评论 -
微信小程序视频组件ios端出现视屏区域黑屏
微信小程序中自定义组件video在ios端会出现从展示页面切到另一个页面上再回到展示页面时会黑屏的情况。解决思路:在app.js中获取手机类型并定义isApple的全局变量 -> 在video的组件中使用show和hidden生命周期,在页面出现的时候重新加载一次解决。app.js页面App({ onLaunch: function () { loginReq...原创 2019-07-26 17:24:59 · 4393 阅读 · 0 评论 -
小程序 onReachBottom 事件快速滑动时不触发的bug
最近做小程序商城列表分类页的时候发现onReachBottom 事件不触发 ,ios端一直显示正在加载,安卓端则没有事情。但是往上拉一点 又向下滑页面中的商品展示出来。很困惑为什么会又这种情况。一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话,会导致一直没有加载出来新内容。原因...转载 2019-08-02 11:02:26 · 3353 阅读 · 0 评论 -
小程序组件引用app.wxss会出现两遍class样式
在写微信小程序的时候遇到一个这样子的问题,组件中样式会重复两遍很奇怪,然后百度了一下没有相关的文档,于是就找主管问了一下。原因是因为在组件中我要引用app.wxss的样式所以在组件的js中option选项加了最后就是如果不想要这样子的效果其实可以注释,直接在组件的wxss中引用也是可以的有关于组件样式也可以参考微信的https://developers.weixin....原创 2019-09-03 15:37:06 · 2751 阅读 · 0 评论 -
微信小程序引用外部字体
https://blog.csdn.net/qq_24985715/article/details/808577331、找到字体包ttf、eot、svg、woff随便一种格式文件;文件转换网站:字体文件转换网站2、上传2中的字体文件(最好是ttf文件)到https://transfonter.org/,选择base64 编吗 ,convert后下载.3、跟components同级,新建...转载 2019-09-25 15:49:29 · 3120 阅读 · 3 评论 -
微信小程序fixed定位后scroll-view滚动失效问题
如图微信小程序中 scroll-view组件外div加display:flxed或者是absolute后, scroll-view组件滚动失效。解决办法: scroll-view宽度为屏幕宽度, 子元素view.cont设置overflow:auto;内容超出屏幕会出滚动条,然后便可以拖动了, 最外层header设置overflow-y: hidden;隐藏滚动条,实...转载 2019-10-10 17:07:55 · 3514 阅读 · 2 评论 -
小程序父传子组件传值
index.wxml是父组件 banner.wxml是子组件。现在将banner图从index.wxml传入到banner.wxml。一、父组件index.wxml1、父组件在引用组件中定义属性 bannerList是子组件在property中定义一致的属性名称。{{bannerLists}}是在index.js data中定义的名称 这两个需要名称的一一对应。<view ...原创 2019-05-30 11:26:01 · 3031 阅读 · 0 评论