
微信小程序
进阶的码农
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
微信小程序获取input输入框里面的value值
相信有很多刚进入小程序这一行的时候会遇到很多的坑,其中有一个就是怎么都获取不到input输入框里面的内容,今天来再说一下这个value如何获取到。小程序input组件上有一个方法上有一个方法叫做bindinput现在来给大家看一下具体的用法 :wxml:<view class='regPhone'> <image src='../../image...原创 2018-04-09 15:18:31 · 53028 阅读 · 4 评论 -
JavaScript 小程序 商城倒计时效果
先看效果图吧1、首先想要实现这个效果需要获取到当前时间的时间戳var timestamp = Date.parse(new Date());//获取到毫秒 2、拿到后台返回的活动结束的时间戳 3、计算两者之间相差的天数、小时、分钟、以及秒数//计算两个时间戳之间相差多少时间function date(start_time, end_time) { va...原创 2018-06-07 10:13:48 · 1365 阅读 · 1 评论 -
微信小程序 预览图片
先看下效果图:这种效果在一些商城类的小程序里是很常见的一种功能,实现起来也很简单下面我们来看一下代码:我的这些图片资源是从后台拿到的,你们看一下具体的需求,一般都是后台返回,毕竟小程序是有大小限制的。 <view class='contentbot'> <view class='contentWa' wx:key='id' wx:for='{...原创 2018-06-25 09:29:56 · 1035 阅读 · 0 评论 -
微信小程序 去除button边框
传统的去除button边框的方法:border: none;这个并不起什么作用,需要用after选择器来处理:.shareBtn { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 80%; hei...原创 2018-07-09 14:26:43 · 2979 阅读 · 0 评论 -
微信小程序 picker选择器 从后台拿值
这种东西在项目中是很常见的,文档上有的demo我这里就不在重复一遍了,我现在说的是从后台拿到的数据,放在这个选择器里。后台返回的格式是这样的:我们要实现的样子是这样的:其实跟文档上介绍的普通选择器差不多,只是多了几个条件值,我们一起来看一下代码:主要看标红的这几个条件<view class='regPhone f' > <im...原创 2018-07-04 09:38:52 · 17415 阅读 · 8 评论 -
微信小程序 控制一个元素的显示或隐藏
在很多的业务场景中会遇到这样一个需求,就是根据后台返回的一个状态值,来控制一个元素是显示还是隐藏。比如说,当用户没有登录的情况下点击开始游戏,这时肯定不会让他玩,而是会弹出一个登录提示框让他登陆。类似于这种场景。这种方式主要用三目运算符来实现直接看代码吧 <view class='page'> <!-- 提醒用户登录 --> <v...原创 2018-07-04 10:56:37 · 12294 阅读 · 0 评论 -
微信小程序 POST请求不到数据
微信小程序中使用POST请求时需要改变一下 header请求头:header: { "Content-Type": "application/x-www-form-urlencoded" },想要获得更多资料的 请微信搜索公众号 【热血科技】,关注一下即可。...原创 2018-07-06 09:04:52 · 1318 阅读 · 1 评论 -
微信小程序 wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。举个例子说明吧// 此处是A页面wx.navigateTo({ url: 'B?id=1'})// 此处是B页面wx.navigateTo({ url: 'C?id=1'})// 在C页面内 navigateBack,将返回B页面wx.naviga...原创 2018-07-06 09:52:57 · 9525 阅读 · 0 评论 -
微信小程序 tab选项卡,可点击,可滑动
看下效果图:<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">最新</view> <view class=&quo原创 2018-07-19 09:12:34 · 2775 阅读 · 1 评论 -
微信小程序上拉加载
<view class=''> <view class='question-chid' wx:for='{{array}}' wx:for-index="idx" wx:key='{{index}}'> <view class='title'> <text class='xuhao'>{{idx+...原创 2018-08-02 15:09:14 · 453 阅读 · 0 评论 -
微信小程序绘制图片,发送朋友圈
这种生成图片的效果是很常见的,实现起来也不难,跟原生js的差不多。需要注意的就是canvas标签上不要加太多的css,后果呢就是导致canvas不显示,还有呢就是canvas组件的优先级是最高的,所以会覆盖掉下面的所有内容,解决方法呢就是使用:使用上面这两个组件是可以盖在canvas上面的。注意:canvas绘制不支持网络图片,需要将网络图片保存成本地图片 onLoad: fun...原创 2018-08-20 13:05:10 · 4363 阅读 · 1 评论 -
微信小程序canvas文本换行效果
我们在canvas上绘制多行文本的时候,不可能一行一行的绘制,这时就需要到了换行这个功能。文本换行参数:1、canvas对象,2、文本 3、距离左侧的距离 4、距离顶部的距离 5、(不用管)6、文本的宽度//文本换行 参数:1、canvas对象,2、文本 3、距离左侧的距离 4、距离顶部的距离 5、6、文本的宽度 drawText: function(ctx, str, le...原创 2018-08-20 13:17:21 · 5125 阅读 · 6 评论 -
微信小程序canvas绘制圆形头像
context.save();//绘制头像context.beginPath(); //开始绘制//先画个圆,前两个参数确定了圆心 (x,y) 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针context.arc(42 / 2 + 121, 42 / 2 + 210, 42 / 2, 0, Math.PI * 2, false);context.clip...原创 2018-08-20 13:59:50 · 6125 阅读 · 2 评论 -
微信小程序 真机调试出现打开调试有数据,关闭调试没有数据
最近在开发当中遇到了一个问题,上传体验版之后用手机打开没有数据,打开调试之后才会有数据。出现这种问题的主要原因就是后台的域名没有配置,在微信公众平台设置-->开发设置下面有一个服务器域名,把这个配置好了之后就可以了。但是要注意一个问题,配置好域名之后还是不可以的话,需要重新建一个项目,把这个项目导进去才可以,还有就是可能会有时间延迟,需要等待几分钟。想要获得更多资料的 ...原创 2018-06-21 08:55:03 · 21783 阅读 · 6 评论 -
微信小程序 页面之间的参数传递
我们都逛过商城类的网站,有一个场景大家肯定很熟悉,就是但我们在商品列表中看到了自己心仪的商品,点击购买就行了,那么问题来了,上台后台是如何区分我们要购买的是哪一件商品呢,这就需要我们再点击购买的时候,把这个商品的ID带过去了。那么小程序怎么实现呢?很简单,看一下代码就明白了<view class='contentWa' wx:for='{{wawa}}'> <image ...原创 2018-05-30 09:55:47 · 618 阅读 · 0 评论 -
微信小程序实现简易版tab切换效果
利用三元运算符实现登录注册效果切换直接上代码wxml:<view class='top'> <text class="{{login?'active':''}}" catchtap='login'>登录</text> <text class="{{login?'':'active'}}" catchtap='register'&g...原创 2018-04-02 16:13:22 · 1467 阅读 · 0 评论 -
分享几个微信小程序的视频教程
最近微信小程序的发展势头很火,各大公司开始重视这一块,很多新手看文档可能觉得不是特别容易理解(包括我),所以闲来无事整理了几个小程序的视频教程分享给大家,如果链接失效了可以给我留言。极客学院小程序视频教程:链接:https://pan.baidu.com/s/15Ysexba8D5HypvLXcphyPg 密码:levy小程序项目实战:链接:https://pan.baidu.co...原创 2018-04-03 13:30:35 · 47269 阅读 · 56 评论 -
微信小程序本地图片上传
今天做了一个本地图片上传的功能,可以选择单张图片或者多张图片,日常整理一下。 上代码了wxml: <button type="primary" bindtap='image'>选择图片</button><view wx:for='{{imgArray}}'> <image src='{{item}}'></i...原创 2018-04-02 09:46:58 · 730 阅读 · 0 评论 -
微信小程序客服会话功能
一些商城类的小程序都会要求客服会话,今天就来说一下如何实现这一功能,其实很简单,微信提供的文档上就有详细说明。根据这两幅图就可以看出他的具体用法,下面给大家详细代码: <button open-type='contact' class='kefu' session-from='weapp'>联系客服</button> .kefu{ width:...原创 2018-04-16 16:33:43 · 15455 阅读 · 5 评论 -
微信小程序分享功能
大多数的小程序都会用的分享功能,如其实一些小游戏,需要好友分数pk之类的。下面就来说一下这个能弄如何实现。首先来看一下文档上的组件buttonbutton组件提供了open-type属性,看看他有什么值这个就是用button做分享按钮必须要加的属性,下面看一下具体的代码。<button open-type='share' >炫耀战绩</button>...原创 2018-04-16 16:45:52 · 1145 阅读 · 0 评论 -
微信小程序判断分享的是群还是好友
最近比较流行的答题小程序通常会有这么一个功能,分享到群增加答题次数,分享到好友无效,那么问题来了,我们如何能够判断用户分享到的是群还是好友呢?通过查找API文档我发现会有这个一个东西withShareTicket 通过这个来判断是否分享到的是群还是好友,想要获取到这个需要这onShow方法里填加一个东西//设置分享获取shareTicket wx.showShareMen...原创 2018-05-03 13:15:27 · 10681 阅读 · 5 评论 -
微信小程序解决 加载图片出现渲染层网络层错误
在我们加载图片的时候往往会出现一些小问题,例如:明明图片加载成功了,但是控制台还是会报 渲染层网络层错误,找了很多地方,也发现不出来问题。出现这种情况的原因在于,页面显示加载的时候image里面的值是空的,从后台拿值是需要一定的额时间的,在这个时间内image的src是空的,所以报错。解决方法也很简单 加一个wx:if="{{arr.length>0}}"想要获得更多资料的 ...原创 2018-05-10 15:49:32 · 72344 阅读 · 11 评论 -
微信小程序获取手机验证码
一种比较常见的功能获取手机验证码先看效果图:其实这个功能实现起来很简单,主要就是调取第三方接口,拿到返回值验证的问题直接上代码吧:<view class='changeInfo'> <view class='changeInfoName'> <input placeholder='请输入姓名' bindinput='getNameV...原创 2018-04-26 13:45:18 · 42824 阅读 · 33 评论 -
微信小程序 滚动列表(无限滚动)
效果图1.0实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical=‘true’设置同时显示的滑块数量:display-multiple-items=‘4’设置自动轮播:autoplay:‘true’.话不所说,直接上代码:<!-- 底部排名 --> <view class='contentBottom'> ...原创 2018-05-07 13:34:22 · 17809 阅读 · 12 评论 -
微信小程序实现常见弹出层效果
先看下效果图吧 其实这个效果实现起来很简单,就是通过三目运算符来控制遮罩层的显示和隐藏贴代码了:规则按钮:<text class='rule' bindtap='showRule'>规则</text>遮罩层:我这个数据是从后台拿来动态渲染到页面的<!-- 规则提示 --> <view class="ruleZhe...原创 2018-06-05 09:37:19 · 40294 阅读 · 7 评论 -
微信小程序 for循环动态渲染页面
这种列表效果可以说是最常见的一种,肯定不是我们一个一个写上去,这就用到了我们这次要说的for循环渲染了其实也很简单,我就直接上代码了<view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <...原创 2018-05-29 15:43:29 · 9404 阅读 · 1 评论 -
微信小程序 获取标签里面的数据 例如:view、text
在一些场景中,我们需要获取到标签里面的值来和接口返回的值做对比,一致则进行下一步,后者进行错误判断<view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'> <text class='yuzhong'...原创 2018-05-29 15:53:25 · 42009 阅读 · 5 评论 -
微信小程序 多选功能
<!--hotblood_gongkao/pages/answer/answer.wxml--><!-- content --><view class='answer-list'> <view class='answer-child'> <text class='answer-title'><tex...原创 2018-09-13 14:52:41 · 5887 阅读 · 3 评论