祈澈菇凉带你一起学小程序
关注
分享
扫一扫
帮助你了解IT技术前沿，通过面试、拿到offer、找到好工作！
祈澈菇凉
若有问题请联系微信号：wwwangting888
展开
-
小程序点击轮播图跳转到tab导航界面
需求：小程序点击轮播图跳转到tab导航界面，效果如下所示点击轮播图的图片，跳转到我的界面上先实现以下的代码，在以下的基础上，开始实现需求微信小程序底部导航栏https://www.jianshu.com/p/89a63dc99839微信小程序轮播图https://www.jianshu.com/p/bc3261557031...原创 2018-10-09 15:36:00 · 3871 阅读 · 3 评论 -
微信小程序模仿分类导航实现多个tab 页
微信小程序模仿分类导航实现多个tab 页功能：如图l5PsXOTCzU.gif话不多说，也不知道说啥，直接上代码：wxml：<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-curr...原创 2018-10-16 15:26:00 · 2542 阅读 · 0 评论 -
小程序云开发的开通流程及添加集合数据
随着小程序云开发的逐渐流行，一个工程师全栈小程序的能力也逐步变得越来越强大，作为一个前端工程师，现在也可以逐步脱离后台的帮助了，自己可以按照自己的想法来开发一款小程序比什么都重要。开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。云开发文档：https://developers.weixin.qq.com/miniprogr...原创 2018-10-20 23:20:00 · 2692 阅读 · 0 评论 -
微信小程序云开发数据导入(json格式)
上篇写道：小程序云开发的开通流程及添加集合数据：https://www.jianshu.com/p/17097e5c9ae4其中云开发选择数据库模块，添加集合里面有个一键导入json格式的功能，以下就是如何准备导入json格式，其实步骤很简单，适合初学者参考：1：新建一个json文件，将以下代码复制黏贴进去，放在桌面备用{ "_id": "xxxxxx", "age"...原创 2018-10-22 09:15:00 · 13686 阅读 · 4 评论 -
微信小程序云开发 初学者入门教程一
微信小程序云开发 初学者入门教程一（云开发环境搭建）本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxclo...原创 2018-10-23 20:56:00 · 6576 阅读 · 3 评论 -
微信小程序云开发 初学者入门教程二
微信小程序云开发 初学者入门教程二-前端操作数据库模块如何操作数据库，作为一名前端，如果对数据的知识不够熟悉也没关系，从现在开始好好学习就行，数据库的操作内容差不多涉及增删改查四大模块，花一些业余的时间在上面，也必有所得。数据库操作大多数需要用户openid,需要先配置好吧login云函数，如果已经配置好了，获取用户的openid之后，开始步骤：步骤...原创 2018-10-23 21:36:00 · 2138 阅读 · 0 评论 -
小程序中点击按钮跳转另外一个小程序
有很多时候，推广业务需要，会在一个小程序之中绑定另外一个小程序，形成小程序内部之间的生态系统，不但可以满足用户更多需求，增强小程序用户粘性，还可以有利于小程序大量引流。好了话不多说，从小程序A内跳转到小程序B内有一个前提条件：A和B必须被同一个公众号关联，打开同一公众号下关联的另一个小程序。（注：必须是同一公众号下，而非同个 open 账号下）两种方法...原创 2018-10-24 16:38:00 · 8439 阅读 · 0 评论 -
微信小程序云开发数据库操作一添加记录
微信小程序云开发 初学者入门教程二-前端操作数据库模块：https://www.jianshu.com/p/fb5be2e7f507中有写到对数据库的一些简单的操作处理，这篇主要是添加记录的一个小demo：数据库操作API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/referenc...原创 2018-10-24 17:09:00 · 15514 阅读 · 0 评论 -
微信小程序云开发数据库操作二查询记录
数据库操作参考API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/index.html官方文档解读：<!-- 查询记录 --> <view class="guide" wx:if="{{step === 4}}"> <...原创 2018-10-25 11:38:00 · 14798 阅读 · 0 评论 -
微信小程序云开发数据库操作更新记录
官方文档解读：<!-- 更新记录 --> <view class="guide" wx:if="{{step === 5}}"> <text class="headline">更新记录</text> <text class="p"&g原创 2018-10-27 08:27:00 · 20537 阅读 · 2 评论 -
微信小程序云开发数据库操作删除记录
官方文档解读： <!-- 删除记录 --> <view class="guide" wx:if="{{step === 6}}"> <text class="headline">删除记录</text> <text class="p"&原创 2018-10-28 17:09:00 · 11685 阅读 · 0 评论 -
微信web开发者工具无法打开的六种解决方法
上周微信开发者工具一直没有办法打开页面，本来打算写一篇关于小程序的文章，结果等了半天试了好几次都是这样的界面，临近下班就没有在意了，今天来打开电脑还是如此，怎么也打不开编辑界面。到最后，使用了一个奇葩的方法（见方法5）于是卸载了重新下载安装了一次，还是如此，在网上看了几篇教程，全部试了一遍，结果，像是踩了一地的坑，可得劲了，看来大家都遇到了...原创 2018-10-29 11:36:00 · 12574 阅读 · 1 评论 -
小程序新方法 open-type获取头像昵称
小程序自上线以来，官方一直在调整API，因此也出现了一批被废弃的接口，作为程序员的我们，此时此刻千万不能为这不断的变化而感到头疼，应当与时俱进，不断的更新自己的知识储备和应用技能。参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html以下是原公告：为优化用户体验，使用 wx.get...原创 2018-10-29 16:38:00 · 8400 阅读 · 1 评论 -
小程序open-data的圆形用户头像实现
wxml<view class="page-body-info "><open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data><open-data type="userNickName&qu原创 2018-10-29 16:49:00 · 1125 阅读 · 0 评论 -
小程序模拟调用本地json接口数据
把准备好的json数据渲染到前端界面，模拟在这里加载本地json数据。效果如下，能看到界面渲染的数据。1：新建一个data文件夹，在文件夹底下新建一个js文件，写好准备的json格式的数据：并且定义数据出口module.exports = { dataList: json}json:// 本地模拟json数据...原创 2018-10-30 17:05:00 · 1694 阅读 · 0 评论 -
小程序踩坑-http://xxx.com 不在以下 request 合法域名列表中
写了一串json数据，把json数据放在了阿里云服务器中，用 wx.request({ })方法来请求json数据的时候，遇到了一点小坑，http://xxx.com 不在以下 request 合法域名列表中。 wx.request({ url: 'http://pig.xxx.com/index.json', h...原创 2018-10-31 11:37:00 · 8480 阅读 · 2 评论 -
小程序模拟请求服务器json数据
上一篇小程序模拟调用本地json接口数据https://www.jianshu.com/p/20ecc78a1a3f那么，怎么请求服务器json数据？如果你是一枚前端，不会写后端接口的话又想测试数据，看自己写的效果的时候不要慌那么，把你的json放在服务器底下模拟请求服务器json数据即可步骤：1：先写好json数据放在桌面备用...原创 2018-10-31 14:49:00 · 2323 阅读 · 0 评论 -
小程序获取当前日期和时间点的方法
需求：获取系统当前年月日和时分秒，并且显示在界面。如下图所示：其实方法很简单，小程序API里面也有一定的介绍。1:准备好要获取时间的.js文件中加载util.js文件，文件目录中有默认的代码2：wxml:<view>{{time}}</view>3：在需要使用的js文件中，导入jsvar...原创 2018-11-01 11:31:00 · 10595 阅读 · 0 评论 -
微信小程序扫一扫的功能实现
突然接到了个小程序的项目，手上的管理后台终于可以放下一段时间了 ，算了一下，今年几乎都在写管理后台的几个项目，真心没有什么特别的进步，基本都是靠着组传代码，不断的重构，复用。接下来又可以回归到不断的去挑战新技术和新功能的阶段了，其实还蛮开心的。今天写一个关于微信小程序扫一扫的功能。小程序开发其实还是比较简单的，有完善的api文档和大多数前辈的网络博客助...原创 2018-12-05 10:45:00 · 17029 阅读 · 0 评论 -
微信小程序向左滑动删除操作（类仿微信、QQ）
上一个小程序的项目里面做过这个功能，当时没有记录下来，今天特意做了一个小的demo放在了github上面，下次在开发中遇到的话就可以直接拿下来代码复用了。效果很简单，类似于微信扣扣删除聊天栏的效果，想左滑动，出现删除按钮，点击即可删除。github地址：https://github.com/wangxiaoting666/swipeleft-delete...原创 2018-12-07 14:50:00 · 1640 阅读 · 0 评论 -
将本地小程序demo上传至github的五个命令
1:git init进入到上传的文件的目录下，使用命令初始化本地仓库git init2:git add .把本地文件添加到本地仓库暂存区,.的意思是把当前目录下所有的文件及子目录都添加管理，也可以把.换成相应的文件名git add .或git add [filename]3:git commit -m 'ting'...原创 2018-12-08 22:16:00 · 757 阅读 · 0 评论 -
小程序绑定事件跳转的三种方法
1:wx.navigateTo ;保留当前页面（有返回按钮)效果：demo示例：wxml:<view bindtap="bindViewTap" class="up"> 我要绑定事件来跳转了</view>js:Page({ data: { }, //事件处理函数 bindVie...原创 2018-12-09 22:05:00 · 5181 阅读 · 0 评论 -
小程序最新标准授权登录流程+逻辑
小程序自上线以来，官方一直在调整API，因此也出现了一批被废弃的接口，作为程序员的我们，此时此刻千万不能为这不断的变化而感到头疼，应当与时俱进，不断的更新自己的知识储备和应用技能。新旧对比：旧的方法：旧方法wx.getUserInfo按照用户登录时，弹出需要授权的弹窗，用户点击授权后才能使用。新方法：Open-data的灵活使用方法，...原创 2018-12-10 09:19:00 · 1995 阅读 · 0 评论 -
微信小程序开发中如何实现侧边栏的滑动效果？
原文链接：https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ1概述在手机应用的开发中侧边栏滑动是很常见的功能，当然在小程序中也不会例外，很多特效还没有成熟案例，只能原生重写，所以今天在网上为大家收集整理来几个非常漂亮的侧边栏特效。今天我们就分享这样的小教程。希望对大家有所帮助。快去拿个小板凳，坐等更多更新注意：如若需要请联系微信geekxz2wxml...转载 2018-05-07 13:33:44 · 1591 阅读 · 0 评论 -
经典小程序源码及其下载地址
小程序开发环境搭建好之后，https://www.jianshu.com/p/0ff8c3b2f59f，开始写代码了，对于一个对小程序了解程度半生不熟的人来说无从下手，看视频吧又太浪费时间了，那么只要有一定的前端基础，再结合一些别人的开源代码，很快就能开发出自己的产品了，在网上找了一些经典的小程序开源代码，总结了一下，留着备用。1：我要圣诞帽项目地址：https://github.com/j...原创 2018-05-18 14:17:27 · 12173 阅读 · 5 评论 -
【组件】微信小程序input搜索框的实现
开发小程序的过程，是一个学习知识，解决问题的过程，每当实现了一个需求，总会有很大的成就感，每天记录一个开发过程中的细节。实现效果如下：图片.png官方参考链接：https://developers.weixin.qq.com/miniprogram/dev/component/input.htmlwxml: <view class='page_row' bindta...原创 2018-05-18 14:18:50 · 26064 阅读 · 1 评论 -
如何给小程序页面加载一张背景图片
我们知道，在PC端，想在一个页面插入一张背景图，只需要如下属性即可。background-image: url("../images/photo.png"); 在小程序里面，如此做法就行不通了，图片不但不会显示而且还会报错了pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/&g...原创 2018-05-28 10:48:41 · 14994 阅读 · 11 评论 -
经典小程序源码及其下载地址
小程序开发环境搭建好之后，https://www.jianshu.com/p/0ff8c3b2f59f，开始写代码了，对于一个对小程序了解程度半生不熟的人来说无从下手，看视频吧又太浪费时间了，那么只要有一定的前端基础，再结合一些别人的开源代码，很快就能开发出自己的产品了，在网上找了一些经典的小程序开源代码，总结了一下，留着备用。1：我要圣诞帽项目地址：https://github.com/jass...原创 2018-05-28 10:50:32 · 9848 阅读 · 1 评论 -
基于mpvue的小程序项目搭建的步骤
mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，按官网说可以达到小程序与H5界面使用一套代码。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为 H5，mpvue 将是十分契合的一种解决方案。Mpvue官网：http://mpvue.com/...原创 2018-06-20 16:50:44 · 2921 阅读 · 0 评论 -
微信小程序图片使用示例
小程序官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html1：加载本地文件夹图片 <image src="/image/pig.jpg" mode="aspectFill"> </image> 2:加载服务...原创 2018-06-21 10:09:22 · 1082 阅读 · 0 评论 -
如何给小程序页面加载一张背景图片
我们知道，在PC端，想在一个页面插入一张背景图，只需要如下属性即可。background-image: url("../images/photo.png"); 在小程序里面，如此做法就行不通了，图片不但不会显示而且还会报错了pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者...原创 2018-06-21 10:10:48 · 14144 阅读 · 0 评论 -
经典小程序源码及其下载地址
小程序开发环境搭建好之后，https://www.jianshu.com/p/0ff8c3b2f59f，开始写代码了，对于一个对小程序了解程度半生不熟的人来说无从下手，看视频吧又太浪费时间了，那么只要有一定的前端基础，再结合一些别人的开源代码，很快就能开发出自己的产品了，在网上找了一些经典的小程序开源代码，总结了一下，留着备用。1：我要圣诞帽项目地址：h...原创 2018-06-21 10:12:37 · 2342 阅读 · 0 评论 -
微信小程序踩坑- tabBar.list[3].selectedIconPath 大小超过 40kb
重新启动微信小程序编辑器的时候遇到了这样的一个问题：tabBar.list[3].selectedIconPath 大小超过 40kb微信小程序开发的过程之中总会出现这样或者那样的错误，需要我们耐心的去寻找，仔细查看和百度查询之后，发现了原因：其中有一张图片，替换的时候没有注意图片大小，导致项目无法预览。参考了一下微信小程序的官方API，查看tabBar list定义说明：也就是说选中时的图片路径...原创 2018-06-29 10:45:02 · 8749 阅读 · 1 评论 -
小程序踩坑记- tabBar.list[3].selectedIconPath 大小超过 40kb
重新启动微信小程序编辑器的时候遇到了这样的一个问题：tabBar.list[3].selectedIconPath 大小超过 40kb微信小程序开发的过程之中总会出现这样或者那样的错误，需要我们耐心的去寻找，仔细查看和百度查询之后，发现了原因：其中有一张图片，替换的时候没有注意图片大小，导致项目无法预览。参考了一下微信小程序的官方API，查看tabBar lis...原创 2018-07-02 12:22:05 · 6740 阅读 · 2 评论 -
微信小程序常见的UI框架/组件库总结
想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不乏一些优秀好用的框架/组件库。1：WeUI 小程序–使用教程https://weui.io/官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感...原创 2018-07-02 12:23:12 · 43887 阅读 · 14 评论 -
微信小程序实现运动步数排行（可删除）
wxml<!-- 向左滑动删除功能 --><view class="item-box"> <view class="items"> <view wx:for="{{list}}" wx:key="{{index}}" class="item"&原创 2018-07-02 12:24:34 · 5074 阅读 · 7 评论 -
全网最全的小程序学习资料和文章，看这篇就够了
近期热门微信小程序demo源码下载汇总：https://www.jianshu.com/p/0ebcb8958346微信小程序demo、小程序源码资源下载更新/10-11月：https://www.jianshu.com/p/db224ed020ce微信小程序学习资料：https://www.jianshu.com/p/336131ea0044微信小程序...原创 2018-07-10 17:26:35 · 768 阅读 · 0 评论 -
微信小程序实现一个简单的表格
wxml<view class="table"> <view class="tr bg-w"> <view class="th">SPB</view> <view class="th">DPB</view> <view c原创 2018-07-12 15:08:09 · 7619 阅读 · 2 评论 -
微信小程序实现tab页面切换功能
wxml<scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">...原创 2018-07-12 15:08:45 · 3758 阅读 · 1 评论 -
微信小程序简单常见首页demo
wxml<view class='index-contier'> <view class="index-left"> <view>电池剩余</view> <view>62%</view> </view> <view class原创 2018-07-12 15:09:24 · 5795 阅读 · 0 评论