![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
文章平均质量分 54
丶枕边人
请多指教!!!
展开
-
微信小程序使用vant UI组件库
首先,创建一个空文件夹,然后用开发工具打开。使用测试号和用自己的程序都可以。然后找到app.json文件,删除 “style”: “v2”, 这个特性。接下来,在开发工具详情里,本地设置里打开使用npm模板。然后点开终端,新建终端。接下来,该输入命令了。输入 npm init 初始化项目,为了防止小程序不自动创建package.json,出现需要输入的时候,一直回车10下就好了。接下来,来到vant UI库的官网,进入到快速上手界面,输入步骤一的 通过 npm 安装,至于为什.原创 2021-02-02 11:36:33 · 1455 阅读 · 1 评论 -
微信小程序扫一扫功能跳转h5界面
弄了个小程序跳转到外网,扫一扫获取二维码出现的路径。不过,跳转外部链接除了微信公众号绑定了该小程序外的URL地址,都需要进行业务域名配置,需要放文件进入网址的根目录才能够正常访问。我这里用的百度二维码做的实例。如果是用的测试的话,需要打开不校检域名。注意,如果不用缓存带链接去界面,可能会发生链接无法带参的情况,只会进入到界面,无法判断是否是你需要的参数界面。这里的js是调用扫一扫的代码,调用此api就可以了,wxml代码看你自己的样式实现。 wx.scanCode({ onl原创 2020-10-24 19:54:08 · 4663 阅读 · 0 评论 -
微信小程序6位验证码功能实现
今天抽空弄了一下防密码式的邀请码/验证码的6位数的输入框。这些数字啊,字母啊,都可以设置为明文或者密文,其实是隐藏在下一排看不到的。wxml代码//邀请码图片<image src="/img/ziti.png" class="zi-ti"></image><form bindsubmit="formSubmit"> <view class='content'> <block wx:for="{{numList}}" wx:key="原创 2020-09-28 15:15:18 · 2350 阅读 · 0 评论 -
HBuilderX用uni-app做微信小程序授权登录
首先,先找到HBuilderX的官网下载软件安装包进行安装。链接:https://uniapp.dcloud.io/quickstart然后根据你电脑的配置下载相对应的版本即可。下载完成后,就是一个压缩包,把他压缩在你电脑的里面,在文件夹中找到启动应用,并点击打开。打开项目后新建项目,新建uni-appx项目。选择内置项目模板。选择空文件夹喝和给你初始的项目命名。![在这里插入图片描述](https://img-blog.csdnimg.cn/20200903150008436.png?x-o原创 2020-09-03 15:24:50 · 6788 阅读 · 4 评论 -
微信小程序单页面使用echarts组件实现两个折线图
今天呢,放一个很早以前做的一个echarts组件的引用和实现。话不多说,上图片之后在上代码。这些代码都是我单独运行了才放上来得,应该可以直接用,有个问题是,X轴如果超过7个的话,会看不到后续的X轴,X轴的单位位置也只能在这条线上,比较无奈。首先呢,要去下载echarts插件包放在你的小程序里面接着就按照echarts的文档来查看属性,代码里放入你需要的属性就可以了。wxml代码,这是两个折线图的数据渲染<view class="container1"> <view clas原创 2020-06-02 09:25:34 · 3124 阅读 · 23 评论 -
微信小程序答题功能的初步实现
最近赶项目都累成狗了啊,接到个新的需求,答题功能,具体是怎么样的答题还要等后续,先上传我的一个答题思路吧。先上图给你们看一下效果这样的话,会有个小问题,那就是以前选中的答案也会被清除,所以我看后续该怎么解决一系列的bug问题,然后在给你们更新最新的吧。还有个问题是什么呢,那就是,这样自己导入的数据比较多,而且数据格式比较固定,目前没有拿到最终需求只能这样先玩玩咯。我的思路是,点击后命...原创 2020-04-17 11:07:30 · 10712 阅读 · 1 评论 -
微信小程序自定义tabbar组件(用于和微信自带tabbar外其他界面)
前面把两个自定义花式的写了,哈哈,现在来写个简单的,注意哦:app.json里用了自带tabbar的那几个主页面不要引用,不然也要在app.js里去隐藏哦。哦,对了,有个坏处就是,tabbar会闪,不过你们看着要求来呗。这是微信自带的,记得也用上哦,后面需要显示出这个tabbar的话在引用模板我的模板文件叫template首先是template.wxml<view class=...原创 2020-01-10 11:11:41 · 1709 阅读 · 6 评论 -
微信小程序自定义tabbar组件之中间按钮凸起
和我前面一篇文章差不多的, 只不过逻辑有点不同,直接上效果和代码吧先来一个模板文件,我的图片放在模板文件里wxml<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}"> <block wx:for="{...原创 2020-01-10 09:58:16 · 10707 阅读 · 126 评论 -
微信小程序自定义tabbar组件点击对应区域显示凸起效果
今天呢,看到设计图,难搞啊,要自定义组件,是时候动动脑子了,哈哈。我呢,方法用的比较笨,代码有点冗余了,还望体谅哈首先呢,先创建template文件夹,里面包含wxml,wcss和 js先来wxml代码吧<view class='footer'> <view class='footer_list' data-current="{{0}}" bindtap="ch...原创 2020-01-09 17:50:58 · 3539 阅读 · 2 评论 -
微信小程序自带客服聊天功能实现(两种样式解读)
小程序自带的聊天功能有两种表现方式,一种是不能调整样式的,另外一种是自己调整样式的。这种微信自做的API是不需要后台的,而且实现方法很简单,但是也有弊端。第一种是<contact-button type="default-dark" size="20" session-from="weapp"></contact-button>就这一句代码,实现了就是这样子...原创 2020-01-09 17:23:39 · 9881 阅读 · 3 评论 -
微信小程序轮播图滚动带动背景图变换及滚动对应图片下标
今天呢,应召需求需求呢,做了一个轮播图在滑动,后面背景图也会跟着滑动变换。一开始呢,的确没啥思路,突然想着做了轮播图滑动并且有图片数量的显示变换的,突然脑子一灵光,就想到办法了想试试。首先呢,先放图片吧这个是实现的状态,由于懒得弄gif图,就将就看一下吧首先是wxml代码<view class="swiper-all"> <swiper class=...原创 2019-08-27 16:28:51 · 3578 阅读 · 0 评论 -
微信小程序获取验证码60S倒计时,点击事件和搜索实现(输入框获取写入数据)
由于小程序实现比较简单,所以全部都写在一起了。首先是获取验证码60秒倒计时先来上两张图wxml代码<view class='form-line'> <input class='input-text' placeholder='请输入您的验证码' bindinput='verify'></input> <!-- block 表示判断...原创 2019-08-26 16:51:57 · 1402 阅读 · 0 评论 -
微信小程序上传图片、长按删除及预览图片
也是电商里做的上传评论图片之类的,如果用根据我文章中需要改的改一下就可以用了首先是wxml<view class="conts"> <view class="img_box"> <view class="imgs" wx:for="{{tempFilePaths}}" wx:key="index"> <image src='...原创 2019-07-31 17:21:15 · 3225 阅读 · 3 评论 -
微信小程序下拉选择框
一般来说的话,总有点需要下拉并且能够搜索选择的需求。首先wxml<!-- 下拉菜单 --> <view class='menu-po'> <!-- 请选择 --> <view class='menu'> <view class='menu-list'> <...原创 2019-07-30 16:59:55 · 7699 阅读 · 3 评论 -
微信小程序之15分钟倒计时(附带天数和时钟的实现方法在文章中)
这是制作的订单支付前倒计时,如果客户在规定时间内没能 支付,则系统自动删除,这样就以便有些商品冗余,当然了,这里只有分钟和秒钟,天数和时钟我写在了最底下。这是实现的效果,每秒钟都在onload()里面被调用,然后自动动态倒计时。其实难度不是很大,有一些代码防止你们看不懂,我会在下面注解出来的。首先还是wxml<view class='demo-text2'> ...原创 2019-07-30 09:53:51 · 9542 阅读 · 20 评论 -
微信小程序商城篇(一)首页功能
一个小程序的首页,是整个小程序门面,及小程序的所有推荐小型功能。很重要我的首页分为背景图,轮播图,搜索,平移轮播,特价跳转,食谱跳转和推荐的物品及其跳转功能。emmmmm…唯一的不足就是没有用到盒子和布局。。。。,下次给你们补上吧,这次用这个会陆续发布整个商城的完成。对了,这些都是动态的数据交互之后的数据,照着改掉就好了,注释也都在代码里,我的图片也加载服务器了。直接给你们代码看吧!!!首...原创 2019-07-20 12:04:48 · 16048 阅读 · 25 评论 -
微信小程序中物品详情页之底部弹出规格(带遮罩层和加减数量)
很多电商平台都有规格可以选择,我这里有一个简单的例子,点击已选,底部弹出带遮罩层和加减数量的规格选择。注释都在代码上哦,自己看吧。来两张效果图点击遮罩层部分或者×logo会返回第一张图片,相当于取消,也就是下面js里的close事件。注意哦:加减里的数量可以输入的哦。<view class='selected-all' bindtap='share'> <...原创 2019-07-29 17:32:32 · 3629 阅读 · 0 评论 -
微信小程序之平移轮播(附打电话功能)
emmmmmm~,前面的商城突然不想写了,因为什么呢,因为除开一些难度一点点的东西,其余的都是差不多都会的,所以呢,我现在会把难点弄起来,让你们学就差不多啦。可能有好几篇文章。首先呢,感觉平移轮播有难度其实和普通轮播差不多的,先上代码吧,后面我会解释是什么属性,如果还看不懂,可以看一下官方文档。首先是wxxml<swiper class="swiper-block" previo...原创 2019-07-29 16:24:41 · 805 阅读 · 0 评论