![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
少爷、
相信相信的力量!!!
展开
-
微信小程序——有关图形验证码的所有信息
今天写一个有关图形验证码的笔记,先看效果图:第一个问题图形验证码怎么制作出来的呢?看代码:wxml: <canvas canvas-id="canvas" bindtap='change' style="width:200rpx;height: 70rpx;" ></canvas>CSS 样式写在这里就是随手,方便。JS:// indexSecond/pages/helpTake/helpTake.jsvar app = getApp();var baseUrl原创 2022-04-19 21:39:24 · 2393 阅读 · 2 评论 -
微信小程序-滚动到头部固定在顶部
在做小程序的时候向上滑动页面,让某一组件固定在顶部,如图:别人写的解决方法:通过页面onPageScroll方法解决方法我试了,可以用。但是他适用于原本不在顶部的组件滚动到顶部,实现在顶部固定。但是原本就在顶部的,就会出现卡顿情况。解决办法:<view class="box" style="position:fixed;width:100%; top:0; z-index:999" >然后在下面的组件CSS属性里面加一个margin-top: 100rpx;1000rpx是这个原创 2021-06-20 15:52:46 · 3307 阅读 · 0 评论 -
微信小程序标题栏放logo 搜索框
效果图如下:如果做成这样,标题栏上面放置自己的logo,绝对逼格满满,话不多说看操作:第一步;选择你想要放置logo的页面,例如,index页面,找到此页面的json子页面,放置代码:{ "navigationStyle": "custom" }第二步,首先我们要获取你手机顶部栏的高度,这时候需要在app.js文件里面写一个全局数据,globalData: { // 头部的自定义的高度 statusBarHeight: wx.getSystemInfoSync()原创 2021-06-08 15:40:17 · 3637 阅读 · 2 评论 -
微信小程序字数过多隐藏并显示省略号
效果图如下:在对应text所属的view中设置如下CSS: overflow: hidden; /* 超出一行文字自动隐藏 */ text-overflow: ellipsis; /*文字隐藏后添加省略号*/ white-space: nowrap; /*强制不换行*/不过上面的css只能保证单行显示隐藏,如果想要2,3,n行隐藏,设置如下代码:display: -webkit-box;overflow: hidden;text-overflow: ellipsis;wo原创 2021-06-08 15:08:44 · 1525 阅读 · 0 评论 -
小程序文字滚动
小程序公告栏跑马灯效果如下:具体代码如下:wxml:<scroll-view class="container_mag"> <view class="scrolltxt"> <view class="marquee_box"> <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)"> <text>原创 2021-06-07 20:24:48 · 573 阅读 · 0 评论 -
微信小程序跳转到另一个小程序(往返)
**今天正好遇见一个需求——实现小程序之前的跳转,现在做一个整理,具体如下:程序之间的跳转,小程序A跳转到小程序B:微信官方要求,要想实现小程序之间的跳转,必须由用户点击某个页面之间的组件进行跳转,并且跳转时有窗口跳出提醒。防止用户误点造成程序跳转。****先看微信官方提供的跳转文档:**[打开另一个小程序](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateT原创 2021-01-04 00:20:55 · 11576 阅读 · 1 评论 -
小程序地理位置权限第一次拒绝,如何再次调出
小程序中地理位置权限是一个很重要的功能,相信很多的小程序都具备这个功能。那么当小程序提醒用户进行授权地理位置权限的时候,用户拒绝了怎么办,我们知道用户一旦拒绝授权,将不能使用此功能。如果第一次拒绝了,再次想使用此功能的时候小程序应如何再次调出授权地理权限的弹窗。首先我们先看官方给我们提供的关于地图的文档。官方文档选择你们需要的API就行了,这里我需要的是wx.chooseLocation,这个...原创 2020-02-18 10:18:02 · 5136 阅读 · 0 评论 -
微信小程序勾选协议与提交按钮联动
在一些小程序的开发中有时会实现,未勾选相关协议,提交按钮是禁用状态,勾选相关协议,提交按钮变成可用状态。如下图所示:主要用到开发文档按钮组件的一个属性;代码:wxml:<!--相关协议--> <checkbox-group bindchange="bindAgreeChange"> <label class="weui-agree" for...原创 2020-02-16 13:09:31 · 6350 阅读 · 6 评论 -
小程序上传图片、预览图片、长按删除图片
在小程序开发中经常会做到关于图片的一些功能,下面是官方示例组件中的,但是官方没有删除图片功能,我添加了一下,希望能帮助到你。你们要是用这个示例的话得导入官方的示例框架。基础控件库代码:<view class="photo_box"> <view class="weui-uploader__bd"> &l...原创 2020-02-16 10:19:46 · 861 阅读 · 0 评论 -
小程序公告自动向左滑动
上一个博文说过swiper组件可以实现公告文字向左滑动,今天试了一下是可以的,但是不是文字滚动,而是滑动,很搞笑。代码:wxml:<!--pages/me_allOrder/allOrder.wxml--><!--swiper实现文字横向滚动效果--><view class="container" style="background-color:whit...原创 2020-02-16 09:24:50 · 412 阅读 · 0 评论 -
小程序基础swiper轮播图
其实swiper这个组件的用处还是相当大的,设置横向滚动可以制作成轮播图,横向文字滚动公告(不一定好看,可以试试,)纵向滚动也可以制作成上下文字公告。先来看看官方的提供文档是如何对swiper进行描述的吧。微信官方文档之swiper例图:代码:wxml:<!--轮播图--> <view class="background_box" style="mar...原创 2020-02-16 08:57:49 · 427 阅读 · 0 评论 -
小程序基础wx:if语句
今天写一个wx:if语句的示例,如图:点击搜索商品,将下方界面隐藏,同时搜索界面开启:点击取消按钮,则还原为原来的界面实现思路:1、用块容器将下方界面包裹起来,并写好if语句;将good_type的数据绑定为true;意味刚开始显示;2、再写个块容器将热门搜索部分包裹起来,并写好if语句:将searchbar的数据绑定为false;意味刚开始不显示;3、找到搜索按钮以及...原创 2020-02-15 18:54:17 · 2305 阅读 · 0 评论 -
小程序基础wx:for循环
没什么要讲的发一个示例就行了,如图:代码:wxml:<!--收订货区域--> <view class="container"> <view class="Icon_box"> <view class="Item_area" wx:for='{{rotes}}' wx:key='name'> <view...原创 2020-02-15 08:40:59 · 638 阅读 · 0 评论 -
微信小程序公告向上滚动
相信大家在做小程序的时候,应该都会做一个滚动的公告吧,今天教大家做一个上下滚动的公告,先上图:代码:wxml:<!--公告--><view class="notice_box"><view class="notice"> <image src="/Icon/index_icon/notice.png"></image&...原创 2020-02-14 18:45:20 · 1656 阅读 · 3 评论 -
微信小程序官方示例 Demo 代码
以前只知道小程序有一个UI组件库,不知道小程序还有一个官方示例Demo,今天用了一下大大的提高了我的编程速度,界面截图如下:具体的你们自己打开吧,我给你们整好了拦截,微信小程序官方示例Demo代码在自己的电脑上随便找个位置自己下载解压就行了。...原创 2020-02-14 18:21:59 · 2575 阅读 · 0 评论 -
小程序App()函数使用
今天讲解一下APP()函数的使用:App()函数用来注册一个微信小程序,它被放在app.js全局文件中,可以接收object对象的参数,同时还可以指定小程序的生米周期函数,全局函数,和全局数据,代码如下:App()函数中可以使用的函数,如下:1、 onLaunch: 生命周期函数,监听小程序初始化,当小程序初始化完成时,全局会触发一次。2、**onshow:**生命周期函数。监听...原创 2019-03-20 23:57:07 · 1615 阅读 · 0 评论 -
小程序前后台含义
当用户点击左上角的关闭按钮,或者按设备的Home键离开微信,此时的小程序并没有销毁,而是进入到了后台。只有当小程序进入后台一定时间或者手机资源占用过高的情况下,小程序才会被清理。当在一定时间中,再次进入微信或者打开小程序时,小程序又会从后台进入前台。微信小程序在App()函数定义的是全局函数或者全局数据,因此在页面文件夹js文件夹里面可以直接使用。例如存在“page/index/index”这样...原创 2019-03-21 00:20:29 · 3400 阅读 · 0 评论 -
如何设置小程序背景图片大小
background-size设置背景图片大小background-size:auto;| XXpx;|<百分比>;|cover;|contain属性说明: 1、auto:默认值,不改变原始图片的大小。 2、xxpx:自定义设置图片的大小,一般为成对出现例如 100px,50px,当设置一个值的时候,将其作为图片的宽度只进行等比缩放。 3、百分比:0%-100%的任意值,一般...原创 2019-06-08 13:04:36 · 15322 阅读 · 0 评论 -
小程序背景图适应屏幕
如何将背景图完全适应于屏幕上呢?相信对于初学者还是有小小的难度的,我也是搞了好久才弄出来的,现在给大家分享一下。第一步、创建一个容器,用来装背景图。第二步、设置WXSS属性 background-image:url(“需要将你的背景图进行转码”);第三步、background-size:cover;将图片设置成为覆盖容器,这样才能将图片全部作用于容器。注:不要以为到这一步就已经完成了,其实...原创 2019-06-08 17:16:36 · 5578 阅读 · 2 评论 -
小程序按钮点击效果
如何设置小程序按钮点击效果,<view class="#"> <button class="btn" hover-class="btn-class">搜索<button></view>.btn{/*在此设置按钮点击前的样式,属性*/}``在此设置点击之后的样式:.btn-class{background-color:pink;...原创 2019-06-11 21:29:34 · 6649 阅读 · 1 评论 -
微信小程序的框架及工具
微信小程序的框架及工具的使用,是进行微信小程序开发的第一步,今天我们先来讲解一下app.json配置,具体如下:**app.json**配置app.json是小程序的全局变量,有五个主要的功能:决定页面文件路径微信小程序的页面路径需要在app.json配置文件中配置一下,属性名为“pages”,以数组的形式存放在页面文件路径。文件路径以文件名进行命名,数组的第一项代表小程序的初始页面...原创 2019-03-17 00:05:24 · 290 阅读 · 0 评论