小程序
棠樾
夫君子之行,静以修身,俭以养德。非淡泊无以明志,非宁静无以致远。
展开
-
腾讯地图和百度地图经纬度的相互转换
在小程序中经常会有地图的需求,获取导航的时候,腾讯地图返回的经纬度和百度地图返回的经纬度会有偏差,这时候需要转换下。/** * 返回两个经纬度之间的距离 * @param {string} lat1 起点纬度 * @param {string} lng1 起点经度 * @param {string} lat2 终点纬度 * @param {string} lng2 终点经度 * @return {string} 返回两个经纬度之间的距离 .原创 2022-03-28 17:26:00 · 3462 阅读 · 0 评论 -
微信小程序,点击右上角返回箭头,返回指定页面
使用页面生命周期onUnload(),并且使用reLaunch(关闭所有页面,打开到应用内的某个页面) onUnload() { uni.reLaunch({ url: "pages/index/index", }); },原创 2022-03-13 14:32:33 · 2495 阅读 · 0 评论 -
uni-app的uni.navigateBack返回页面带参数
需求:要求B页面返回A页面同时传递参数,使用uni.navigateBack()A页面的数据也不会丢失。let pages = getCurrentPages(); //获取所有页面栈实例列表let nowPage = pages[ pages.length - 1]; //当前页页面实例let prevPage = pages[ pages.length - 2 ]; //上一页页面实例prevPage.$vm.couponOverTime = true; // couponOverTi...原创 2022-03-08 09:23:55 · 739 阅读 · 0 评论 -
微信小程序判断页面滚动方向,并控制吸顶内容的展示和隐藏
需求:优惠券固定在顶部,当手指向上滑动的时候,优惠券隐藏。点击隐藏按钮,优惠券展示。当手指向下滑动的时候优惠券展示。首先判断页面滑动的方向: onPageScroll: (function () { let scrollTime = null; return function (e) { // 监听页面的滚动开始和结束 clearTimeout(scrollTime); this.原创 2022-03-04 18:32:34 · 913 阅读 · 0 评论 -
微信小程序canvas层级太高导致覆盖掉弹窗等组件的问题
问题:在微信小程序中,当使用canvas生成二维码的时候,二维码图层在最上面,会挡住弹框的内容。解决方法就是:在生成二维码的同时,生成本地图片链接,当弹框出现的时候用本地图片替换canvas。这样就完美解决了canvas图层最高的问题。 // 生成二维码 generateQrCode(params) { const query = uni.createSelectorQuery().in(this); query.原创 2022-03-04 17:46:46 · 4406 阅读 · 1 评论 -
【无标题】微信小程序获取 元素节点的高度(节点信息)
获取元素的高度,并根据高度做一些操作。使用this.$nextTick()的原因:当页面的数据还没有渲染完成的时候,获取的元素是undefined,所以要等所有的节点都渲染完成之后,才能操作。 this.$nextTick(() => { const query = uni.createSelectorQuery().in(this); query .select("原创 2022-02-24 11:39:05 · 1275 阅读 · 0 评论 -
ios 上时间出现 NaN-NaN-NaN的问题
问题:小程序中展示后台返回的时间,在安卓和微信开发者工具中能正常显示,但是在ios上就展示为NaN。原因:ios系统不支持2022-01-27这种以“-”横杠链接的格式,ios只支持2022/01/27这种以“/”斜杠链接的格式。解决方法:将从后台获取的时间中的“-”转换成“/”,然后再进行操作。// time是后台获取的时间 格式:2022-01-27// 将-转换成/ 再进行操作time.replace(/-/g, "/")...原创 2022-01-27 09:31:38 · 2974 阅读 · 0 评论 -
微信小程序如何生成某个页面短链
需求:用户会在微信以外的地方点击,链接直接进入小程序的某个页面。现在有一个手机品牌服务小程序,有两大品牌的区分,需求是点击某个短链可以准确进入该品牌的具体页面。实现:通过生成短链的接口,添加query参数来区分是哪个品牌的短链。生成短链的接口需要后台根据微信开放文档修饰一下:参数:就是根据微信 开放文档来配置就可以了这的参数env_version要注意一下,这个仅在微信外打开有效。完整代码: urllink() { let param.原创 2022-01-11 18:30:42 · 8118 阅读 · 0 评论 -
小程序 onPageScroll监听滚动结束
需求:当用户滑动页面的时候切换品牌的页签缩退,当用户停止滑动的时候页签展示完全HTML代码:<!-- OnePlus/OPPO的切换 --> <view v-if="currentBrand === 'onePlus'" class="oppo-arrow" :class="scrollIng ? 'hide' : ''" @click="changeBrand('原创 2021-12-21 17:11:35 · 2804 阅读 · 1 评论 -
微信小程序‘长按’事件触发‘点击’事件的解决方法
问题:对于同一控件同时设置@tap和@longpress,会发现长按时先出现@longpress的事件,然后触发点击事件tap。通过测试,我们发现,小程序中事件执行的顺序是点击:touchstart → touchend → tap长按 touchstart → longpress→ touchend → tap解决方法一: <view v-else class="posterImg" @to.原创 2021-11-01 11:54:18 · 5117 阅读 · 0 评论 -
问题:canvas2d,ctx.fillStyle is not a function;at SelectorQuery callback function ......
问题描述:ctx.fillStyle is not a function;at SelectorQuery callback functionTypeError: ctx.fillStyle is not a function现在改用 Canvas 2D的,带来的问题之前的写法是: ctx.setFillStyle('red')现在的写法是:ctx.fillStyle = 'red'注意:如果这么写是会报错的ctx.fillStyle('red')...原创 2021-10-20 14:52:21 · 2012 阅读 · 0 评论 -
记录一个bug:小程序首页反复登录
描述一下问题:开发的OPPO客服小程序,当时外链,扫码,搜索等方式进入时会反复执行微信的登录,打断点发现在,执行栈中断点总是回到login方法中,但是无法定位是什么原因断点总是回到login方法中,所以采用的方法是如果login 方法没有执行完就不再次进入执行login方法。 let logining = false; // 静默登录 login: function () { if (logining) return原创 2021-10-20 14:31:43 · 1425 阅读 · 0 评论 -
微信小程序,使用canvas画图生成海报并保存手机相册
需求:需要根据背景图片和用户的微信的头像和昵称,生成一张海报图,并保存到手机相册。首先在画布上绘制海报背景图片,然后再绘制头像、昵称和挑战成功的信息。代码如下: // 保存图片分享朋友圈 // 思路就是,给canvas先绘制图片然后绘制其他信息,然后将canvas生成图片保存到手机相册 share() { let _this = this; uni.getImageInfo({ .原创 2021-10-16 10:50:37 · 2847 阅读 · 0 评论 -
微信小程序scroll-view实现左右联动
需求:项目中做了一个选择城市的需求,要求全国所有的省市区都按照中文首字母分类并排序,左侧的城市列表和右侧的字母列表实现双向联动。第一步:根据腾讯提供的javascript SDK提供的接口,获取所有的省市区,并将省市区按照首字母进行分类排序。 let _this = this; _this.mapCtx = wx.createMapContext("myMap"); // 实例化API核心类 qqmapsdk = new QQMap原创 2021-09-22 17:52:42 · 855 阅读 · 0 评论 -
uni.navigateBack()返回时传递参数
需求:当点击A页面按钮返回的时候,需要把一些参数传递给上一个页面(B页面)一般可以用两种方法:1.使用A页面原有的方法// B页面传递:let pages = getCurrentPages();let prevPage = pages[pages.length - 2]; //上一个页面let object={ name:"我们都有一个家,名字叫中国", age:"上下五千年",}prevPage.onShow(object);uni.navigateBack原创 2021-09-22 11:44:31 · 4026 阅读 · 1 评论 -
小程序中打开外部链接的方法
需求:点击文字按钮,打开外部隐私政策页面。 // html <view class="terms-name"> <span>我已阅读并同意</span> <span class="font-line" @click="termsDetail">{{ termsName }}</span> <span>条款</span原创 2021-09-22 10:22:47 · 2955 阅读 · 0 评论