微信小程序
微信小程序开发相关
怎奈你何
这个作者很懒,什么都没留下…
展开
-
微信小程序生成带参数的二维码以及小程序码
微信小程序生成带参数的二维码以及小程序码转载 2022-10-12 23:50:13 · 4123 阅读 · 0 评论 -
微信小程序分享朋友圈生成海报
微信小程序实现分享到朋友圈分享朋友圈现在大家的通用做法就是通过Canvas生成一张图片后进行保存,然后自行转发朋友圈。转载 2022-10-12 23:45:14 · 1931 阅读 · 0 评论 -
微信小程序————经纬度转化为具体位置(逆地址解析)
现在先注册腾讯地图,获取keyhttps://lbs.qq.com/dev/console/key/manage下载SDKhttps://lbs.qq.com/qqmap_wx_jssdk/index.html下载解压后,文件放到小程序文件夹里就可以了。然后上代码:这里运用了js的异步回调,先获取经纬度,然后传入SDK接口进行逆地址解析// pages/test2/test2.jsvar QQMap = require('../../qqmap-wx-jssdk1.0/..转载 2021-12-25 16:39:24 · 1614 阅读 · 0 评论 -
微信小程序跳转到其他网页(外部链接)公众号等的实现方法
个人类型和海外类型的小程序不支持 web-view 标签 也就是说个人申请的小程序,就别想跳转了!!!!1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开)3.wxml1. index.wxml (按钮页面)<view class='wrapper'> <button class='wepay' bindtap='goBaidu'>点击跳转</button> ...转载 2021-05-22 17:47:46 · 19995 阅读 · 4 评论 -
微信小程序页面跳转后清除定时器
笔记前言:因为做项目,有些数据是实时的,所以要用定时器定时调用接口请求。最开始我加上定时请求,然后跳转的时候,接口请求还是一直执行。但是我想要的是页面跳转后,就清除定时器了。期间有一些小问题的出现,不过不难! 个人做个笔记哈! 不多说,放代码!代码data: { timer:null }<!--要时时刷新请求的接口,记得要放在onshow里面,放在onLoad里面的话,跳转到别的界面的时候,还是会一直请求。--> onShow: function () {转载 2021-04-08 18:34:15 · 854 阅读 · 0 评论 -
微信小程序退出页面时清除定时器
由于小程序页面退出时,定时器和长连接等不会自动清除断开,所以需要我们在生命周期函数中手动清除但是定时器定义在函数中,我们无法在函数外清除,所以为了解决这个问题,我们需要把定时器定义在data中比如:Loadingtime是一个定时器,在data中定义Loadingtime:''。然后在time方法中使用在onUnload监听页面卸载生命周期函数中清除如此在退出该页面时,就可以清除该定时器了...转载 2021-04-06 16:39:41 · 2584 阅读 · 0 评论 -
微信小程序里页面滚动到底部
小程序页面要滚动到页面的底部,可以写上以下这句:wx.pageScrollTo({scrollTop:1000})在需要触发的地方写上这句,就会滚动到页面的底部了。原创 2021-03-29 17:55:04 · 872 阅读 · 0 评论 -
微信小程序开发打开另一个小程序的实现方法
微信小程序打开另一个小程序,有两种方法:1.超链接;2.点击按钮。全局配置:跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下:App.json{ ... "navigateToMiniProgramAppIdList": [ "wxe5f52902cf4de896" ]}否则会弹出以下错误提示:超链接实现跳转到小程序:demo.wxml<navigator target="miniProgram" open-type转载 2021-03-28 15:01:57 · 4106 阅读 · 0 评论 -
微信小程序 input框进行双向绑定
在微信小程序的规则中,input标签中的数据为单向绑定,无法像Vue框架中的v-model直接进行input的双向绑定。下面有一种思路来解决双向绑定这个思路。1、利用bindinput记录下input框中每次输入的值。wxml代码:<input type="text" value="{{searchCode}}" confirm-type="search" bindconfirm="getSearchResult" bindblur="getSearchValue" bindinpu转载 2021-03-09 18:17:23 · 2750 阅读 · 3 评论 -
微信小程序wxParse循环输出多个HTML富文本(标签)
进来看的我你相信都会用wxParse插件了的啊,不会的自动自觉百度学去如下图,这是我要实现的效果,每一行都是一个HTML富文本。经过一番百度我找到了官方给的列子:wxParse多数据循环使用方法但是我发现输出的结果是介个样子的,这让我很懊恼于是进过一番尝试我发现可以用index解决,有两重循环,其实都是循环同一个数组,我给两for循环添加了一个for-index分别为idx和idx1,输出时我让它两相等才通过,这样就可以解决这个问题了<block wx:for="{{i.转载 2021-02-22 17:08:21 · 380 阅读 · 0 评论 -
微信小程序 欢迎界面开发的实例详解
市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮wxml如下: <swiper indicator-dots="true"> <blo转载 2021-02-18 17:14:54 · 1396 阅读 · 0 评论 -
微信小程序之scroll-view-导航栏左右滑动
wxml如下:<scroll-view class='scrollView' scroll-x='true'><view class='cc'><view class='vvv' wx:for='{{20}}'>225</view></view></scroll-view>wxss如下:.cc {/* 关键 white-space: nowrap; */white-space: nowra...转载 2021-02-04 19:29:12 · 1530 阅读 · 0 评论 -
【微信小程序】小程序之自定义头部导航栏背景图
一般的导航栏都是微信自定义生成的,但是有的项目项目当中感觉头部样式太过单调,不怎么好看。就设计了不要小程序头部标题栏的页面,为此找了好多方法都没有解决。最终还是让我给找到了一个解决的方法。就是在json文件当中设置一个属性“navigationStyle”:“custom”就可以只保留右上角的胶囊,完美解决这个问题了。亲测有效,简单方便。转自:https://blog.csdn.net/qq_37949737/article/details/89919230...转载 2021-02-04 19:23:01 · 2440 阅读 · 0 评论 -
微信小程序-显示loading的几种方式:showToast 和 showLoading
1、组件形式<loading hidden="{{hidden}}"> 加载中...</loading>2、动态形式showToast 和 showLoadingwx.showToast()// 设置加载模态框wx.showToast({title: '加载中', icon: 'loading', duration: 10000});wx.hideToast();// 使用案例wx.showToast({title: '加载中',转载 2021-01-30 11:29:38 · 2349 阅读 · 0 评论 -
移动端、微信小程序页面布局参考
转自:阮一峰的网络日志自己手写移动端页面的时候,可参考大佬的这两篇文章。看完之后对页面布局非常有帮助。文章如下:Flex 布局教程:语法篇 网址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlex 布局教程:实例篇 网址:http://www.ruanyifeng.com/blog/2015/07/flex-examples.html...原创 2021-01-30 11:19:42 · 384 阅读 · 0 评论 -
微信小程序调用摄像头扫描识别二维码和条形码
今天在整一个有关于快递的小程序,快递单号一般比较长,手动录入会很麻烦。然后就找了一下,其实微信小程序 API 中自带一个扫码识别的功能。wx.scanCode(Object object)调起客户端扫码界面进行扫码。示例代码:// 允许从相机和相册扫码wx.scanCode({ success(res) { console.log(res) }})// 只允许从相机扫码wx.scanCode({ onlyFromCamera: true, succes转载 2021-01-30 11:14:58 · 9891 阅读 · 9 评论 -
微信小程序 - 二维码生成工具 weapp-qrcode
微信小程序 - 二维码生成工具下载:weapp-qrcode.js文件github:https://github.com/Pudon/weapp-qrcode-base64在项目中引入 weapp-qrcode.js 文件jsconst app = getApp();const QR = require('../../lib/weapp-qrcode.js'); // 引入 weapp-qrcodePage({ /** * 页面的初始...转载 2021-01-30 11:04:12 · 1055 阅读 · 4 评论 -
微信小程序小模块界面,边框带阴影
记一个小界面如下图:代码如下,样式都写在wxml里面<view style="display:flex;flex-direction:column;text-align:center ;margin:30rpx 30rpx;border:2rpx solid #949494;height:540rpx;border-radius:20rpx;box-shadow:0px -5px 0px 0px #E5E5E5,-5px 0px 0px 0px #E5E5E5,5px 0px 0px原创 2021-01-30 10:41:48 · 2588 阅读 · 0 评论 -
JS正则表达式校验金额
//任意正整数,正小数(小数位不超过2位)var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;var num = '666.62'; if(isNum.test(num)) { return true;}//验证金额(含零),保留两位小数 var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9]).转载 2021-01-22 11:38:15 · 6077 阅读 · 0 评论 -
微信小程序onLoad与onShow的区别
小程序声明周期onLoad与onShow的区别?onLoad页面加载时调用,可以获取参数,通过options。onShow页面显示时调用。主要区别:从二级页面返回该页面时,onLoad不会再次加载,而onshow会重新加载。这点很重要:1.如果加载列表页,二级页面对一级的列表页面内容有修改,则以及列表函数应该在onShow中加载,否则可以选择onLoad。2.如果从一个页面携带参数跳转到另外一个页面,在另一个页面获取参数的方式:onLoad(options){ conso..转载 2021-01-22 11:36:05 · 216 阅读 · 0 评论 -
border每个边框的阴影(box-shadow属性)
分别设置border四个边框为不同阴影(box-shadow属性)二、代码设置: 设置前的代码 box-shadow: none; 设置后的代码 box-shadow: 0px -10px 0px 0px #ff0000, /*上边阴影 红色*/ -10px 0px 0px 0px #3bee17, /*左边阴影 绿色*/ 10px 0px 0px 0px #2279ee, /*右转载 2021-01-18 18:43:56 · 2026 阅读 · 0 评论 -
微信小程序支付完成后如何跳转指定页面
很多人说使用reLaunch方式来跳转,此方法在 IOS 正常跳转,而在 Android 报错 relaunch:fail can not invoka lelaunch in background.是因为支付成功后就会立马试图执行relaunch,而页面还停留在支付完成这个页面,导致小程序实际上是在后台的,而relaunch无法在后台执行,所以无法跳转。因此可以尝试使用其他调整方式,如需要跳转到一级(tab)页面,用wx.switchTab。如果跳转到二级(非tab)页面,用wx.redirect转载 2021-01-12 18:36:18 · 7201 阅读 · 3 评论 -
微信小程序 解析 富文本编辑器的空格不成功 页面出现 的一些解决方案。
后台富文本编辑器的空格 在小程序端直接以符号显示出来,没有空格的效果如下:解决方案一 :小程序端读不到输入法的半角空格,但是能读取到输入法的全角空格。半角空格:在打空格的时候输入法调成半角 。"我是半角空 格空 格"。在小程序端显示为"我是半角空 格空 格"。全角空格:在打空格的时候输入法调成全角。"我是全角空 格空 格"。在小程序端显示为"我是全角空 格空 格"。解决方案二:找到wxParse文件夹下的wxDiscod...原创 2020-12-25 11:04:36 · 2663 阅读 · 0 评论 -
微信小程序-当用户拒绝了位置信息的请求时,提醒用户去设置地理位置授权
如图当用户点击了取消,拒绝了位置信息的请求。如下图所示,提醒用户去设置地理位置授权,如下图所示,如果用户没去设置的话,每次只要用户点击进入该页面都会有这个弹窗出现。相关代码如下所示:wxml: <!-- 弹出层 --> <!--页面遮罩层 --> <view class="modal-mask" bindtap="hideModal" wx:if="{{showFlag}}"></view> <!--页面提示弹窗原创 2020-12-19 12:07:51 · 4676 阅读 · 1 评论 -
php后台富文本编辑器的内容调用到前端小程序页面的一些显示问题,如: ;
后台富文本编辑器的空格 在小程序端直接以符号显示出来,没有空格的效果如下:方法1(在小程序端解决):将这些 转换成空格。代码如下: //一个转换文本中多个字符串的方法 String.prototype.myReplace=function(f,e){//吧f替换成e var reg=new RegExp(f,"g"); //创建正则RegExp对象 return this.replace原创 2020-12-12 12:16:41 · 792 阅读 · 0 评论 -
微信小程序长按图片,实现保存、转发、识别图中二维码
在小程序image组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别但是通过wx.previewImage只能实现保存,转发,小程序只能识别小程序二维码,别的不能实现。<image src="{{url}}" data-src="{{url}}" bindtap="previewImage"></image>Page({ data:{ url:'' }, previewImage(e){ var cur...转载 2020-12-08 17:20:37 · 7508 阅读 · 2 评论 -
微信小程序页面文字超出一行隐藏,文字超出两行隐藏。
页面文字超出一行隐藏,如图所示:wxml <view class="listcbsTitle" >卡通书签卡通书签卡通书签卡通书签卡通书签卡通书签卡通书签</view>wxss.listcbsTitle{ margin-bottom:10rpx; font-size:32rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}页面文字超出两行隐藏,如下图原创 2020-11-28 11:12:57 · 1574 阅读 · 0 评论 -
微信小程序时间转换成时间戳、获取当前时间戳、获取当前时间、时间戳加减
时间转换成时间戳var sTime = "2020-10-22 10:22:22";var timestamp = Date.parse(new Date(sTime ));//获取当前时间戳 var timestamp = Date.parse(new Date()); timestamp = timestamp / 1000; console.log("当前时间戳为:" + timestamp); //获取当前时间 var.转载 2020-11-26 18:52:25 · 2010 阅读 · 0 评论 -
微信小程序的点击复制功能
wxml如下:<view class="b-button" bindtap='copyUrl' data-id="www.baidu.com"> <view class="f-30 xzsd">点击复制网址</view></view>js如下:// 点击复制事件copyUrl: function (e) { // console.log(e.currentTarget.dataset.id) if(e.currentTa原创 2020-11-16 15:57:43 · 616 阅读 · 2 评论 -
微信小程序把wx.showToast的文字提示长度增加的方法
wx.showToast ({ title: '文字文字文字文字文字文字文字文字文字文字', icon: 'none', duration: 2000, });关键就在icon:‘none’原创 2020-11-16 15:40:29 · 9199 阅读 · 3 评论 -
微信小程序点击按钮实现弹出模态框
效果如下图wxml如下:<button bindtap="popup">弹出</button> <!-- 弹出层 --> <view class="modal-mask" bindtap="hidepopup" wx:if="{{showModal}}"></view> <view class="modal-dialog" wx:if="{{showModal}}"> <i.原创 2020-11-14 14:52:35 · 4516 阅读 · 10 评论 -
微信小程序之redirectTo、switchTab和navigateTo
转自:https://blog.csdn.net/qq_37818728/article/details/86482453官方的开发者文档中对于两者的比较仅仅为是否和tabBar相互连接,简单的来讲就是:redirectTo:关闭当前页(卸载),跳转到指定页navigateTo:保留当前页(隐藏),跳转到指定页switchTap:只能用于跳转到tabbar页面,并关闭其他非tabbar页面,tabbar之间做切换常见的会出现的问题:(1)因为bindtap名字的问题导致.转载 2020-11-14 12:18:57 · 870 阅读 · 0 评论 -
微信小程序页面间的对象传递
例子:页面架构:page A→a.js B→b.jsa.js→b.js, 此时a.js想传递studentBean这个对象到b.js接收, 常规的传递如下:var studentJson = JSON.stringify( this.data. studentBean)wx.navigateTo({url: '../B/b?student=' + studentJson,})说明:this.data.studentBean是声明在page({...转载 2020-11-14 12:06:23 · 306 阅读 · 0 评论 -
微信小程序实现滚动到指定位置
微信小程序的按钮点击后滚动到页面内的指定位置。wxml内容 <view class="box1" bindtap="toComment">查看回答</view> //...其他内容 <view class="box2 text-bold" id="comment">回答</view>js内容toComment() { var query = wx.createSelectorQuery()//创建节点查询器 query.转载 2020-11-13 17:11:59 · 2134 阅读 · 0 评论 -
微信小程序将页面按钮悬浮固定在底部
效果图如下所示: ps: 悬浮固定在页面的底部,并且背景有白色层将页面底部文字的显示遮罩,一面影响显示观感。且不受页面下拉上提的影响。wxml代码如下: <!--底部按钮的背景层--> <view class="baise"></view> <!--底部按钮--> <view class="anniu"> <button formType="submit" class="btn-normal btb..原创 2020-10-28 16:46:23 · 12382 阅读 · 1 评论 -
微信小程序点击button按钮后重置输入框等表单内容
效果如图wxml如下图在js文件中设置 /** * 重置条件 */ resetSalaryBtnClick: function (e) { this.setData({ minben: "", maxben: "", minprice: "", maxprice: "" }) },然后点击重置条件按钮。input框中输入的值都被清空啦。...原创 2020-10-28 16:09:49 · 3011 阅读 · 0 评论