https://github.com/xiaohuoni

首先，说说小程序开发的完结，基本上的东西，在我们前面的章节中，都已经提到过了。我觉得掌握这些内容，足够你开始开发小程序了。接下来，就要我们根据实际的项目需求去实现了，如果遇到教程中没有提到的东西，可以查阅官方的API，也可以在公众号后台联系我，或者联系我本人微信号，联系方式在左侧的侧边栏里面有。源码在码云https://git.oschina.net/x

我一直在考虑这个系列的第一个教程该从什么框架开始写起。是我自己入门时候学习的angularjs，还是大部分web前端入门的jquery？看过我的教程的朋友应该对我的学习方式有一点点的了解。我一直觉得学习前端没有那么多东西需要理解的，只要先记住用法，用的多了，慢慢的就能理解了。我不敢说自己的学习方式是最好的，但是如果此时你刚好没有更好的选择，不妨考虑一下我的方式。对于自学，我还是

之前公众号开发可能都是运维人员提供的appkey，所以不少的朋友，对微信的后台管理系统不熟悉。借由小程序提供个人账号申请，在这里专门写一篇图文教程。虽然微信对个人小程序做了诸多限制，但是作为入门的开发权限还是基本够用的。首先，要注册个人微信小程序1、你要准备一个邮箱，并且这个邮箱没有注册过个人微信，或者公众号和服务号（没有限制邮箱可以注册一个qq邮箱，但要注意，新注册的qq三天内没

这节课我们来说说微信提供的小程序开发工具。一、首先我们从官网下载微信开发者工具，注意，不要下到旧版本的公众号调试工具。之前安装过web开发工具的朋友，可能会遇到一个奇怪的问题，明明下载的安装包是最新的，安装完打开的却是旧版的界面。这时候只要把旧版的卸载之后，把所有的文件都删除重新安装就可以了。从微信公众平台技术文档进入的微信web开发者工具的下载地址是错误的，要从小程序的文档进入的才是正确的。

在网上好多人，喜欢找别人写好的一些线上的项目源码，比较完整的。想着学习的更加实用和全面一点。这无可厚非，但是，我发现有好多人并不是很在意官方提供的demo。比如ionic的tabs demo就没有什么人看。我个人觉得既然官方把这样的demo推到了入门的地位，那必然是有它的道理的。所以我很喜欢从官方的demo开始学习，因为它足够简单，足够让我明白它的用法和逻辑。上一节课，我们已经

说明：为了便于理解和分析，此处我们全部使用块级元素div来进行说明。因为要将这个文档应用于博客，所以所有的样式写在style中。标题一二三不代表这些概念同级，仅仅代表本文提到的顺序。关于盒式布局的定义和说明，请自行搜索了解，此处不做详细说明。我这里引入几个概念，是我自己理解所得，不权威，但有利于学习和理解。一、块block我把页面中宽度占满屏幕，高度任意的元素（或者区域）成为块。不管是

这一小节作为第一章的最后一节，其实关于单位的文章，在博客上倒是挺多的。我一直在想，我是不是有必要再写这一节，还是给大家提供一些阅读链接。因为关于单位的定义都是比较官方的。没什么好讨论的，我这里做一个汇总和简单的说明吧。首先本文只以移动设备为例说明。本文摘要：设计师以iphone6为标准出设计稿的话，1rpx=0.5px=1物理像素。Photoshop里面量出来的尺寸为物理像素点。所

本章我们将以一个实战项目为主要内容，穿插讲解小程序的各种概念。因为没有UI和后端，所以，我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。最终我们将会完成一个类似下图的小程序。（大家可以搜索小程序，豆瓣评分，线上已经有了。）首先我们来分析一下这个小程序，主要分为电影和个人中心（个人中心我们放后面讨论）。电影主要分为近期上映、热门电影、电视剧、综艺四个模块。（后续看公

上一节课，有朋友反映我最后写的操作步骤太琐碎了。其实我只是想表达一下我自己的思想过程，从分析方法到关注点。我觉得这对于新手还是有点作用的。如果你不知道怎么入手解决一个问题，不放跟着我的节奏，进去试试。言归正传，我们接下来编写，电影卡片的模板。还是一样的先分析界面，这个界面是上下结构的，最上方一张图片，中间一行文字，下面一个stars模板（我们上一节课编写的内容）我们

今天我们来编写整个豆瓣评分的首页界面框架。我们今天主要讲解界面的编写，目的是再一次加强对模板的理解。

上一节课，我们已经基本完成了，首页的界面编写。逻辑暂时不理会。但是我们用于展示页面绑定的是我们本地的假数据。接下来我们就来获取真正的数据来展示页面。绑定假数据编写页面算是前段最早做的一件事情吧。特别是在前后端同步开发，联合测试的时候。服务端会先输出接口文档，然后前后端根据接口文档同步开发，最后联合测试。这就需要前段本地编写大量的假数据。如果我们每个页面的假数据的单独

上一节课最后，我们遇到了一个警告。说我们太过频繁的调用serData了，因为我们这个页面的三部分数据是通过三个接口获取的。所以我们分别在三个接口返回的时候调用了数据绑定。但是过于频繁的调用setData很容易引起性能问题。要理解为什么会引发性能问题，我们要先看一下setData的工作原理。https://mp.weixin.qq.com/debug/wxadoc/dev

首先我们新建一个界面，还记得新建界面的快捷方式吗？ 在app.json的pages里面，新增”pages/user/user” 即 "pages":[ "pages/index/index", "pages/logs/logs", "pages/user/user" ], ctrl+s保存。小程序在检测到没有user目录的时候，就会自动创建相关的文件。

今天我们接着编写个人中心页面。 首先我们编辑上半部分的内容。 部分内容在之前的课程中已经有涉及了， 所以这里有写部分直接上代码咯。 编写页面的基本元素user.wxml <view class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></

继上次教程结束之后，我们的小程序已经完成到如下程度了。 如果你是一个零基础的开发，只要跟着这个教程一步一步完成的，你就能完成这样的界面优美是不是很容易啊。 但是，完成前两章，我们只涉及到页面的编写，很少涉及到页面的功能，那么这一章，我们的主要任务就是编写一些简单的页面逻辑。 我们要实现的是点击上图中的更多，跳转到查看更多页面。 首先我们还是先创建查看更多页面，在json文件中，直接添

今天就直入主题吧！调试技巧这里讲一个调试的技巧，因为这个页面是我们点击了首页的更多才进入的，并且他需要携带参数。 所以我们在左侧工具里面 注意点击的是图中红色框框标记的位置，这是一个自定义按钮。 写上路劲和参数就可以了，这样每次启动就是直接携带参数的进入这个页面了。这样也不用反复去修改json文件。上拉加载首先我们先编写一下moviemore的页面。 在头部引入搜索按钮，记得在wxs

继前一篇文章，我们已经实现了小程序中的上拉加载和下拉刷新， 如果用户网络较差的情况下，或者服务端返回处理的情况下， 那么我们的页面在这段时间内没有等待提示。 或者服务端返回数据之后，我们的页面又好像突然之间出现的， 这整个过程中的用户体验并不是很好，不理解什么是用户体验的， 那可以换一种方式，就是说整个过程让使用者觉得并不是很舒服。 所以通常在请求发起到请求响应的这个过程中，我们会加入l

由于获取详情那些接口的豆瓣API，都有权限限制。 所以，电影详情页面和电影搜索页面我们就不做了。 接下来我们来看一些还蛮实用和有趣的小功能。点击查看大图wx.previewImage我们在moviecard模板中加入点击事件。 如图所示，详细的在前面的章节中已经讲解过了。 然后在index.js中加入点击查看大图的函数 保存预览，点击首页的电影的图片。 我们可以

继上一节课，我们已经简要说明了将图片保存到相册的流程和方法。 这节课我们围绕这个问题，展开讲解获取用户权限，将网络图片下载到临时文件，最后保存到相册。获取用户权限 wx.authorize 使用方法如下：// 可以通过 wx.getSetting 先查询一下用户是否授权了wx.getSetting({ success(res) { if (!res.aut