微信小程序
想要成仙的菜鸟前端
这个作者很懒,什么都没留下…
展开
-
小程序监听页面的返回按钮方法
不论是微信小程序还是支付宝小程序中都没有这个生命周期函数,但是老板要求实现这个方法:只好百度,想办法解决问题。具体用户的操作流程是:从第一个页面出发,走到第二个页面,然后又返回第一个页面。以下是我具体实现的代码:在第二个页面的 onShow(){}中:设置一个值,用来记录用户已经走到这个页面了。 onShow: function () { my.setStorageSync({ ...原创 2019-12-25 14:09:16 · 6386 阅读 · 2 评论 -
支付宝小程序之间互相跳转实现
业务需要,需要和另外一个小程序合作,扩展公司业务。 my.navigateToMiniProgram({ appId: '要跳转的小程序appId', path: "pages/index/index", extraData: { "channel": "来源标识", "retcode": "业务推广码" },...原创 2019-12-25 11:35:54 · 6252 阅读 · 1 评论 -
微信小程序与支付宝小程序使用模板消息步骤与踩坑
因领导需要,想使用模板消息,增加用户体验,如果用户没有完成订单的时候,系统后台人员给用户发送模板消息,提醒用户进行下一步的继续订单。后台接口配置好之后,要求的是,只能在用户付过款之后,才能给用户进行推送。先说微信上前端的具体实现:看了文档,推送消息,需要经过用户授权,并且只有在用户点击和付款成功的时候,才能调起授权信息窗口,不可以在小程序onLoad中调起。所以我只能在首页的按钮上添加如下的...原创 2019-12-25 11:17:37 · 2051 阅读 · 5 评论 -
小程序代码封装
平常的一次性开发好弄,但是当维护起来代码的时候,每次反复的修改就会觉得效率低了。因为做的不仅仅只有微信小程序,还有支付宝小程序,百度,头条小程序。都知道每一个小程序的语法都不太一样,每次修改一次都要全部修改,实在是心累。为了提升自己的开发效率,自己简单的封装代码是必不可少的!一般都是在自己项目的根目录下,自带一个util文件夹,在这个文件夹下有一个util.js文件,这个文件里面一般都是放一些公...原创 2019-12-05 12:02:58 · 1325 阅读 · 0 评论 -
小程序日常开发经验总结
label组件label 用来改进表单控件的可用性 例如里面嵌套 radio 点击整个label 的时候都能选中 radio 控件垂直居中一个图片{display:table-cell;text-align:center;vertical-align:middle;}垂直居中一个元素最原始的。宽高写死。line-height 等于元素的高速绝对定位 宽高写死flex ...原创 2019-12-04 18:07:03 · 272 阅读 · 0 评论 -
解决 wx:if 引起的 先显示后隐藏的问题(内容闪烁问题)
解决方案:先用一个变量让其隐藏,当从接口中获得数据的时候,在把这个 show 设置成 true 。这样出来的效果就是,内容逐渐在显示,依次显示。从而看不到闪烁再隐藏。<view class='box' bindtap="previewImage" wx:if="{{show && !orderInfo.deposit}}"></view> data:...原创 2019-12-04 17:19:34 · 983 阅读 · 0 评论 -
小程序wx.showToast()与wx.hideLoading()冲突的问题
使用wx.hideLoading()之后,如果再想要弹框提示,会发现在模拟器中可以显示,但是在真机测试中就是不显示。总结发现是因为wx.showToast()与wx.hideLoading()冲突。只要同一级上wx.showModal()前面使用了 wx.showLoading() 弹框就不会显示了。wx.showLoading 和 wx.showToast 同时只能显示一个wx.showL...原创 2019-12-04 17:01:28 · 8393 阅读 · 4 评论 -
微信小程序实现 给每一个元素对象item做动画,并且相互之间不影响实现
如图所示,实现点击切换展开与闭合。小三角加上旋转的动画,并且item之间互相不影响<view class='i-bottom' bindtap='showDetail' data-id="{{index}}" > <view>点击查看办理详情</view> <view class="arrow" animation="{{anima...原创 2019-11-12 16:31:48 · 1119 阅读 · 0 评论 -
解决 wx:if 引起的 先显示后隐藏的问题(内容闪烁问题)
解决方案:先用一个变量让其隐藏,当从接口中获得数据的时候,在把这个 show 设置成 true 。这样出来的效果就是,内容逐渐在显示,依次显示。从而看不到闪烁再隐藏。代码如下:<view class='box' bindtap="previewImage" wx:if="{{show && !orderInfo.deposit}}">data: { s...原创 2019-11-09 15:35:33 · 1444 阅读 · 0 评论 -
点击获取验证码按钮 动画
sendSms() { const that = this if (that.data.btnFlag) { that.setData({ btnFlag: false // 默认是蓝色,用户点击获取验证码按钮的时候,按钮变成灰色 }) } else { return // 设置节流阀,防止用户一直点击。 }...原创 2019-11-05 17:25:19 · 332 阅读 · 0 评论 -
微信小程序开发结束整理笔记
车辆发动机号码正则匹配var r = /^[0-9A-Za-z\-\-\u4e00-\u9fa5]{1,20}$/;;银行卡正则匹配isValidBankCardNumber(cardNumber) { let r = /^[0-9]{16,21}$/; return r.test(trimAll(cardNumber)); }验证车牌号 正则匹配 isVal...原创 2019-11-05 17:15:31 · 315 阅读 · 0 评论 -
去掉控制台中的 当前文件将会被索引的警告
project.config.json 文件中,setting 对象中设置 "checkSiteMap":false 就能去掉讨厌的警告消息 "setting": { "urlCheck": false, "es6": true, "postcss": true, "minified": true, "newFeature": true, "nodeModules": ...原创 2019-11-05 16:09:47 · 258 阅读 · 0 评论 -
微信小程序checkbox 自定义样式 css代码
/* checkbox *//* 未选中的 背景样式 */checkbox .wx-checkbox-input { border-radius: 6rpx; /* 圆角 */ width: 46rpx; /* 背景的宽 */ height: 46rpx; /* 背景的高 */}/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */checkbo...原创 2019-11-05 16:04:27 · 1080 阅读 · 0 评论 -
微信小程序中使用第三方ui框架方法
安装步骤安装前确定电脑上安装了node。 (没有设置探宝镜像的先设置淘宝镜像,安装速度更快)设置淘宝镜像:npm config set registry https://registry.npm.taobao.org --global新建一个微信小程序项目 (在项目的根目录下打开 powerShell)npm initnpm install --productionnpm i...原创 2019-10-09 10:23:17 · 1751 阅读 · 0 评论 -
购物车动画实现
先看一下实现的效果图:微信的 .wxml文件: <view class="container"> <swiper indicator-dots> <block wx:for="{{goods.image}}" wx:key="{{index}}"> <swiper-item> <i...原创 2019-09-18 10:18:06 · 298 阅读 · 0 评论 -
在微信小程序中使用第三方ui组件
vant-weapp安装步骤安装前确定电脑上安装了 node。 (没有设置淘宝镜像的先设置淘宝镜像,安装速度更快)设置淘宝镜像:npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global新建一个...原创 2019-09-13 14:36:36 · 1244 阅读 · 0 评论 -
微信小程序项目开始之前的准备环境(建议)
框架环境准备:wepywepy 项目准备1,设置npm镜像,加速下载包的速度npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global2,全局安装wepy-clinpm install wepy-cl...原创 2019-08-11 00:45:41 · 111 阅读 · 0 评论 -
微信小程序入门(一)
公众号订阅号服务号(可以进行支付,订阅号类似报纸,不能支付)小程序 一种新的开放能力,类似于手机APP的使用体验企业微信(企业的专业办公管理工具,用于企业员工内部通讯,打卡,审批等)app:基于手机操作系统提供的API进行开发小程序:基于微信提供的API进行开发组件是视图层的基本组成单元,自带一些功能与微信风格一致的样式一个组件通常包括 开始标签 和结束标签,属性 用来修饰这...原创 2019-08-11 00:42:06 · 2214 阅读 · 0 评论