小程序实战
文章平均质量分 68
IT实战联盟Lin
这个作者很懒,什么都没留下…
展开
-
动力商城首页(三):仿唯品会的商品分类和品牌导航功能(完美)
仿某品会实现商城首页品牌分类和商品分类功能原创 2022-08-10 11:06:55 · 462 阅读 · 0 评论 -
微信小程序:实现一组卡片翻转的效果
小程序使用animation动画实现翻转原创 2022-08-09 17:22:08 · 1947 阅读 · 0 评论 -
袋鼠天气 v1.1 发布:增加下拉刷新获取实时天气数据
源码地址:https://github.com/yundianzixun/daishu-service袋鼠天气 是一款开源的基于 Spring Boot、微信小程序原生的实时天气预报小程序应用。新功能:1、增加下拉刷新功能,实时获取实时天气。2、删除小程序端天气图标目录,减少代码包大小。3、优化最近7天图标获取方式。预览...原创 2021-12-31 18:39:25 · 403 阅读 · 0 评论 -
仿墨迹天气小程序源码(袋鼠天气)
微信小程序原生开发的天气预报小程序原创 2021-12-10 14:15:23 · 1139 阅读 · 1 评论 -
小伙用微信小程序的Canvas手撸了一个娃娃机
原文:https://blog.100boot.cn/post/3067前言夹娃娃营销活动大家应该都不陌生那如何用小程序实现呢?今天就带大家用canvas撸了一个全手工绘制的夹娃娃分享给大家。此处应有掌声 : )一、效果图二、项目结构三、运行流程获取所有奖品列表 依次绘制背景、爪子、展台、顶部海报 点击任意区域出发开始夹娃娃 请求后端获取得到的奖品,也可以为空(没有夹到) 展示夹到的奖品四、关键代码点击屏幕开始模拟后台返回数据//点击屏幕开始..原创 2020-11-18 19:01:40 · 1558 阅读 · 0 评论 -
小程序获取微信运动步数并集成echarts报表显示
需求现在运动计步非常的火,大家常用的计步工具一般有keep、咕咚、微信运动和其他移动设备等,本文是基于微信小程序获取用户的微信运动数据并可视化呈现出来。先看一下最终实现效果:微信运动规则在开发之前需要了解一下微信运动信息的使用规则,这样会规避掉很多问题。1、微信运动数据必须在微信生态内获取,即小程序、公众号等,且需要用户进行授权。2、用户主动进入小程序时可以获取到最近30天的运动数据...原创 2019-12-26 09:34:17 · 2778 阅读 · 2 评论 -
微信小程序微商城(十):用户收货地址管理
上一篇:微信小程序微商城(九):微信授权并实现个人中心页面看效果开发计划1、布局收货地址列表和新增收货地址页面2、实现省市县三级联动功能3、使用缓存管理数据一、收货地址列表管理addressList.wxml<scroll-viewclass="scroll"scroll-y="true"><viewwx:for="{...原创 2018-08-16 13:02:53 · 14732 阅读 · 8 评论 -
微信小程序微商城(九):微信授权并实现个人中心页面页面
上一篇:微信小程序微商城(八):缓存实现商品购物车功能看效果开发计划1、实现微信授权并获取用户信息2、个人中心页面布局一、实现微信授权并获取用户信息mine.jsonLoad: function () { if (app.globalData.userInfo) { this.setData({ ...原创 2018-08-02 09:44:40 · 34859 阅读 · 20 评论 -
微信小程序微商城(七):动态API实现商品分类
上一篇:微信小程序微商城(六):动态API实现新品特卖商品流式布局看效果商品分类.gif开发计划1、商品分类页面布局2、调用动态API获取数据并加载3、点击商品分类跳转相关商品集合根据商品ID获取商品详情API数据模型访问:https://100boot.cn/ 选择微商城案例,如下图所示:商品分类API.jpg下方还有详细的数据模型可以查看哦!classify.wxml<!--主盒子--&...原创 2018-07-10 15:56:38 · 16714 阅读 · 3 评论 -
微信小程序微商城(八):缓存实现商品购物车功能
上一篇:微信小程序微商城(七):动态API实现商品分类看效果购物车.gif开发计划1、商品详情页将商品信息放入缓存2、购物车页面读取缓存获取商品信息3、购物车商品计算和删除缓存商品一、商品详情页将商品信息放入缓存detail.wxml<button data-goodid="{{goods.goodsId}}" class="button-addCar...原创 2018-07-16 16:59:14 · 13313 阅读 · 4 评论 -
微信小程序微商城(五):动态API实现商品详情页(下)
上一篇:微信小程序微商城(四):动态API实现商品详情页(上)看效果加入购物车.gif开发计划1、加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发2、调用加入购物车API加入购物车根据商品ID获取商品详情API数据模型访问:https://100boot.cn/选择微商城案例,如下图所示:加入购物车和商品收藏API.jpg下方还有详细的数据模型可以查看哦!detail.wxml...原创 2018-06-25 17:37:27 · 4915 阅读 · 1 评论 -
微信小程序抖音实战-支持手机播放小视频
上一篇抖音播放小视频文章发出来后很多的粉丝纷纷留言问为什么手机不能用呀!小编也是试了诸多方法,最后把经验总结出来给大家做了一个改进的例子首先看下效果图预览效果截图点击后播放截图点击屏幕出现暂停按钮截图实现思路给每个视频增加一个封面图片,轮播的时候只显示封面图片,当用户点击播放的时候,再弹出视频,当用户点击视频的时候显示暂停按钮,点击暂停按钮隐藏视频播放层并...原创 2018-08-23 16:28:06 · 8785 阅读 · 0 评论 -
微信小程序抖音实战-小视频弹幕
如果你去抖音只是为了看小视频就少了一大乐趣,评论区才是最有趣的地方,边看视频边看评论的弹幕是不是更有意思首先看下效果图预览效果截图实现思路把最新的评论以弹幕的方式展示出来,随机生成字体颜色局部代码变动1. 增加一个随机颜色生成算法functiongetRandomColor(){letrgb=[]for(leti=0;i<...原创 2018-08-30 11:27:56 · 2426 阅读 · 0 评论 -
微信小程序:最新微信登录授权并获取openid等信息
简介为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。小程序使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。调用接口获取登录凭证(code)进而换取用...原创 2018-10-23 13:43:59 · 30930 阅读 · 12 评论 -
微信小程序踩坑(1):wx.showModal模态对话框中content换行
问题:wx.showModal 对话框内容不能换行?如上图所示,模态对话框中content是没有换行的,但是我们需求中有需要换行提醒的业务,那怎么办呢?官方API中并没有告诉我们怎么做!解决方案:使用“\r\n”换行源码wx.showModal({ title: 'showModal换行', content: '姓名:JIM\r\n性别:女\r\n国籍:中国',...原创 2018-11-29 17:10:51 · 14366 阅读 · 0 评论 -
微信小程序踩坑(2):开发工具更新后报“VM110:5 appJSON["tabBar"]["borderStyle"] 字段需为 black 或 white”错误
一、问题:app.json 文件内容错误报错信息如上图所示,更新完微信开发工具后报VM110:5 appJSON[“tabBar”][“borderStyle”] 字段需为 black 或 white错误二、问题原因以前tabBar中的borderStyle可以支持十六进制颜色,现在 仅支持 black / white,微信开发工具1.02.1901230一更新,就会发现报错,提示his...原创 2019-03-25 15:06:43 · 7306 阅读 · 0 评论 -
微信小程序实现商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~。核心js方法说明addCount(增加数量)delCount (减少数量)getCount(获取数量)实现效果如下图所示:实现步骤1、页面布局count.wxml 增加主容器代码和提交button<!-- 主容器 --> <vie...原创 2019-04-21 14:11:25 · 9862 阅读 · 3 评论 -
时隔一年,微信发布WeUI2.0.0,各种buff加身
最近看到腾讯GitHub开源社区更新了WeUI 2.0.0(Star已2.2w+) ,上个版本是18年6月发布的1.1.3,已经近一年没有更新了。WeUI是什么?WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、act...原创 2019-05-08 13:16:35 · 1247 阅读 · 0 评论 -
微信小程序微商城(六):动态API实现新品特卖商品流式布局
上一篇:微信小程序微商城(五):动态API实现商品详情页(下)看效果开发计划1、新品特卖商品列表布局2、调用动态API获取数据并加载3、点击商品跳转商品详情根据商品ID获取商品详情API数据模型访问:https://100boot.cn/选择微商城案例,如下图所示:下方还有详细的数据模型可以查看哦!brand.wxml<scroll-view scroll-y="true" style...原创 2018-06-29 15:58:14 · 1826 阅读 · 3 评论 -
微信小程序微商城(三):电商首页福利专场无限下拉刷新动态API数据实现
上一篇:微信小程序微商城(二):电商首页轮播、分类导航和新品特卖实现友情提示:由于微信小程序微商城系列都是通过https调用API服务动态获取的数据模型,建议先看微信小程序微商城(一):https框架搭建并实现导航功能。效果展示话不多说,直接看实现效果:福利专场商品无限下拉展示.gif电商首页回顾功能模块.jpg如上图所示,电商首页只剩下第五个模块-福利专场,福利专场是商品列表集合 我们将采用无限...原创 2018-06-01 15:53:38 · 3792 阅读 · 0 评论 -
微信小程序微商城(四):动态API实现商品详情页(上)
上一篇:微信小程序微商城(三):电商首页福利专场无限下拉刷新动态API数据实现看效果开发计划1、实现商品详情页面布局(这篇实现3个模块,头部商品图片轮播、商品价格和商品描述、商品详情展示)2、根据用户点击不同的商品请求API动态加载数据根据商品ID获取商品详情API数据模型访问:https://100boot.cn/选择微商城案例,如下图所示:下方还有详细的数据模型可以查看哦!home.js ...原创 2018-06-13 15:33:38 · 8220 阅读 · 1 评论 -
微信小程序-rpx尺寸介绍
最近开始入手微信小程序,如果有前端开发经验的同学应该很容易入手。在布局样式的时候发现微信小程序有自己的css尺寸单位-rpx 比px 多了个r。接下来简单介绍一下怎么使用微信小程序的rpxrpx简介: rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素原创 2017-11-28 18:31:57 · 2303 阅读 · 0 评论 -
微信小程序电商实战-首页(下)
上一篇:微信小程序电商实战-首页(上)好了,上一期我们把首页搜索、导航栏和广告轮播给做完了,那么接下来会继续完成我们首页的剩余部分,先看我们要实现的效果吧!本期我们要实现首页的实时热销榜、福利专场和左下方个人中心+购物车的布局。一、实时热销榜话不多说,先看实际效果图:这个模块我们主要用到 scroll-view 视图容器,顾名思义就是滚动视图,当布局的内容超过屏幕容器的时候可以滑动开查看遮盖的内容,原创 2017-12-04 11:59:21 · 6121 阅读 · 1 评论 -
微信小程序电商实战-首页(上)
上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽。那么最终会做成什么样呢?当然可以肯定不会只做一个静态demo哦,先把我们小程序电商实战的整体架构发出来晒一下,请看下图: 好了,不啰嗦了 我们先看首页长什么样吧!为了能够更好的表达出来,首页准备分成两次写完。 第一部分先实现如下的功能划分模块大家都知道电商平台一般分为首页、商品分类、购物车和个人中原创 2017-11-24 16:45:18 · 11679 阅读 · 3 评论 -
Java Web实战篇-代码之美
对于提升代码的运行效率 优化一两处代码对于整体的运行效率意义不大,如果能够把写优质代码的习惯保持在一个项目中这样就非常有用。小编建议在项目编写代码的过程中,多注意代码编写细节,选择最优最简洁的编写方案,会减少很多生产上位置的错误,也会减少很多排查问题的工作量。代码优化的最终目标: 1. 减少代码的体积 2. 提升代码的运行效率 3. 减少生产Bug减少变量的重复计算对于方法的调用,即使方法中只原创 2018-01-12 16:54:32 · 901 阅读 · 0 评论 -
微信小程序电商实战-商品详情(上)
上一篇:微信小程序电商实战-首页(下)先看一下今天要实现的小程序商品详情页吧!本期我们要实现小程序商品详情页的头部标题、头部轮播、商品详情浮动按钮和商品内页布局。一、设置头部标题如上图所示,头部标题是商品详情 如果不进行设置的话会默认为app.json 设置的window.navigationBarTitleText值。detail.json{ "navigationBarTitleText":原创 2017-12-28 17:11:25 · 5142 阅读 · 0 评论 -
微信小程序电商实战-商品列表流式布局
今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的宽,高,margin,padding会根据页面的尺寸随时调整已达到适应当前页面的目的.先看效果: 如上图所示,为了能够看的更直观一点我给布局设置了红色虚线边框,整体页面根据元素的百分比进原创 2018-01-26 17:16:37 · 18845 阅读 · 2 评论 -
微信小程序实战篇:基于wxcharts.js绘制移动报表
前言微信小程序图表插件(wx-charts)是基于canvas绘制,体积小巧,支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个。如上图所示,我们基于wxcharts.js 来实现订单统计报表。导入wxcharts.js将wxcharts.js 存放在utils目录column.wxml<view class="container"原创 2018-03-14 16:20:38 · 2375 阅读 · 1 评论 -
微信小程序电商实战-商品详情加入购物车(下)
上一篇:微信小程序电商实战-商品详情(上) 今天会接着上一篇开始写商品详情页加入购物车的部分,先看效果: 实现效果1. 商品轮播图片预览2. 商品收藏效果3. 加入购物车4. 商品数量加减5. 商品数量加减模板(template)编写商品轮播图片预览效果detail.js//预览图片 previewImage: function (e) { var current = e.t原创 2018-04-09 14:28:05 · 9310 阅读 · 3 评论 -
微信小程序实战篇:商品属性联动选择(案例)
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶。效果演示:代码示例1、commodity.xml<!-- <view class="title">属性值联动选择</view> --><!--options--><view class="commodity_attr_list"> <!--每组属性--> <view class原创 2018-03-28 13:59:21 · 7874 阅读 · 6 评论 -
微信小程序实战篇:小程序之页面数据传递
我们在写小程序的时候经常会遇到子页面向主页面回传数据或者普通页面跳转到tabBar 页面携带数据,而现有官网提供的跳转方法多数是不支持参数传递的。 下面写了四种方法大家根据自己的实际场景来选择使用哪种首先大概讲下小程序各个页面跳转的一些差别和注意事项wx.navigateTo(OBJECT)可以传递参数会存入页面路径栈(目前页面路径最多只能十层)可以通过 navigateBack 返回原创 2018-04-13 11:28:23 · 4319 阅读 · 0 评论 -
微信小程序实战篇:实现抖音评论效果
我们在写小程序的时候经常会遇到弹出层的效果而现有官网提供的跳转方法多数是不支持参数传递的。本文教大家做一个抖音评论效果的小程序首先看下效果图一、页面编写<view> <button bindtap='showTalks'>查看评论</button></view><!-- 整个评论区 --><view class='talks-...原创 2018-05-03 14:37:25 · 8627 阅读 · 4 评论 -
微信小程序电商实战-购物车(上)
好久没更新小程序电商实战的文章了,是因为最近一直做整体架构调整,一些准备工作也是比较耗费时间的。在这几天将会有新版的 小程序电商教程推出,先透露一下 新版将会以https的方式请求动态获取数据来展现,不再是目前的静态页面了 新版也更贴近于实战。这篇购物车因为内容比较多 特别是中间有用到template模板的只是点,所以会分文 上下两部分。大家耐心看完哦~~~购物车效果购物车效果图.gifc...原创 2018-05-17 14:17:20 · 3149 阅读 · 0 评论 -
微信小程序电商实战-购物车(下)
我们继续接着昨天的购物车写,主要把剩下的数量加减template模板、选中计算功能实现掉!template模板如果拿购物车(上)来做应该会报错的因为引用不到 template模板,接下来我们来实现!template.wxml<template name="quantity"> <!-- 主容器 --> <view class="stepper">...原创 2018-05-18 11:24:22 · 1923 阅读 · 0 评论 -
微信小程序-template使用:实现购物车商品数量加减功能
前言上一篇我们实现了购物车功能,里面有用到template模板功能来实现购物车商品数量加减和价格计算功能,可能篇幅过长介绍的并不清楚,本篇将详细介绍一下template模板来减少冗余代码。模板WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。定义模板使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,如:template...原创 2018-05-23 15:24:05 · 8215 阅读 · 0 评论 -
微信小程序微商城(一):https框架搭建并实现导航功能
前言之前的小程序商城系列已经更新到购物车模块了但是很多读者反映如何能够更接近于实战场景,动态的获取数据并展示出来!那么经过这段时间的准备我们开始来做新的微商城版本,该版本是完全按照工作场景来开发的。小程序https域名配置登录注册好的微信小程序官方账号并登录平台——>设置——>开发设置,如下图所示:备注:https://100boot.cn是已经认证过的域名,大家可以放心使用。创建小...原创 2018-05-28 15:20:01 · 12022 阅读 · 2 评论 -
微信小程序微商城:开发者key获取
第一步:关注“实战开发助手”微信小程序,可以微信扫一扫哦!gh_8c5565f14bc5_344.jpg第二步:长按获取开发者key开发者key.jpg第三步:配置开发者key配置开发者key.jpg备注:也可以访问https://100boot.cn选择“微商城”案例下载,在源码配置完申请的key 就可以体验喽,另外平台也提供了各种API数据服务文档,如下图所示:API文档.jpgAPI详情...原创 2018-05-28 15:22:22 · 5342 阅读 · 0 评论 -
微信小程序微商城(二):电商首页轮播、分类导航和新品特卖实现
上一篇:微信小程序微商城(一):https框架搭建并实现导航功能大家在看本文前一定要先阅读上一篇文章前言上一篇我们设置了小程序后台服务器https域名设置、搭建了小程序基础的https框架和实现了首页导航模块,今天我们一起来看一下电商首页轮播、分类导航和新品特卖模块的实现。实现功能模块主要实现2、3、4,用到的API数据服务如下图所示:首页轮播模块实现home.js<!--首页轮播 bann...原创 2018-05-29 15:00:26 · 5389 阅读 · 1 评论 -
微信小程序-Image 图片实现宽度100%,高度自适应
大家好,今天在做微信小程序的商品详情页,商品的详情是图片集合,渲染完成后发现图片加载的很不自然,如下图所示:大家发现是不是比较模糊并且有压缩,不能达到预期效果。 解决方法如下: 样式设置宽度100%.img{ width: 100%;}添加属性 mode=”widthFix”<image class="img" src="../../images/hello.png" mode="widthF原创 2017-11-28 18:29:37 · 51269 阅读 · 3 评论