- 博客(23)
- 收藏
- 关注
RSS订阅原创 微信小程序使用vant UI组件库
首先，创建一个空文件夹，然后用开发工具打开。使用测试号和用自己的程序都可以。然后找到app.json文件，删除 “style”: “v2”, 这个特性。接下来，在开发工具详情里，本地设置里打开使用npm模板。然后点开终端，新建终端。接下来，该输入命令了。输入 npm init 初始化项目,为了防止小程序不自动创建package.json，出现需要输入的时候，一直回车10下就好了。接下来，来到vant UI库的官网，进入到快速上手界面，输入步骤一的 通过 npm 安装，至于为什.
2021-02-02 11:36:33
1629
1
原创 搭建 vue项目（Windows + 命令行 + vsCode）
1.win键 + R ，输入CMD打开命令行。2.输入node -v 查看node.js是否安装，如果输出版本号，则进行下一步，否则安装node.js。下载地址：https://nodejs.org/en/，一路傻瓜式安装就可以了。输入npm -v 查看npm命令是不是安装成功，出现版本号则代表成功，和node一样。3.使用淘宝镜像，输入npm install -g cnpm –registry=https://registry.npm.taobao.org，时间可能会有点长，耐心等待一会儿吧。
2020-11-30 15:46:50
1310
原创 微信小程序扫一扫功能跳转h5界面
弄了个小程序跳转到外网，扫一扫获取二维码出现的路径。不过，跳转外部链接除了微信公众号绑定了该小程序外的URL地址，都需要进行业务域名配置，需要放文件进入网址的根目录才能够正常访问。我这里用的百度二维码做的实例。如果是用的测试的话，需要打开不校检域名。注意，如果不用缓存带链接去界面，可能会发生链接无法带参的情况，只会进入到界面，无法判断是否是你需要的参数界面。这里的js是调用扫一扫的代码，调用此api就可以了，wxml代码看你自己的样式实现。 wx.scanCode({ onl
2020-10-24 19:54:08
5037
原创 微信小程序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
3004
原创 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
7347
4
原创 微信小程序单页面使用echarts组件实现两个折线图
今天呢，放一个很早以前做的一个echarts组件的引用和实现。话不多说，上图片之后在上代码。这些代码都是我单独运行了才放上来得，应该可以直接用，有个问题是，X轴如果超过7个的话，会看不到后续的X轴，X轴的单位位置也只能在这条线上，比较无奈。首先呢，要去下载echarts插件包放在你的小程序里面接着就按照echarts的文档来查看属性，代码里放入你需要的属性就可以了。wxml代码，这是两个折线图的数据渲染<view class="container1"> <view clas
2020-06-02 09:25:34
3431
23
原创 微信小程序答题功能的初步实现
最近赶项目都累成狗了啊，接到个新的需求，答题功能，具体是怎么样的答题还要等后续，先上传我的一个答题思路吧。先上图给你们看一下效果这样的话，会有个小问题，那就是以前选中的答案也会被清除，所以我看后续该怎么解决一系列的bug问题，然后在给你们更新最新的吧。还有个问题是什么呢，那就是，这样自己导入的数据比较多，而且数据格式比较固定，目前没有拿到最终需求只能这样先玩玩咯。我的思路是，点击后命...
2020-04-17 11:07:30
11087
1
原创 微信小程序自定义tabbar组件（用于和微信自带tabbar外其他界面）
前面把两个自定义花式的写了，哈哈，现在来写个简单的，注意哦：app.json里用了自带tabbar的那几个主页面不要引用，不然也要在app.js里去隐藏哦。哦，对了，有个坏处就是，tabbar会闪，不过你们看着要求来呗。这是微信自带的，记得也用上哦，后面需要显示出这个tabbar的话在引用模板我的模板文件叫template首先是template.wxml<view class=...
2020-01-10 11:11:41
1818
6
原创 微信小程序自定义tabbar组件之中间按钮凸起
和我前面一篇文章差不多的， 只不过逻辑有点不同，直接上效果和代码吧先来一个模板文件，我的图片放在模板文件里wxml<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}"> <block wx:for="{...
2020-01-10 09:58:16
11178
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
3745
2
原创 微信小程序自带客服聊天功能实现（两种样式解读）
小程序自带的聊天功能有两种表现方式，一种是不能调整样式的，另外一种是自己调整样式的。这种微信自做的API是不需要后台的，而且实现方法很简单，但是也有弊端。第一种是<contact-button type="default-dark" size="20" session-from="weapp"></contact-button>就这一句代码，实现了就是这样子...
2020-01-09 17:23:39
10369
3
原创 微信小程序轮播图滚动带动背景图变换及滚动对应图片下标
今天呢，应召需求需求呢，做了一个轮播图在滑动，后面背景图也会跟着滑动变换。一开始呢，的确没啥思路，突然想着做了轮播图滑动并且有图片数量的显示变换的，突然脑子一灵光，就想到办法了想试试。首先呢，先放图片吧这个是实现的状态，由于懒得弄gif图，就将就看一下吧首先是wxml代码<view class="swiper-all"> <swiper class=...
2019-08-27 16:28:51
3813
原创 微信小程序获取验证码60S倒计时，点击事件和搜索实现（输入框获取写入数据）
由于小程序实现比较简单，所以全部都写在一起了。首先是获取验证码60秒倒计时先来上两张图wxml代码<view class='form-line'> <input class='input-text' placeholder='请输入您的验证码' bindinput='verify'></input> <!-- block 表示判断...
2019-08-26 16:51:57
1547
原创 微信小程序上传图片、长按删除及预览图片
也是电商里做的上传评论图片之类的，如果用根据我文章中需要改的改一下就可以用了首先是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
3364
3
原创 微信小程序下拉选择框
一般来说的话，总有点需要下拉并且能够搜索选择的需求。首先wxml<!-- 下拉菜单 --> <view class='menu-po'> <!-- 请选择 --> <view class='menu'> <view class='menu-list'> <...
2019-07-30 16:59:55
8120
3
原创 微信小程序之15分钟倒计时（附带天数和时钟的实现方法在文章中）
这是制作的订单支付前倒计时，如果客户在规定时间内没能 支付，则系统自动删除，这样就以便有些商品冗余，当然了，这里只有分钟和秒钟，天数和时钟我写在了最底下。这是实现的效果，每秒钟都在onload（）里面被调用，然后自动动态倒计时。其实难度不是很大，有一些代码防止你们看不懂，我会在下面注解出来的。首先还是wxml<view class='demo-text2'> ...
2019-07-30 09:53:51
9941
20
原创 微信小程序中物品详情页之底部弹出规格（带遮罩层和加减数量）
很多电商平台都有规格可以选择，我这里有一个简单的例子，点击已选，底部弹出带遮罩层和加减数量的规格选择。注释都在代码上哦，自己看吧。来两张效果图点击遮罩层部分或者×logo会返回第一张图片，相当于取消，也就是下面js里的close事件。注意哦：加减里的数量可以输入的哦。<view class='selected-all' bindtap='share'> <...
2019-07-29 17:32:32
3897
原创 微信小程序之平移轮播（附打电话功能）
emmmmmm~，前面的商城突然不想写了，因为什么呢，因为除开一些难度一点点的东西，其余的都是差不多都会的，所以呢，我现在会把难点弄起来，让你们学就差不多啦。可能有好几篇文章。首先呢，感觉平移轮播有难度其实和普通轮播差不多的，先上代码吧，后面我会解释是什么属性，如果还看不懂，可以看一下官方文档。首先是wxxml<swiper class="swiper-block" previo...
2019-07-29 16:24:41
923
原创 微信小程序商城篇（一）首页功能
一个小程序的首页，是整个小程序门面，及小程序的所有推荐小型功能。很重要我的首页分为背景图，轮播图，搜索，平移轮播，特价跳转，食谱跳转和推荐的物品及其跳转功能。emmmmm…唯一的不足就是没有用到盒子和布局。。。。，下次给你们补上吧，这次用这个会陆续发布整个商城的完成。对了，这些都是动态的数据交互之后的数据，照着改掉就好了，注释也都在代码里，我的图片也加载服务器了。直接给你们代码看吧！！！首...
2019-07-20 12:04:48
16616
25
原创 微信小程序分类及详情信息模块的分析
发完代码我才想起来，我的思路还没有发上来呢。首先，需要实现的功能是：1.点击下面分类图标界面，最顶部有个分类，会进入分类。分为左右侧栏。2.左边显示书类型的分类，点击并展开右侧栏类型书籍（有图片，书名）。3.点击书籍就会跳进书籍详细信息4.最顶部有个导航栏，一张此书的图片，大概百分之40左右。5.接着就是书名，金额，作者，热量等等内容显示。6.可以选择书的数量，可以评价此本书或者此...
2018-12-03 12:06:29
2979
2
原创 微信小程序之书籍详情页
上期我们写了静态分类的普通界面了，现在我们需要写跳转进入书籍详细信息页的静态页面了。如果你想设置顶部导航标题栏的话，可以在json里设置这样点进去的话就导航栏就会显示出书本详情的标题了。好了，言归正传，下面来开始接着实现点击上期的分类里的图片跳转到的页面，也就是详情信息页面了。首先，先写好我们的模板配置wxml。既然是书城的话，那就能够看到书本的图片轮播图了，大概多大也可以定义，接着图...
2018-12-03 10:28:27
7587
2
原创 微信小程序实战开发书城之静态分类模块
今天呢，有个小任务，就是把静态的分类小模块写出来，能够符合，也就是说一个实战的小模块，应该不是很难，下面我来上上代码。微信小程序里的四个后缀分别表示为：.json 后缀的 JSON 配置文件.wxml 后缀的 WXML 模板文件.wxss 后缀的 WXSS 样式文件.js 后缀的 JS 脚本逻辑文件注意：js只需要管理状态即可，不然项目一大代码交互太多，容易混乱。如果你想要在微信小程...
2018-11-29 09:56:45
2953
原创 HTML的基础标签，用法以及详解
在学习前端webstorm的时候，肯定需要接触很多的标签来实现需要用到的方法，让网页变得更加美观。下面，我就来介绍一下webstorm所需要用到的基础标签吧。常用的块元素有：、、…、、、、、、 、**块级元素特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（霸道，一个块级元素独占一行）2、元素的高度、宽度、行高以及顶和底边距都可设置。3、元素宽度在不设置的情况下，是...
2018-11-16 09:37:25
534
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人