关注
分享
微信小程序入门教程，以实战学习UI框架，界面布局，数据交互，刷新加载，搜索，本地缓存等功能，后端服务器已经关闭了，源码也提供了，感兴趣的自己搭，springboot搭简答的服务还是很快的。
ITDragon龙
你的背景是我前进的动力,https://github.com/ITDragonBlog
展开
-
微信小程序『侧边栏滑动』特效
侧边栏滑动是很常见的功能，但是小程序出来不久，很多特效还没有成熟案例，只能原生重写，所以今天为大家带来4个漂亮的侧边栏特效~~侧边栏特效一先看效果：点击按钮侧边滑动wxml:view class="page"> view class="page-bottom"> view class="page-content"> vi转载 2017-05-02 11:15:23 · 6367 阅读 · 2 评论 -
微信小程序入门八头像上传
上一章介绍了微信小程序入门七登录注册，这章谈谈头像的选择，上传，预览以及后台服务端代码的功能。本章节主要用的知识点有1.action-sheet 底部弹出可选菜单组件2. wx.uploadFile 将本地资源上传到服务器3. wx.chooseImage从本地相册选择图片或使用相机拍照。4.wx.previewImage预览图片效果图：wxml代码：<原创 2017-04-08 23:30:28 · 14245 阅读 · 9 评论 -
微信小程序入门七登录注册
上一章介绍了微信小程序入门六本地缓存和搜索，这章介绍小程序的登录注册页面。主要有表单的验证，错误信息的提示，form表单的取值，get / post 请求 ，反馈交互提示框，页面跳转 以及 页面UI。效果图：注册页面：基本内容有账号，密码，确认密码，也可以添加 是否同意条款wxml源码：1. 顶部提示错误信息2. 输入内容长度显示3. 点击注册进行表单验证4. 存在问题：输入框focus 无效果<!--变量说明：s原创 2017-04-01 14:26:34 · 34285 阅读 · 22 评论 -
微信小程序入门六本地缓存和搜索
上一章介绍了上拉加载下拉刷新的功能这章谈谈搜索和本地缓存。主要功能有，点击搜索显示搜索输入框同时显示搜索历史记录，点击右侧搜索按钮搜索数据同时保存到搜索历史记录中，清除历史记录等功能。原创 2017-03-14 15:53:49 · 23060 阅读 · 30 评论 -
微信小程序入门五上滑加载下拉刷新
之前谈到文章列表的数据加载，是一次性全部加载，这样是不友好的。这章介绍加载和刷新。效果图：先介绍在IDE中，怎么模拟上滑这个操作。开始我是用鼠标点击文章列表，然后先上移动。结果一直没有结果，以为是代码写的有问题。其实并不是，上滑，下拉这个操作，只需要用鼠标的滚轮即可。首先，我们先完成上滑和下拉这个功能。list.wxml文件：原创 2017-03-11 11:36:03 · 29667 阅读 · 8 评论 -
微信小程序入门四详情页面
前三章基本完成文章列表的界面和数据加载，这章介绍文章详情页面。有之前的知识储蓄，这章就容易多了。首先是服务端代码，通过id查询数据：https://www.itit123.cn/itdragon/findOne的controller层 源码@RequestMapping(value="findOne") @ResponseBody public Object edit(@Reques原创 2017-03-09 22:05:41 · 17684 阅读 · 7 评论 -
微信小程序入门三request请求
上一章讲了微信小程序的UI框架 weui-wxss 这章就谈谈微信小程序的数据交互，wx.request 方法。request的请求发起的是https的请求，如果你的服务器是http站点，那需要做配置。可以参考文章：http转https教程如果你没有服务端，又想学习微信小程序，可以调用我的接口，文章中会详细介绍使用方法。原创 2017-03-08 21:38:00 · 42073 阅读 · 2 评论 -
微信小程序入门二UI框架
上一章节，谈了文章列表的结构搭建，现在要给它披上嫁衣，我选择的是weui-wxss这款官方提供的UI框架。下一章谈谈如何使用 wx.request 动态获取数据weui-wxss是微信官方提供的ui框架，用起来也很方便（copy）。下载地址：https://github.com/weui/weui-wxss第一步：需要把下载的内容copy到项目中，主要是dist目录下的style目原创 2017-03-06 22:49:23 · 23518 阅读 · 3 评论 -
微信小程序入门一文章列表
这章内容先讲解 如何使用 template 和 wx:for 完成文章列表的骨架。然后下章谈谈 如何使用weui-wxss UI框架美化页面。微信小程序官网的api介绍很详细，https://mp.weixin.qq.com/debug/wxadoc/dev/ 。但这也让我有些无从下手。所以我打算从实战中学习它。在看这篇文章前，先请大家，大致了解微信小程序文档。第一步，先搭好骨架，创建原创 2017-03-06 12:48:14 · 13867 阅读 · 1 评论