如何入门微信小程序开发，有哪些学习资料？

1、小程序开发文档

2、小程序设计指南

3、微信开发者工具

4、 普通小程序开发者说明

5、小游戏小程序开发说明

6、小程序社区

「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有 AppID 这个月就与小程序无缘了，庆幸的是微信这两天发布了正式版开发者工具，无需内测邀请也可以尝鲜了。

因此也就有了我与「小程序」的初体验，而我的感受只有一个字——爽！

在知名同性交友网站 Github 上，「小程序」的 Demo 不少，但是大多只是简单的 API 演示，有的甚至直接把页面数据写在了 json 文件里（分明有网络请求 API）。我想体验的是能够将服务端和小程序端无缝连接起来（体验够爽）的项目。最终，我选择了腾讯云官方推出的「小相册」Demo。

「小相册」主要实现了以下功能：

• 列出对象存储 COS 中的图片列表。
• 点击左上角上传图片图标，可以调用相机拍照或从手机相册选择图片，并将选中的图片上传到 对象存储 COS 中。
• 轻按任意图片，可进入全屏图片预览模式，并可左右滑动切换预览图片。
• 长按任意图片，可将其保存到本地，或从 对象存储 COS 中删除。

你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。

如果你已经有腾讯云的服务器和域名，并配置好了 https，那么可以跳过第 4-6 步。

在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名申请一个证书。如果没有域名，请先注册一个。由于我们没有收到内测，也就暂时不用登录微信公众平台配置通信域名了。

微信小程序云端示例镜像中，已经部署好了 Nginx，但是还需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。

请将红框部分换成自己的域名和证书，并且将 proxy_pass 设置为 Node.js 监听的端口，我的是 9993。

配置完成后，重新加载配置文件并且重启 Nginx。

sudo service nginx reload
sudo service nginx restart

我们还需要添加域名记录，将域名解析到我们的云服务器上，这样才可以使用域名进行 https 服务。在腾讯云注册的域名，可以直接使用云解析控制台来添加主机记录，直接选择上面购买的 CVM。

解析生效后，我们的域名就支持 https 访问了。

由于我们希望实现动静分离的架构，所以选择把「小相册」的图片资源是存储在 COS 上的。要使用 COS 服务，需要登录 COS 管理控制台，然后在其中完成以下操作。

1. 点击创建 Bucket。会要求选择所属项目，填写相应名称。这里，我们只需要填上自己喜欢的 Bucket 名称即可。
2. 然后在 Bucket 列表中，点击刚刚创建的 Bucket。然后在新页面点击“获取API密钥”。 弹出的页面中包括了我们所需要的三个信息：唯一的 APP ID，一对SecretID和SecretKey（用于调用 COS API）。保管好这些信息，我们在稍后会用到。
3. 最后，在新的 Bucket 容器中创建文件夹，命名为photos。这点后面我们也会提到。

在官方提供的镜像中，小相册示例的 Node 服务代码已部署在目录 /data/release/qcloud-applet-album下。进入该目录，如果是你自己的服务器，请进入相应的文件夹。

cd /data/release/qcloud-applet-album

在该目录下，有一个名为 config.js 的配置文件（如下所示），按注释修改对应的 COS 配置：

module.exports = {
    // Node 监听的端口号
    port: '9993',
    ROUTE_BASE_PATH: '/applet',

    cosAppId: '填写开通 COS 时分配的 APP ID',
    cosSecretId: '填写密钥 SecretID',
    cosSecretKey: '填写密钥 SecretKey',
    cosFileBucket: '填写创建的公有读私有写的bucket名称',
};

另外，cd ./routes/album/handlers，修改 list.js，将 const listPath 的值修改为你的Bucket 下的图片存储路径。如果是根目录，则修改为 '/'。当前服务端的代码中将该值设置为了 '/photos' ，如果你在第七步中没有创建该目录，则无法调试成功。

小相册示例使用 pm2 管理 Node 进程，执行以下命令启动 node 服务：

pm2 start process.json

接下来，在微信 web 开发者工具打开「小相册」项目，并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。

将蓝色框内的内容修改为自己的域名

然后点击调试，即可打开小相册Demo开始体验。

最后提示一点，截止目前为止，微信小程序提供的上传和下载 API 无法在调试工具中正常工作，需要用手机微信扫码预览体验。但是由于没有内测资格，我们暂时是没办法体验了。

嗯，就这点不够爽，没有内测邀请。

我的同事还写了另外3个demo的「小程序教程」，大家也可以看看。

http://weixin.qq.com/r/hXXk-BjESUU2rVyf9yCX (二维码自动识别)

「微信小程序」剖析（一）：运行机制

本文从‘微信web开发者工具’ IDE 中的代码下手，对「微信小程序」如何与 IDE 之前进行交互做了详细的介绍。并介绍了 IDE 如何将 WXML 代码和 WXSS 转换为对应的 HTML 和 CSS ，以及如何打包的一些基本情况：日期命名的wx文件、1M 大小的文件限制、APP 上传地址。

「微信小程序」剖析（二）：框架原理

文章对 MINA 框架进行中的 APP 与函数间的关系进行了分析。从 WX 标签到 Virtual DOM 生成的方法，以及程序如何调用这个方法来生成 Virtual Dom 。并由其中的 exparser 部分来推理出，小程序由 WebView 和 Native 两部分组成的机制。以及在开发时、运行时，两种不同的 JavaScript 文件机制。

「微信小程序」剖析（三）：让小程序运行在Chrome浏览器上

文章展示了如何在普通的浏览器上运行「微信小程序」应用。并使用 Gulp 结合‘微信web开发者工具’中的vendor文件 wcc 和 wcsc 来构建自动化的转化 WXML 和 WXSS 为 HTML 和 CSS，从而搭建独立于开发者工具的开发环境。

「微信小程序」剖析（四）：原生的实时DOM转Virtual DOM

本文介绍了‘微信web开发者工具’中所使用的 WCC 文件的一些技术原理。即它可以将 WXML 文件转化为基于 JSON 的 Virtual DOM。以及 Virtual DOM如何去解析这个 JSON 文件，并在这个过程中进行数据绑定和函数绑定。

「微信小程序」剖析（五）：创建一个兼容「微信小程序」的Web框架

本文介绍了如何创建一个可以兼容「微信小程序」的Web框架。这个框架可以将简单的 HTML 转为 Virtual DOM，并在 JSON 时将数据填充进去。还介绍了简单的函数绑定等等。

微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ...

前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S；

1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461

2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599

3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html

4：设计资源下载：https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载

5：微信小程序公测接入指南：http://www.wxapp-union.com/portal.php?mod=view&aid=259

6：微信小程序支付文档：https://pay.weixin.qq.com/wiki/d ... pi.php?chapter=3_1#

7：新手入门宝典：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1989

8：免费视频：http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=37&filter=typeid&typeid=7

9：实战宝典：http://www.wxapp-union.com/special/solution.html

10：从注册到上线系列：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=4375

11：精品专题：

微信小游戏集合：教程+资讯+Demo

小程序图表功能 - 小程序社区

小程序支付指南 - 小程序社区

小程序商城开发 - 小程序社区

导航系列：

1-6月微信小程序导航：官方文档+精品教程+demo集合

7月微信小程序导航：官方文档+精品教程+demo集合

8月微信小程序导航：官方文档+精品教程+demo集合

9月微信小程序导航：官方文档+精品教程+demo集合

10月微信小程序导航：官方文档+精品教程+demo集合

11月微信小程序导航：官方文档+精品教程+demo集合

特别说明：

1：不了解微信小程序的同学，请先搜索一下微信小程序究竟是什么，有哪些特性；

2：有htmlcssjs基础者可以直接进入实践，边实践边学习，尤其是有react与vue基础的；

3：微信小程序不需要特别申请（认证或账号）即可开始使用工具开发；

4：微信小程序是需要后台的，不限定任何语言，提供小程序接口要求的json格式即可；

5：初次开发者，推荐阅读新手跳坑系列，有几个坑，先了解一下，遇到时便可以查阅了；

6：如有作者不希望自己的作品被放置在这里，请联系我删除；

7：如果遇到问题，推荐多使用搜索，对帖子及文章进行搜索；

微信小程序大事记编年史：旨在让大家独立去思考变化的意义：（日期非精确，仅为大致日期）

12月21日：微信小程序开放新增功能：分享，自定义模板消息，客服消息，扫一扫；

12月30日：微信开放带参数二维码，允许已上线的小程序制作进入任意页面的二维码；

1月9日：微信开放微信小程序；

1月22日：微信增加社交分类，允许提交社交类小程序，但是必须具备社交相关的资质证书；

1月25日：微信开始允许直播类小程序上线，上线的有腾讯now直播，企鹅电竞等；

2月1日：微信开放微信搜索，在微信搜索结果内将可以直接展示小程序，并且位置是第一位；但是仍需全名搜搜方可显示；

2月10日，微信开放部分关键词的模糊搜索显示，包括表情、美食、音乐、电影、读书、日记、计算、股票、日历、电商、酒店、出行、汽车、旅行、快递等领域；

2月19日：微信开发者社区从封闭状态，改为开放状态，任何人均可浏览；

2月23日：摩拜单车宣布原二维码也可以适用于小程序，使用微信扫一扫扫描摩拜单车二维码将直接打开小程序；

3月2日：微信公开课征集小程序案例

3月5日：马化腾回记者问中提出：小程序是面向未来的产品：马化腾：微信为什么力推小程序？微信公众号会推付费内容吗？ ...

3月27日，微信官方宣传六大变化：快讯：公众号和小程序 新增三种连接方式，可使用原有二维码，与APP打通 ...

3月27日：微信官方宣传支持个人注册：微信小程序-快讯：小程序面向个人开发者开放-

3月30日：附近的小程序：微信小程序-官方：“附近的小程序”将开放，小程序连接更多线下场景

4月14日：微信开放长按识别小程序二维码功能；

4月17 日：小程序开放新能力；第三方平台，代码包大小限制扩大到2M

4月18日：小程序推出全新小程序码

预览图片API可以打开小程序码（小程序互跳）

4月20日：今天起，公众号可以关联不同主体的小程序了

4月21日：公众号群发文章支持添加小程序-

4月25日：最新消息：公众号和小程序名称支持同主体复用

4月27日：公众平台新增快速创建小程序

4月28日：甩掉流程，公众号可以快速注册新的小程序了

5月8日：开放群ID接口，可获取群ID和群名称

5月10日：开放“附近小程序”

5月12日：上线“小程序数据助手”，支持实时查询小程序数据

5月19日：新增页面内转发功能；支持接入微信运动步数数据等

5月27日：小程序码生成数量无限制；用户画像支持分析小程序数据

6月1日：公众号群发文章通过文字或图片链接打开小程序功能

6月3日：小程序新增推广功能，支持自定义关键词

6月14日：小程序新增“星标”功能

6月21日：新增小程序打开小程序的能力

7月6日：公众平台新增小程序运维中心等功能

7月12日：小程序升级页面体验相关能力

7月21日：小程序新增状态信息展示等能力

7月26日：小程序升级用户信息和UnionID的获取方式

8月3日：小程序新增新入口-微信群

8月5日：一个小程序可关联最多50个公众号

8月18日：附近的小程序新增餐饮类目筛选，且门店小程序支持外显视频或卡券标签

8月19日：小程序分享等能力升级

8月25日：手机号快速填写及会员卡开卡组件开放

8月31日：小程序开发工具全新上线

9月9日：微信搜索框新增小程序快捷入口

10月13日：升级录音、拍摄、音视频播放等多媒体能力

11月3日：小程序内嵌网页能力开放！小程序可关联500个公众号！

11月10日：小程序可通过公众号底部广告位推广、“小程序开发助手”发布、开发者工具内腾讯云服务支持PHP语言；

11月16日：支持创建微信小店小程序

2018年1月25日：小程序支持打开移动应用

2018年1月29日：【小程序新功能】收款通知正式上线

2018年2月2日：小程序开发工具支持真机调试

2018年3月14日：小程序开放插件功能

2018年3月30日：小程序内测广告组件与新增快速创建能力等

2018年4月20日：微信服务直达开放新类目内测

2018年4月26日：小游戏新增激励式视频广告组件、防沉迷接口等能力

2018年5月18日：分享功能调整及小程序组件更新

2018年5月19日：App打开小程序及内容安全等能力开放

2018年6月15日：小程序基础能力及开发者工具升级

2018年6月19日：小程序分包加载功能升级，新增性能监控

2018年6月22日：小程序插件能力升级：开放插件登录能力

2018年7月12日：小程序广告组件全量开放

小程序实战教程

小程序Demo集合

插件/工具更新：

微信小程序框架wepy - 滑动删除插件

微信小程序库--签名解密（php）

微信小程序图片剪切

微信小程序之自动登陆PHP源码

微信小程序后端接口：登陆，检验，数据解密（go语言）

微信小程序的异步请求

自动生成svg雪碧图，支持微信小程序rpx单位

微信小程序开发脚手架

微信小程序 手势事件

微信小程序滚动插件 xHSwiper

微信小程序脚手架

将分享卡片自动生成页面路径的的二维码的微信机器人

--------

特殊合集：

微信小程序特殊效果合集第一期

微信小程序特殊效果合集第二期

微信小程序优秀教程及文章合集第一期

微信小程序项目总结系列：作者：Tong_T，博客地址：Tong_T的博客 - 博客频道 - CSDN.NET

微信小程序项目总结《一》序言、准备工作、项目构架

微信小程序项目总结《二》配置、首页面开发

微信小程序项目总结《三》阅读首页、阅读详情开发

微信小程序项目总结《四》电影首页、电影更多开发

微信小程序项目总结《五》电影首页、电影更多开发

微信小程序项目总结《六》项目结束和补充总结

--------

跳坑系列更新：

跳坑《一百七十六》蓝牙API使用指南-

跳坑《一百七十七》场景值系统使用

跳坑《一百七十八》基础库及兼容低版本基础库说明

跳坑《一百七十九》收货地址wx.chooseAddress使用说明-

跳坑《一百八十》剪贴板API使用说明

跳坑《一百三十二》用户未授权获取登录信息的替代方法

跳坑《一百六十一》wx.saveFile文件保存API使用指南

跳坑《一百八十二》arrayBuffer与base64互转接口-

跳坑《一百八十一》设置API：wx.openSetting使用说明-

跳坑《一百八十三》三轴加速度计使用及调试说明

跳坑《一百八十四》换取session_key报40029错误-

跳坑《一百八十五》encryptedData数据解密41003错误

跳坑《一百八十六》支付签名校验失败-

跳坑《一百八十七》MAP地图markers使用问题相关说明-

跳坑《一百八十八》MAP地图controls控件使用问题

跳坑《一百八十九》Uncaught Dom limit exceeded报错

--------

开发前必读简要 基于大量无效开发，无法上线的案例，所以开发前部分知识十分重要；| 链接

微信小程序个人注册简单步骤 打开http://mp.weixin.qq.com，点击右上角立即注册，进入小程序注册| 链接

微信开发者工具【项目】详解 为什么我的小程序通过审核，但是搜索不到呢？原因是必须在后台内点击发布，才会发布；| 链接

小程序开发上线（发布）步骤 这篇帖子将简单的介绍基本的步骤，以便新手们建立一个基本的印象；| 链接

从零开始：微信小程序新手入门宝典 为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里； | 链接

安卓或ios开发者学习小程序指南 我发现很多安卓或是ios开发者，学习了小程序的开发，并且很顺利。 | 链接

WXSS/CSS相关知识说明 为了更适合开发微信小程序，WXSS对 CSS 进行了扩充以及修改。| 链接

使用官方WEUI-WXSS相关知识 使用官方 UI 简化设计开发流程，如果你的项目对 UI 定制要求不是很高的话。|链接

常用api域名配置列表及免费API集合 免费API大全以及后台配置域名的方法| 链接

一键添加小程序所有文件jswxmlwxssjson升级到新版后可以“一键”新建小程序4个常用文件，不用一个一个的去建，方便多了！| 链接

常用快捷键总结 (mac系统/win系统)1: opt + shift + f : 代码格式化2: cmd + [, cmd+ ]代码行缩进。。。| 链接

让他人体验自己的小程序 怎么让别人体验自己的小程序啊，我认为这个将是很多朋友即将遇到的问题| 链接

官方社区使用指南 为了让大家解决问题更有效率，官方社区是必不可缺的。| 链接

如何让微信小程序更容易审核通过 微信小程序审核不通过，有很多原因，其中最明显的一点就是：服务类目问题；| 链接

审核提供测试账号 自有账号体系 提交审核怎么提供测试账号| 链接

关于如何将大神demo应用于自己项目 把大神们造轮子的逻辑应用于我们项目的相应组件上，这就是基本思路，有思路才能优雅 | 链接

使用本地服务器进行调试 怎么请求本地网络啊 IP形式的网络？怎么访问本地架设的服务器？| 链接

开发者工具无法登录账号 最近开始频发无法登录账号的问题，诸如request https 404报错 登录态失效等 | 链接

小程序敏感词汇过滤问题 用户需要发表内容的小程序，需要设定关键词过滤，屏蔽掉政策不允许的内容：| 链接

公众号关联微信小程序简单方法 很多人可能会问，公众号如何添加微信小程序呢？步骤很简单： 1：https://mp.weixin.q | 链接

无法长按识别及无法分享到朋友圈的替代方法 看到@327674413 同学发了一个花样二维码，我看了之后，顿时来了一个灵感。。。 | 链接

使用PHP/thinkphp后端问题 后端部分跟小程序的前端部分是分离的 | 链接

使用java后端问题说明 请求数据方面没有区别，只需要提供json格式的数据接口即可；但是因为小程序方面对其他| 链接

使用nodeJS作为小程序后端node用的人很多啊。。稍微聚集一下相关的知识| 链接

使用C#解密用户信息 由于官方没有提供C#的解密demo，所以大家只能八仙过海各显神通了。。。 | 链接

使用第三方SDK及服务及扩展库及框架 目前已经为小程序开发了SDK及可以辅助开发的库或框架或SDK| 链接

使用第三方库（第三方js） 小程序怎样引用第三方js呢？第三方js是封装好的类库 想引用进来实例化使用| 链接

使用第三方编辑器（IDE开发小程序，并非一定要使用官方的编辑器，你也可以任意选择自己喜欢的编辑器；| 链接

模块化、组件化及封装 开发过程中要学会不断的重构代码，尽量提高代码的可重用性，尽量不要复制相同的代码。| 链接

参数传递，跨页面传值或通讯相关知识 这个东西，是开发小程序必备神器，越深入了解，越可以有效的帮助自己|链接

图表类：折线图，柱状图，K线，分时图 各类图表功能，小程序自带API并没有提供，所以很多人就用了其他方法来实现。| 链接

模版template使用，import及include template是小程序中的一个重要应用；WXML 提供两种文件引用方式import和include。 | 链接

富文本解析：将html转为为wxml富文本解析是一个困扰无数人的问题，目前网上的解决方案已经比较多了 | 链接

自定义字体/自定义图标相关 自定义图标及自定义字体，一直是很多小程序开发者的心病| 链接

微信小程序真机预览跟本地不同的问题 本地可以看到数据，打开调试也可以看到数据，关闭调试则看不到数据；或是开发版可以看| 链接

常见错误及基本排除方法 也接触了不少人解决问题的过程里，有一些比较难以排查的可能性列举在这 | 链接

ios苹果真机相关问题 此问题只在ios上出现，而安卓没有问题；或是这个问题同时在安卓和ios上出现；| 链接

Android安卓真机相关问题 本帖特别针对以下两个情况：情况一：此问题只在安卓上出现，而ios没有问题；| 链接

Javascript 标准库兼容性及ES6支持度说明iOS、Android 和 开发者工具。三端的脚本执行及用于渲染非原生组件的环境是各不相同的| 链接

ssl证书相关问题errMsg: "request: fail ssl hand shake error"等错误及免费证书申请地址| 链接

小程序1024K限制及代码压缩相关 为了提升小程序体验流畅度，编译后的代码包大小需小于 1MB ，大于 1MB 的代码包将上传| 链接

微信小程序支付（微信支付签名错误 发起支付时的签名需要有appId(不是appid,大小写)| 链接

微信支付（微信小程序支付） 小程序仅支持微信支付；而微信支付需要认证后才可以使用，需要花费300元认证费用；| 链接

微信登录问题 有个登录功能，为什么小程序在别的手机上无法登录？| 链接

Session、session_key及checkSession checkSession 就是用来检测 session_key 是否过期| 链接

用户未授权获取登录信息的替代方法 用户如果拒绝授权，需要10分钟等待后才可以再次申请授权；| 链接

授权获取用户信息的弹窗 授权获取用户信息窗口在开发工具可以多次提示，在手机上测试的时候只弹出一次，这是正| 链接

openid与unionid微信登录必备| 链接

解密获取unionid问题unionid，需要 先在微信开放平台内绑定小程序；http://open.weixin.qq.com，方可解密出unioni| 链接

带参数二维码，返回数据保存为图片php，java，node，C#等保存为图片的方法| 链接

带参数二维码相关知识 生成的数量有限制，总共只有10万个；另外，扫码访问次数没有限制。| 链接

MD5加密使用说明 聚集一下md5加密在小程序中的使用相关的内容： | 链接

页面路径五层限制 官方规定页面路径只能是五层，请尽量避免多层级的交互方式。| 链接

并发数及连接数限制及promise/async/await request 的最大并发数是 5；upload/download最大并发限制是 5 个| 链接

wx.downloadFile问题downloadFile，需要在小程序公众后台配置相应的downloadFile域名，否则会无法正常使用|链接

wx.uploadFile（上传文件）相关问题 特别提示一：upload必须在小程序公众后台配置上传域名，才可以在真机使用。| 链接

图片上传问题 域名检测全部是正确的，并且后台也配置了域名，但是安卓就是无法上传图片：| 链接

wx.openDocument打开文件 新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx| 链接

wx.saveFile文件保存API文件保存API是很多人懵逼的。。。| 链接

模板消息相关问题说明 当用户在小程序内完成过支付行为，可允许开发者向用户在7天内推送有限条数的模板消息| 链接

客服消息相关（客服按钮修改 客服按钮能自己定义吗？可以的| 链接

swiper轮播图组件1：如何上下滚动；2：如何点击；3：如何自定义指示点| 链接

button按钮组件使用button用来配合form或者单独点击| 链接

分享相关 知识onShareAppMessage只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮| 链接

image图片组件使用background-image：可以使用网络图片，或者 base64，或者使用标签| 链接

模态弹窗wx.showModal及遮罩层 带有输入框的弹窗| 链接

微信小程序缓存API相关知识 关于数据缓存，怎么能获取到本地缓存使用了多少，还剩多少| 链接

map组件，地图使用相关问题 包括百度地图，腾讯地图，高德地图api及各种地图相关demo| 链接

WebSocket相关问题说明 请保证wss域名符合https的要求；比如备案，不得带有端口等；| 链接

canvas相关问题说明canvas、textarea、video层级最高的变通方法| 链接

音频相关问题：播放，录音等相关 包括语音识别类demo及教程| 链接

录音文件格式为silk（silk转mp3） 暂不支持模拟录音，手机上录音目前是silk格式。如何转为mp3困住了不少人|链接

语音搜索及语音识别相关 这属于小程序框架体系之外的功能，可以将语言传给第三方服务器进行识别| 链接

progress进度条及slider凑合看吧，比如自定义圆形进度条。。。| 链接

radio单选（单项选择器 文章及demo可能并非是radio的使用说明，而是实现了自定义了单选等；| 链接

switch开关选择器使用 自定义switch方法说明| 链接

组件系列：scroll-view实现滑动及锚点功能| 链接

组件系列：textarea textarea可能出现的问题五花八门，请做好心理准备| 链接 input组件 坑点较多。。。| 链接

重力感应及罗盘API开始搞摇一摇了。。。| 链接

计时器/倒计时相关 倒计时，计时器等组件使用说明| 链接

视频播放相关（video组件）video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。| 链接

text组件，文本换行及空格 总结一下text组件，以及文本换行，文本溢出及空格，复制问题；| 链接

animation动画相关问题 本帖主要是针对animation的使用相关的教程及问题说明| 链接

toast吐司组件问题说明（自定义toast） 包括自定义toast等问题说明| 链接

picker及picker-view组 用途广泛的联动选择器，目前已经比较实用了；| 链接

tabbar相关问题说明 包括tabbar不显示，自定义tabbar等问题的说明| 链接

经我司开发齐修老师授权来发一砣高质量答案，希望对大家有帮助。阅读时可配合使用 Qdaily 小程序，可有身临其境的效果。

插播广告：微信搜索「qdaily」或扫描图片 qdaily 小程序 中的二维码即可开启好奇心

最近集中开发了两款微信小程序，分别是好奇心日历（每天一条辞典+一个小投票）和好奇心日报（轻量版），直接上图：

举个例子，Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）

好了，APP和Page负责维护小程序的生命周期和数据，模板负责接受数据完成页面渲染，页面间的跳转负责将多个页面贯穿起来，那么，如何发生交互呢？接下来我们简单说一下事件。

交互事件

// bindtap 和 catchtap的区别在于
// bindtap 不会阻止事件冒泡
// catchtap会冒泡事件冒泡Click me!Click me!// 绑定的函数tapName只是一个函数名称，默认接受一个event对象作为参数
Page({
  tapName: function(event) {
    console.log(event)
  }
})

接下来，另一个问题是：tapName() 如何接受自定义参数呢？

传递自定义参数主要有两种方式：
第一种：将参数绑定到wxml标签上，然后通过event.target.dataset获取
第二种：直接使用Page.data或其他数据

到目前为止，一个完整的小程序框架已经实现
? 小程序只有逻辑和视图两部分，而且不提供组件化解决方案
? 逻辑主要包含四个东西：两个配置文件 && 两个核心函数
? 视图很简单，模板语法稍微有点不完善
? 逻辑层的数据绑定到视图层是由小程序框架自动支持，数据变化，视图自动变化
? 视图层到逻辑层的，主要通过事件的方式来实现
? 视图之间的跳转，小程序也提供了它自己的方式，并不支持a标签

框架有了，小程序还提供了官方组件以便快速开发，提供了API以增强应用能力。

这块就不具体介绍了，也需要注意小程序的官方文档还在大规模的更新中，务必查看最新版
官方组件：组件 · 小程序
官方API：API · 小程序

微信小程序的基础知识就是以上的内容，并不复杂，边查边写都可以。

接下来会介绍更进阶一些的内容，内容主要结合好奇心日报这个小程序项目，先看效果：

如何设计微信小程序？

构建系统 && 目录结构

由于微信小程序本身对工程化几乎没有任何的支持，所以动手搭建一份：wxapp-redux-starter。
使用gulp进行编译构建，主要功能包括：
? 集成了Redux，数据管理更方便
? 开发过程中，使用xml取代wxml，对开发工具更友好
? 开发过程中，使用less取代wxss，功能更强大
? 引入es-promise，以便可以创建并使用Promise
? 添加promisify工具函数，可以便捷的将官方Api转换成Pormise模式
? 引入normalizr，可以将数据扁平化，更方便进行数据管理
? 引入babel自动进行ES2015特性转换
? 对wxml/wxss/js/img压缩，相对开发者工具提供的压缩，会减小一丢丢体积。

按照pages、components、redux、vendors/libs、images几个核心部分拆分，直接上目录。

? dist目录：构建输出的文件存放到这个目录。
? src目录：开发模式的文件，包括app、页面、组件、图片等静态资源、辅助函数库、Redux数据管理器、第三方工具库。
? gulpfile.js：不用多说，gulp构建任务的入口文件。
? package.json：不用多说，管理者构建任务的依赖。
? thirdPlugins：由于小程序并不支持直接使用npm，我们可以自主拉取构建，然后拷贝到vendors里，有时候需要简单修改。

构建系统会将src目录下的代码，编译处理后输出到dist目录，小程序开发工具只需要引入dist目录即可。

有了构建工具，代码开发起来更舒心，但很快就遇到另外一个糟心的问题，那就是如何管理散布在各处的数据？
要知道，微信小程序并没有提供组件化方案，所以把组件写成无状态组件特别适合，但是页面管理太多数据很凌乱，有什么办法可以将数据集中管理呢？

引入Redux进行数据集中管理

关于Redux相关的内容，之前有三篇博客详细介绍，有兴趣的建议先移步：
Redux整体介绍：Redux 入门教程，应用的状态管理器
对State进行横向和纵向拆分设计：State设计，Redux 开发第一步
Reducer的最佳实践：Reducer 最佳实践，Redux 开发最重要的部分

这儿就简单介绍一下，如何在微信小程序中引入Redux 以及 如何将微信小程序和Redux连接起来。

直接在 thirdPlugins目录 运行 yarn add redux / npm install redux，等redux安装好了之后，将 dist目录 的 redux.js/redux.min.js 拷贝到vendors目录中。
需要进行简单的修改才能使用，将压缩版208行代码 (i) 改成 (i || {})即可。

将Redux和微信小程序连接起来才会真的有用处。找了个现成的方案charleyw/wechat-weapp-redux，可以直接使用。

一个完整的Redux方案如下，包括：将Store注入到App中、将state的数据和reducer的方法映射到Page中。一旦state发生变化，Page.data也会更新，进而触发页面的重新渲染。

// APP的逻辑
import { createStore, applyMiddleware, combineReducers } from './vendors/redux.js';
import thunk from './vendors/redux-thunk.js';
import { Provider } from './vendors/weapp-redux.js';

// import reducers
import { rootReducer } from './redux/reducer.js';

// 从Storage读取数据
let entities = wx.getStorageSync('entities') || {};

const store = createStore(
    rootReducer, {
        // 将读取的数据注入到store中
        entities: entities
    },
    applyMiddleware(
        thunk
    )
);

let appConfig = {
    onLaunch: function() {},

    onHide: function() {
        let state = store.getState(),
            cacheEntities = {};

        // 体积大于2M，直接清空，防止缓存占用过大体积
        if (sizeof(state.entities) <= 2 * 1024 * 1024) {
            cacheEntities = state.entities;
        }

        // 退出时将entities缓存下来
        wx.setStorageSync('entities', cacheEntities);
    }
};

App(Provider(store)(appConfig));


// Page的逻辑
import { connect } from '../../vendors/weapp-redux.js';

import { fetchArticleDetail } from '../../redux/models/articles.js';

let pageConfig = {
    data: {
        id: 0,
        postsHash: {}
    },
    onLoad: function(params) {
        var me = this,
            { id, postsHash } = me.data;

        me.fetchArticleDetail(id, function() {}, function() {});
    }
}

// 考虑到列表页已经获取到部分数据
// 为了在详情页第一时间利用这些数据，我们将params传入
// 防止以后需要用data的数据，我们将data也一并传入
let mapStateToData = (state, params, data) => {
    return {
        id: params.id,
        postsHash: state.entities.posts
    }
};

let mapDispatchToPage = dispatch => ({
    fetchArticleDetail: (id, callback, errorCallback) => dispatch(fetchArticleDetail(id, callback, errorCallback)),
});

pageConfig = connect(mapStateToData, mapDispatchToPage)(pageConfig)
Page(pageConfig);

需要注意的是，为了保证第一时间能拿到数据，我们对wechat-weapp-redux/src/connect.js做了优化调整，修改的地方如下

// 修改了以下两个函数
// 可以对照原项目修改，也可以直接拿我的模板项目使用
function handleChange(options) {
    if (!this.unsubscribe) {
        return
    }

    const state = this.store.getState();
    // 将data也一并传入
    const mappedState = mapState(state, options, this.data);
    if (!this.data || shallowEqual(this.data, mappedState)) {
        return;
    }
    this.setData(mappedState)
}

function onLoad(options) {
    this.store = app.store;
    if (!this.store) {
        warning("Store对象不存在!")
    }
    if (shouldSubscribe) {
        this.unsubscribe = this.store.subscribe(handleChange.bind(this, options))
        // 第一次处理的时候也传入options
        handleChange.apply(this, [options])
    }
    if (typeof _onLoad === 'function') {
        _onLoad.call(this, options)
    }
}

引入Redux的好处在于可以集中管理数据，并且让Page的代码保持绝对简单，让所有的组件都变成简单可复用的无状态组件。
此外，Redux还让离线缓存更方便，数据复用更简单。

引入Redux解决了数据散布各处的问题，参考Redux的管理思路，我们构思了一套简单组件化解决方案：假设我们把所有的组件都设计成无状态组件，而组件的数据来源是Page.data，那么我们是否也可以将组件数据的管理抽离到一个单独的文件中呢？接下来讲讲我们使用的简单的组件化解决方案。

简单的组件化解决方案

这份组件化解决方案的核心就在于把组件的关联数据集中起来管理，只暴露出默认数据和数据的操作函数。

比如好奇心日报的详情页有个Toolbar，该Toolbar并不复杂，主要提供返回和点赞功能，其中点赞功能只对文章详情有效，研究所详情页会将点赞功能隐藏。

// components/toolbar/index.js 文件
// 仅提供默认值，不需要和page中的数据保持同步
let defaultData = {
    isPraised: false,
    praiseCount: 0,
    showPraiseIcon: false,
};
// 切换点赞状态
function togglePraise() {
    // 本质上是修改Page.data中的toolbarData
}
// 返回上一级
function navigateToBack(wx) {
    wx.navigateBack({ delta: 1 });
}
module.exports = {
    defaultData,

    togglePraise,
    navigateToBack
}

// pages/articles/show.js 文件
import Toolbar from '../../components/toolbar/index.js';

let pageConfig = {
    data: {
        // 其他数据
        id: 0,
        // Toolbar数据，单独的一份数据，便于维护
        toolbarData: Toolbar.defaultData
    },
    // 点赞或者取消赞
    togglePraise: function() {
        let me = this;

        Toolbar.togglePraise.call(me);
    }
}

// 这儿的组件化并不是真正的组件化
// 而是将组件相关的逻辑和函数抽离到单独的文件中，保证Page代码清晰。
// 同时也为这部分组件逻辑复用提供了可能。
// 本质上来说，抽离出的组件都是“操作Page.data的工具函数”，他们也是纯函数，和“操作state的reducer”类似。

这种Redux的组件化解决方案既简单又好用，保持一定的代码规范即可。这样设计当然是为了复用，同时也让Page的逻辑保持极度精简。

开发中遇到了哪些难点 && 微信小程序有多少坑？

微信小程序目前的确算不上公测的版本，开发者工具不完善、真机表现和开发环境差异很大、部分组件性能较差、部分功能有缺陷，只有经历了这些大坑，才会真的知道你有多“爱”微信小程序。这儿总结了开发中的难点以及微信小程序中遇到的比较明显的坑。

富文本解析

微信小程序并不支持HTML标签，所以对于富文本解析来说，难度较大，而且有些功能还没有办法实现，比如：iframe视频、连接跳转等
这块功能建议由后台统一转换，如果非得前端转换，建议参考下面的思路。

非常感谢 wxParse 这款组件，替我省了不少时间。推荐大家使用，期间遇到一些问题，也分享给大家。
? wxParse 默认层级只支持10层html嵌套，如果想要支持更深的层级，在wxParse.xml复制几份template即可。
? wxParse 提供了图片加载成功的回调wxParseImgLoad，很好用。但如果富文本中的图片已经预设宽高比，那么可以不用依赖该回调，在html2jons.js中根据屏幕宽度直接计算出图片高度，先占位，可以避免页面频繁抖动的问题。
? 如果你的富文本中有自定义模块，对wxParse.xml中的template进行改造即可。

数据扁平化

具体如何扁平化，请移步上一篇博客 State设计，Redux 开发第一步。
这儿只简单介绍下扁平化应用场景：
好奇心日报的研究所是三级表结构：papers > questions > options，后台返回的数据是三级嵌套数据，如果想要修改option.selected字段，需要三级嵌套循环！如果想要获取所有选中的option，需要三级嵌套循环！

页面展现速度优化

数据复用，比如复用列表页的数据，可以让详情页的标题等字段第一时间呈现出来。
离线缓存，同样可以让列表页和详情页第一时间呈现出来，甚至有可能减少请求数量。

无论是数据复用还是离线缓存，配合数据扁平化，都非常好用。

解决方法很简单，设置微信小程序不使用代理；或者临时关闭VPN即可。
上一版开发者工具已经解决该问题，最新版又坏了。

最新版微信小程序移除了对Promise的支持。

开发者自行引入兼容库即可，推荐es6-promise。使用的时候，直接引入Promise即可。

// 引入Promise
import Promise from '../vendors/es6-promise.js';

// 用Promise封装wx.request网络请求
function request(method = 'GET') {
    return function(url, data = {}) {
        return new Promise(function(resolve, reject) {
            wx.request({
                url,
                data,
                method,
                header: {
                    'Content-Type': 'application/json'
                },
                success: function(res) {
                    let { statusCode, errMsg, data } = res;

                    if (statusCode == 200 && data.meta && data.meta.status == 200) {
                        resolve(data.response);
                    } else {
                        reject('网路请求错误，请稍后再试~');
                    }
                },
                fail: function(err) {
                    reject('网路请求不符合规范，请检查域名是否符合要求~');
                }
            });
        })
    }
}
export const GET = request('GET');
export const POST = request('POST');
export const PUT = request('PUT');
export const DELETE = request('DELETE');

// 用Promise封装小程序的其他API
export const promisify = (api) => {
    return (options, ...params) => {
        return new Promise((resolve, reject) => {
            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
        });
    }
}
// 使用
const getLocation = promisify(wx.getLocation);

不清楚微信为何会临时移除Promise，统一内置不也挺好？

小程序不能实现完美的fullpage效果，会出现上下拉扯的感觉（最新版预计已修复，待实际验证）。

小程序一旦滚动顶部或者底部，继续滑动的时候，就会出现拉扯现象。而这个拉扯现象还无法禁止。
最新版可以对页面配置disableScroll，预计可以修复这个问题，待实际验证。

swiper组件不支持轮播，性能差，文档模糊（部分最新版已修复）

? swiper组件之前并不支持轮播，最新版已修复
? swiper组件之前是通过设置left属性来实现动画，在小米5、华为V8等高仿等安卓机上能够感受到明显的卡顿，当然原因是X5内核引起的。最新版已修复，换成了transform，性能有一定的提升。

? 文档并未标记可以垂直轮播，但其实是可以的。

// 简单设置vertical即可，但由于官方文档并未备注，尽量不要使用。可以自己开发一个swiper组件。

? swiper组件的小圆点其实是可以定制化的，但是官方文档并未说明，而且开发者工具也看不出来，只有鼠标hover到元素上的时候可以看到相关的class，简单猜测一下，最后分析出来它的实现方式。

// 圆点的父元素，用来控制圆点间的间距
.wx-swiper-dot {
    width: 30rpx;
    // 圆点，可以通过font-size修改圆点的大小，color修改圆点的颜色
    &:before {
        width: 100%;
        display: inline-block;
        font-size: 56rpx;
        content: '圆点编码';
    }
    // active状态的圆点
    &.wx-swiper-dot-active {
        &:before {
            color: #ffc81f;
        }
    }
}

小程序WXSS的font-face的url不接受路径作为参数

可以将字体文件转换为base64，然后引用。

同样，如果想要使用iconfont，也可以使用类似的方案，将iconfont字体文件base64之后再引入。

小程序的margin表现有问题（最新版已经修复）

之前发生margin折叠的时候，会取小的那个值。会导致底部留白等设置失效。

canvas问题

canvas并没有深入研究，目前的发现的问题主要是两个，如下图标记：
? 层级问题，canvas总是会盖在其他元素上面。
? 支持度不好，在小米5、iPhone5s画图会出现畸形。

最后通过CSS3的方式绘制饼图

.com-pie {
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 100rpx;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 50%;
    color: #000;
    background-color: #ebebeb;
    background-image: linear-gradient(to right, transparent 50%, #cccccc 0);
    overflow: hidden;
    .percent-1,
    .percent-2 {
        position: absolute;
        top: 0;
        width: 60%;
        height: 100%;
        left: 50%;
        transform-origin: center left;
    }
    .percent-1 {
        background-color: inherit;
        z-index: -2;
    }
    .percent-2 {
        height: 110%;
        opacity: 0;
        z-index: -1;
        background-color: #cccccc;
    }
    &.selected {
        background-color: #ffe9a5;
        background-image: linear-gradient(to right, transparent 50%, #ffc81f 0);
        .percent-2 {
            background-color: #ffc81f;
        }
    }
}

微信小程序的rpx会出现精度问题

设置margin-left/margin-right负值，可能导致页面能够左右晃动。猜测 是rpx导致的精度问题。
rpx本质上会转换为px，在不同宽度的设备上，实际的rpx值会转换为带小数的px值，四舍五入可能出现问题，之前使用rem布局的时候在QQ浏览器遇到过类似的问题。

wx.request表现不合理，并且携带特殊字符会报错

? 请求返回404错误，也会触发success回调。
不要想当然的认为会触发fail回调，判断一个请求成功或失败，请使用wx.request返回的状态来判断。只有不符合规范的请求，才会触发fail。

? 请求的数据中，如果有特殊字符（比如u2820），会报错。
只会在真机上出现，开发者工具没毛病。估计会有更多的特殊字符会导致这个问题。

开发者工具，切换页面的时候，有时候wxml不会同步切换

希望微信什么时候能解决一下。

微信小程序给wxml模板赋值的时候，解构放到前面可能会报错

最新版会遇到这个问题，老版本虽然不会报错，但是在部分真机上会出现问题。
原因未知，遇到这个问题的朋友可以考虑绕过去。

微信小程序的scroll-view暴露的bindscroll函数并不能实时监听

依赖实时获取滚动位置的功能不能实现。比如滚动时toolbar的动态隐藏和显示。

最新版开发工具不能关掉自动刷新

微信小程序的会默认监听文件变化，然后自动刷新。
但不足的是每次都是全量刷新，而不是模块的热替换，反而会影响开发速度，尤其对于喜欢频繁Command + S的开发者，你会发现你的小程序在不断的刷新。建议关闭。

但最新版开发者工具，不勾选也会自动刷新。

微信小程序不支持requestAnimationFrame

微信小程序不支持requestAnimationFrame，所以部分性能优化做不了。不支持的原因未知。

Page.onload函数可以接受参数

该参数是有URL决定的，也就是URL携带的参数。
官方文档这块写的有点混淆，特意拿出来说一下。举个例子：url中传递的时候id=1，那么option.id=1，而不是什么option.query。

不要给Page.data传入太多无用数据，会影响渲染效率，在iOS上表现特别明显

尽量传入精简的数据，保持Page.data和view间简单的绑定关系即可。

真机上有概率卡死，目前不确定是代码问题还是小程序的问题。

有遇到类似问题的朋友欢迎指出。

总结说点啥？

本文主要围绕微信小程序的基础知识、如何设计微信小程序、开发过程中遇到的问题三个方面介绍。

微信小程序的基础知识主要包括：
? 两种配置文件 && 两个核心函数
? WXML模板语法，页面渲染
? 页面间的跳转
? 交互事件
? 官方组件和官方API

如何设计微信小程序的内容主要包括：
? 构建系统 && 目录结构
? 引入Redux进行数据集中管理
? 简单的组件化解决方案

最后还介绍开发过程中遇到的难点 以及 微信小程序的大小坑。

微信小程序本身并不复杂，开发过程却比较艰辛，尤其是第一次在真机上运行的时候，觉得这个世界恶意满满。

最后再贴一下我们的小程序使用方法：微信搜索「qdaily」或扫描图片 qdaily 小程序 中的二维码即可开启好奇心日报小程序

http://weixin.qq.com/r/VEzcxCTEoXnerWCn9xlG (二维码自动识别)

推荐这门小程序专业课给大家《微信小程序开发》

这门专业课程由腾讯云学院、中国高校微信应用教育联盟联合提供，通过各项实战课题，从零到一为大家揭开微信小程序开发的神秘面纱，零基础入门，手把手带领大家上手微信小程序：

专业课程包括：

1. 小程序·云开发实战——私房书柜项目

2. 微信小程序实战——生鲜智慧门店项目

3. 微信小程序实战——头像助手项目（待更新）

4. 微信小程序实战——贪吃蛇小游戏项目（待更新）

5. 小程序开发指南-学做小程序

温馨提示,以上推荐课程现在都是可以免费收看的哦~

已经有非常多的优秀答案了，相关的资料也很齐全，在此补充一些小程序开发工具以及相关开源项目，希望对题主有所帮助，也供大家一起交流学习。

一、微信小程序发开必备工具：

1. 项目名称：兼容微信小程序 Mina 框架 FreeMina

项目简介： wepy 是一个小程序组件化开发框架，wepy 编译组件的过程如下：

项目地址：taiji1986/freemina - 码云

2. 项目名称：微信小程序版高性能跨语言平台 Hprose-wx

项目简介： Hprose 是高性能远程对象服务引擎（High Performance Remote Object Service Engine）的缩写。本项目是 Hprose 2.0 的微信小程序专用版。

它是一个先进的轻量级的跨语言跨平台面向对象的高性能远程动态通讯中间件。它不仅简单易用，而且功能强大。你只需要稍许的时间去学习，就能用它轻松构建跨语言跨平台的分布式应用系统了。

项目地址：Hprose/hprose-wx - 码云

3、项目名称：微信小程序脚手架工具 wxdad

项目简介： 一款微信小程序脚手架工具，帮助你快速开发微信小程序应用。目前有两个功能：

• 快速构建初始项目架构。
• 把 wxdad 语法快速编译成 wxml 和 wxjs 文件，帮助开发者急速开发。

项目地址：无鞘之刃/wxdad - 码云

4. 项目名称：微信小程序云端增强 SDK - XpmJS

项目简介： XpmJS 可以链接任何云端资源，为小程序、移动应用提供云资源通道和后端能力。降低开发门槛，提升小程序的开发效率。无需编写后端代码，即可实现用户登录、WebSocket 通信、微信支付、云端数据表格、文件存储等功能。虽然 PHP 是最好的编程语言, 但是使用 XpmJS 后, 无需学习包括 PHP 在内的任何后端语言，用 Javascript 即可搞定一切，NodeJS 也不用！

项目地址：XpmJS/xpmjs - 码云

5. 项目名称：微信小程序服务端容器 NAMI

项目简介： 微信小程序的前端框架，官方命名为 MINA；那我们的非官方后端就呼应一下，姑且命名为NAMI（纳米）。

NAMI 提供了一个小程序服务端所需所有服务的支持，包括但不仅限于处理 request 请求、接收和处理websocket、与微信服务端交互并维护 access_token、处理微信服务端登录鉴权、发送模板消息、接收微信支付事件，等等。

对于小应用：你只需要找一台电脑（无论windows、mac 还是 linux），一台云虚拟机，甚至一个 docker 实例，就可以安装 NAMI；NAMI 提供了一整套完整的小程序后端解决方案，替你包揽有关小程序后端开发的所有问题。

对于大应用：可能小程序只是你整个IT架构的其中一部分；可能你还需要考虑负载均衡，考虑多实例部署，考虑缓存；NAMI可以作为一个纯粹的 JAVA 开源框架，简化你的 JAVA 开发，帮你更高效解决与小程序有关的问题。

项目地址：wodenwang/nami - 码云

6. 项目名称：微信小程序 JavaScript 库 jwxa

项目简介： jwxa 是一个轻量级的微信小程序 JavaScript 库。

项目地址：许剑锋/jwxa - 码云

7. 项目名称：微信小程序开发的 Java SDK

项目简介： 本项目仅是一个开发工具包（即SDK），未提供Web实现，建议使用 maven 或 gradle 引用本项目即可使用本 SDK 提供的各种功能，详情可参考下文中提到的 Demo 项目或本项目中的部分单元测试代码；另外微信开发新手请务必阅读 Wiki 首页的常见问题部分，可以少走很多弯路，节省不少时间。

项目地址：班纳睿/weixin-java-tools - 码云

二、从开源项目学做微信小程序：

1. 项目名称：灵动电商之微信小程序端

项目地址：黄秀杰/lendoo-wx - 码云

2. 项目名称：高精品网易 B2C 商城

项目简介：本项目是基于 Node.js + MySQL 开发的高精品网易严选开源 B2C 商城（微信小程序客户端），其主要功能如下所示：

• 界面高精品网易严选商城(主要是2016年 wap 版)
• 测试数据采集自网易严选商城
• 功能和数据库参考 ecshop
• 服务端 api 基于Ｎode.js+ThinkJS+MySQL
• 计划添加基于 Vue.js 的后台管理系统、PC版、Ｗap 版

项目地址：tumobi/nideshop-mini-program - 码云

3. 项目名称：灵犀新闻客户端

项目简介：本实例将演示从零开发一个微信应用号的过程，页面轮播与跳转传值，实现单元格自定义布局，全部源码可通过码云下载。

整体开发过程还是比较舒适的，上手难度不高，过程中用到一定的 CSS 语法，本质上还是体现了一个 H5 开发模式，WXML 实质上一种模板标签语言。

项目地址：黄秀杰/news - 码云

4. 项目名称：微信小程序 - 帮你妹

项目简介：此小程序集成众多功能（天气查询， 手机号查询， 身份证查询， 历史上的今天， 美女图片（哈哈， 你懂的）等）。 目前只完成天气查询， 历史上的今天， 美女图片（重要）， 剩余功能会陆续完善， 也希望有兴趣的小伙伴（妹子优先）共同完成。 当然， 由于小苹果作者非 ps 出身， 实在做不出好看的素材， 所以显得比较简朴， 希望能在大家的共同努力下做出炫酷的“帮你妹”。

项目地址：绿色的小苹果/wx-bangnimei - 码云

5. 项目名称：微信小程序之记账软件

项目地址：黄秀杰/finance - 码云

6. 项目名称：微信小程序-贪吃蛇

项目简介：得分计算/蛇长计算/游戏加速/蛇加长 (吃到食物, 蛇加长, 移动速度加快, 游戏结束计算得分/蛇长)

项目地址：CoderPeak/snakeGame - 码云

来码云 http://Gitee.com
发现更多优质开源项目：最新推荐 - 码云 - 开源中国
让团队流畅、高效开发：码云企业版 - 码云 - 开源中国

学习小程序大致分三个阶段

1）概念建立阶段，通过浅阅官文文档，阅读社区教程、文章完成

2）知识结构充实阶段，通过阅读他人的demo源码，在本地运行，调试修改，带着问题学习是这个阶段的主要特征，要善用搜索引擎，善于在群内提问

3）开发修行阶段，投入到实际的项目开发中去，在实践中提高认识，并提出新的问题，改进既有的开发方案，编写小程序类库、工具等

资料解读

大家是不是觉得资料太多了，不知学什么好。

以下所有链接，笔者均亲自审阅、点评。标题冒句前面，笔者作了归类，有些需要精读，有些仅需略读。有些文章有错误字，不必在意，略过即可，旨在掌握精髓。

一

资讯了解：张小龙全面阐述小程序（视频文本稿，非常值得一读，深度理解小程序是什么）

张小龙展望未来，认为十年后替代智能手机的产品是智能眼镜，人类在智能眼镜上使用的程序不是App，而是小程序，无须下载打开即用，用完即走无须卸载。
目前，小程序运行于微信之内，但并不意味着一直如此，或许有一天腾讯开发出一款“腾讯眼镜”，小程序运行于内，眼晴落在灯上，出现灯的开关程序；眼睛落在餐馆的招牌上，出现一个餐饮小程序，等等。
在这篇文章中，张小龙回顾PC电脑、互联网、移动互联网发展过程，将小程序自比为互联网时代的Web站点，无须订阅，打开即用，用完即走，商家亦不能向用户主动推送消息。

二

必下：官方微信开发者工具下载（学习者必下）
文件修改后必须保存，否则编译、运行无变化。有人因此跳了第一坑。也可以在菜单“设置”>"编辑设置"，选择“修改文件时自动保存”，可以这个问题。

进阶必看：开发者论坛（须使用小程序管理员微信登陆）

进阶必读：开发者文档（这两个常用链接，可以从“微信开发者工具”菜单中快捷打开；听说在这个论坛留言，可以加快审核通过）

企业开发支付必看：【微信支付】微信小程序支付开发者文档

三

入门跳阅：从零开始：微信小程序新手入门宝典
不必全读。
企业开发需要准备的几点：
1）备案域名
2）准备SSL证书（这两项不影响开发，在开发工具中开启“不检验域名”即可）
3）通过帐号认证（如果已有服务号、订阅号通过认证，可复用其资质，省了300元还有审核等待的时间）

四

一阶略读：小程序前端实践8篇
这8篇初学者可略读，用于快速建立知识结构
程序员开发实战系列《一》注册、预览小程序 微信小程序学习记录

—————2018年2月12日更新线—————

以下是作者在知乎创作的学习资料，仅供参考：

5.1 入门兼demo实战：如何从零开发一款【微信小程序】？

附前后端10教程。

5.2 如何从零开发一款「微信小游戏」？

这节课有两个demo，两篇讲义，附跳一跳源码，仅售9.9。

这是讲小游戏如何开发的，如果没有接触过游戏开发，这是最好的入门教程，没有之一。

5.3 如何布局，小程序UI入门：小程序UI容器组件

学习布局的关键，一课解读足矣，仅售19.9。

这一节解决的是，入门学习者不知道如何布局程序界面的问题。学会贯通之后，看到别人写的效果，多思考，想想别人是怎么做的。久必成师，“我亦无他，唯手熟尔” 。

5.4 小程序基础内容与表单组件

包括所有小程序组件的使用，附使用示例，物超所值，仅售19.9

5.5 《小程序从 0 到 1：微信全栈工程师一本通》知乎电子版

5.6 《小程序从 0 到 1：微信全栈工程师一本通》京东自营纸质版

专栏：微信小程序

看了其他优秀的回答，我羞涩了，回答的太好了，太多了，我相信你根本懒得看。

我们先了解一下腾讯如何定义小程序，微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验（文言文版本）。大白话就是把以前在微信公众号里面的网页使用小程序来代替，提升调用微信能力和系统能力的效率（比如微信支付，摄像头等），提高用户的使用体验。

小程序其实还是浏览器技术，使用javascript（ES5/ES6）作为开发语言，然后自己封装了一套组件（你可以理解为自定义的HTML标签），再加上CSS3，注意这里很多CSS3的高级货是用不了的。

从框架层面上讲，小程序和VUE（如果你不知道它，你可能是个假前端）很像，从定义应用到创建页面，还有数据存放的方式，以及更改状态的方式，指令系统等。所以如果你有Vue的基础，你学起来非常的容易。如果没有的话，那就要从零开始了，还是老套路，你需要从下面三个方面开始，帮你梳理一下学习资料，全部都是小视频，你懂得：

1：JS，https://www.imooc.com/learn/36，入门篇；https://www.imooc.com/learn/277提升篇

2：CSS3，https://www.imooc.com/learn/33 入门篇；

3：HTML，https://www.imooc.com/learn/24 入门篇；

上面的这些差不多花一周的时间就可以学完，学完后，就直接上小程序文档https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017119，开始之前需要去下载小程序开发工具，然后使用自己的微信登陆。然后跟着文档一步一步的走就可以了，只要学习能力比“小学生”强，就没问题。注意点：如果要上真机演示，需要提前获取APPID，现在允许个人注册了，需要身份认证，就是拍身份证的正反面上传就可以了。https://mp.weixin.qq.com/wxopen/waregister?action=step1。

只能帮你这么多了，还是那句话，学习是需要持久的，如果自己没有这么强的意志力，就尝试换个方式。

我特地为企业老板、营销人写的，他们搞不清楚微信小程序、微信商城、H5和微信公众号定制的关系，我来科普一下这四者的定义、应用场景、优劣势。整篇内容我花了2天时间来整理，看完如果觉得有帮助，请赏赞。当然，如果你不想看大段文字，也可以加我个人微信：biaoshi555，暗号：074，可以给你提供专业的免费咨询服务。

微信小程序

定义：

微信小程序，简称小程序，是一种不需要安装下载即可使用的应用。实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用，也体现了“用完即走”的理念。

目前，小程序能实现消息通知、线下扫码、公众号关联等七大功能。

2017年12月28日，微信更新的6.61版本开放了小游戏，微信启动页面还重点推荐了小游戏“跳一跳”，可以通过小程序找到已经玩过的小游戏。

应用：

1.适用多种营销场景：网上开店、数码家电、门店引流、营销活动、在线预约、外卖配送等。

2.适用多行业：食品快消、数码家电、母婴亲子、美妆护肤、教育培训、日用百货、水果生鲜、餐饮外卖、蛋糕烘焙、美容美发、休闲娱乐、酒店旅游等。

优点：

1.开发难度低，难度不及App，能够满足简单的基础应用，适合生活服务类线下店铺及非刚需低频应用的转换。

2.同步订单，跟微商城或零售店铺打通，无需额外运营成本，轻松管理。

3.自带流量，微信9亿月活跃用户，附近的小程序、微信搜索等功能，让你轻松获取流量，抓住客户。

4.可以尝试优惠券/码、满减/送、多人拼团等多种营销玩法，抓住流量，获取销量。

5.可以调用比H5更多的手机系统功能进行开发，例如GPS定位、录音、拍视频、重力感应等，能开发更丰富的使用场景。

6.打开速度比普通H5快，接近原生App。

7.在安卓手机上可以添加到手机桌面，看上去跟原生App差不多，但仅限安卓手机，iphone就不行了。

8.运行速度跟App差不多，也能做出很多H5做不到的功能，开发成本跟H5差不多，相对来说开发成本比App要低。

缺点：

1.只有1M的大小，导致无法开发大型的小程序，所以目前很多小程序很小、很简单。

2.小程序的技术框架还不稳定，开发方法时常有修改，导致短时间内经常要升级维护。

3.不能跳转外链网址，间接影响了小程序的开放性。

4.不能直接分享到朋友圈。

5.需要像App一样审核上架，比H5即做即发布要麻烦。

外包定价：

今天上午刚刚有一个客户通过镖狮网研出了自己的小程序，如果你在镖狮网上选购小程序外包服务，性价比很高：

小程序的功能越复杂，质量越高，报价越高，反之越低。一般小程序系统有两种，一种是现成的，这种小程序系统的价格一般会在几千到一万左右，如目前一些用户使用的自助小程序系统，不能过多要求，也不能大改动，因为已经成型，模板千篇一律，用户体验不高，界面没有多少设计感，功能也限制得很死。另一种就是定制类型的，就是小程序系统所有的功能都是需要定制开发的，从零开发的，一般费用非常昂贵，根据客户所要求的功能，可能要几万到十几二十万不等，而且开发周期也比较长，但是无论如何，小程序的开发费用都要比APP应用开发要便宜一些。

一般开发一个小程序不会直接报价，在不清楚客户设计、需求下直接报价合作，可能导致项目失败，造成不必要的损失。一个微信小程序的开发价格需要经过严谨的计算，在公司与客户的交流沟通中，公司会仔细分析客户的应用需求，直到双方达成共识后公司提出报价进行合作。

H5：

定义：

HTML，就是你跟浏览器下达命令的语言。比如要把一篇文章显示在浏览器上，文章既有图片又有文字，你要告诉它哪些是文字，哪些是图片，并且分别都放在哪个地方，需要用什么样式……

H5是HTML的第五个版本，全称HTML5，H5就是移动端的web页面。H5游戏可以看作是移动端的web游戏，无需下载软件即可体验。

可以说：HTML5并不是一项技术，而是一个标准。

应用：

H5算是一个较低成本的营销方式，花点钱做个H5扔到朋友圈，通过自媒体，有可能出现裂变式增长。所以现在很多企业投入H5营销，投入社交媒体的影响中去了。

它更多的应用在：微信H5（H5动画、H5小游戏、H5弹幕、节日贺卡）、交互视频、户外大屏交互解决方案、PC HTML5广告上。

http://t.cn/R9AAjAB (二维码自动识别)

这属于“周年庆+视频+测试答题”的交互视频类型。电竞男神周杰伦化身中单英雄“卡牌”，通过一副牌去猜测你心中所想之牌，前提是玩家需要根据给出的选项回答周董的三个问题； 而后检测周董是否能够看出你的内心，最后在尾页爆出英雄联盟六周年狂欢盛典的时间和地点。

优点：

1、提高可用性和改进用户的友好体验；

2、有几个新的标签，这将有助于开发人员定义重要的内容；

3、可以给站点带来更多的多媒体元素(视频和音频)；

4、当涉及到网站的抓取和索引的时候，对SEO很友好；

5、将被大量应用于移动应用程序和游戏；

6、可移植性好。

缺点：

该标准并未能很好的被浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。

定价：

1.如果只是做一个H5页面的设计，不会很多钱，很多都是免费的工具。

2.普通级H5网站通常一个人就能完成，执行成本通常在2000-5000元左右。

3.专业级H5利用市面上流行的高级H5制作工具，执行成本一般在5000-30000元左右。

4.专家级H5不用使用第三方H5工具平台，所有的项目以开发的方式来实现，从策划、执行、到推广、数据收集整个完整的项目服务。执行成本一般在50000-100000元左右。

5.大师级H5通常的项目执行成本在100000-200000元左右。

镖狮网也能提供H5制作，如果你在镖狮网上选购，性价比很高。

商城开发：

定义：

微信商城是微信公众平台上一个有关商城服务的应用，相当于手机上的商城购物。目前微信商城的规模已超5.4万亿，但对于绝大多数商家或企业来说，缺乏专业的微信开发团队和相关人才难以培养是搭建企业微信商城的硬伤。

是否能够为商户提供真正的促进销售转化的系统工具和优质的服务（如免费的基础运营培训等）是考验商城开放服务商的重要标准。三大巨头包括有赞、点点客、人人店。

微商城可以囊括很多营销场景和行业，比如：社区服务、餐饮外卖、房产旅游、拼团优惠券、汽车、医疗、相册等。（注：价格不作为参考）

可开发的功能模块有上百个，主要通过以下七大产品体系承载：微网站模板系统、互动营销系统、会员管理系统、预约订单系统、微信在线购物系统、渠道管理系统、多项独立应用。

优点：

1.可以借助微信的用户提高商城的购买力，实现移动端的便捷营销。

2.不仅仅是一个新的销售渠道，更是帮助企业进入移动电商行列快速有效的途径。

缺点：

属于新兴行业，外包公司多，业内相关服务良莠不齐。

定价：

没有统一的价格标准，还是根据客户对商城的功能需求进行报价。功能越多、增值业务越多，价钱越高。

有些商家只是稍微包装下模板，直接拿免费的用就好了，这种可以自己做。商家自建微商城，很多高级接口和附加功能是需要收费的。

一般情况下，几千到一万一年便可以搭建完成基础版的微商城。此类商城大多为中小商家所接受，且比较大众化，操作起来也算方便。

个性化定制，开发全新的商城需要多方面人力、物力的支持，费用高也在情理之中，几万到几十万是需要的。

选择哪种开发方式，得看企业的资金预算，适合自己的才是好的。

镖狮网也能提供微信微信商城开发的服务，如果你在镖狮网上选购，性价比很高。

微信公众号定制开发：

定义：

微信说白了就是个“聊天工具+内置浏览器”。只要你会一些技术，就能在H5网页开发出不错的功能。

所以微信公众号定制开发服务商应运而生，可以满足客户对微信平台使用的各种需求，让展示、推广、互动、成交各个环节快速进入微信营销轨道，增强用户和品牌的黏性。

主要包含产品/界面设计、微信开发、后端开发三类项目。

产品/界面设计：需要以用户为中心，了解手机用户需求，细化至每个细节，设计覆盖用户所有需求的产品功能点。保证设计出视觉美观、体验流畅的交互界面。

下面是镖狮网为一个房产类公号的UI设计图：

微信开发：面向ios系统、安卓系统、微信公众号、H5页面的开发。实现多平台、多平台间的交互。

后端开发：数据库搭建、便捷、维护，面向客户端及CMS（内容管理系统）端口的开发。为前端App和CMS（内容管理系统）提供稳定到校的数据信息服务。稳定性好的可支持千万级用户同时在线使用。

比如，对转化率等进行管理、维护、统计、分析，在表单后端集成了微信消息推送。

应用：

所有的功能实现，都是基于你公号目前的接口权限的。认证后拥有高级接口，可以实现的接口有以下几种：

语音识别客服接口、生成带参数二维码（服务号更偏重服务，所以对开发者支持也比较多，订阅号不支持此项功能）、获取用户地理位置、微信支付（订阅号不支持此项功能）、获取用户基本信息、获取关注者列表、用户分组接口、上传下载多媒体文件等接口。

利用好这些接口，根据你的需求，发挥想象力，可以实现很多功能。比如，获取用户基本信息的接口，可以获取用户的性别、头像、微信号等信息，可以开发一个交友类的微信。利用获取用户地理位置的接口，可以开发一个微信号，自动帮你寻找附近的餐厅。

再比如实现以下功能：天气/股票/星座查询功能、聊天机器人/小黄鸡对话功能、一站到底/猜谜语问答功能、搜索功能、听歌功能、活动/游戏功能。

以品质鲜花配送平台“花点时间”为例，开发、实现了日历、物流、客服等功能。

优点：

和自身产品、项目结合，实现更好的销售转化/用户体验。

缺点：

1.需要技术功底，开发难度大，成本高。

2.市场、用户需求的变化导致功能要不断修改和完善。

3.服务器出问题，影响公众号正常使用。

定价：

根据功能大小、技术难度而定。镖狮网也能提供微信公众号定制开发的服务，如果你在镖狮网上选购，性价比很高。

一家创业的教育培训机构0成本，7天涨粉20万！

他们是怎么做到的？

我这有很多个特别牛的引流方案，包括教育培训、电商、餐厅、服装、医疗等多个行业。

在公众号镖狮营销课堂（id：woyaobiaoshi)中，回复“方案”，即可获得100份经典营销方案。也可以加我个人微信号（biaoshi555)发给你。

欢迎关注我的专栏，里面有很多分类干货：

企业微信营销白皮书

企业口碑营销指南

企业SEO+SEM营销指南

企业品牌推广指南

学习微信小程序开发无非有两种方法，自学和进入小程序开发公司学习。如果你自己有一定的计算机功底，那么完全可以找一个软件开发公司做实习生，好好的去学习相关的软件开发。如果你时间比较有限，那么也没有关系，我这边有很多的微信小程序学习的资源，一会截图给你们看下，有需要的可以留言留下你们的邮箱(不忙的话可以点个赞哈)，我会把下载地址给你们。祝你们学习成功。

当然如果你在学习微信小程序开发的过程中有很多的问题或者疑问，你也可以私信给我，不说自己是大神哈，但是正常解决一些你们开发过程中遇到的问题是完全有能力的哦，但是不一定每个人的私信都会回，平时工作比较忙，我会抽时间尽量给大家都一一回复哈。

其他说明：我本人从事微信开发也已经8年有余，如果你们想做微信开发或者在微信开发的过程中有任何的问题都可以私信给我，目前以下几类问题的私信我会回复你们。

1：自己想做个微信服务号开发/小程序开发/企业号开发，但是不知道该如何下手，不知道如何规划，你可以找我。

2：在学习微信开发的过程中遇到了无法解决的问题，你可以把详细情况描述一下，给我私信，我有时间的时候会回复你。

3：找软件外包公司在做微信开发的过程中碰到了难以解决的问题，可以找我，我可以给你方案。

相关的微信小程序的学习资料如下：

这个问题比较老了，可最近还是有很多人邀请我来回答，说实在话，微信小程序我个人也不算是特别熟悉，只简单的看过部分文档和写过一些小DEMO，不过前一段时间我在写快应用的时候，倒是看了不少和小程序相关的代码和源码。

不说废话，先谢邀，其实这个主题下回答学习资料的答案比较多，比如@初雪

的回答，列举了非常多的学习链接和资料，可以说是十分全面了，我看了一下除了有微信小程序开发相关的例子，demo还有各种前端开发的相关教程和资料。然后还有我比较赞同的是@贺嘉老师的回答，如何在1个小时的时间里快速上手做一个小程序Demo，并且是完全从开发环境到最后上线跑起来的全部过程，可以说对新手是十分友好的学习资料了。

近日和同事一起吃饭，期间也正好聊到微信小程序的开发；俗话说，三人行，必有我师焉，我本身自己是对小程序开发不太熟悉的；一位小伙伴就推荐我去看看优达学城的微信小程序开发免费试听课。

可能后边有人就开始跟我说我要开始打广告了，其实我体验的是免费试听课，并不收费的，而且所有人都可以去试听，问题问的是《入门微信小程序开发，有哪些学习资料》我个人认为，通过一些视频资料进行学习微信小程序开发也是个不错的选择，而选择哪个平台，哪些课程学习，都是需要靠自己体验的，下面我就说说我去体验的一个全过程。

利益相关，我个人没有报收费的部分，但是我听完了完整的免费课程部分，下面都只是对免费课程的点评。

在互联网无处不在的今天，学习方式非常丰富，线上的，线下的，线上和线下相结合的都有；回想起几年前，自己也看过国外大学的线上公开课，期间，也陆陆续续接触过一些线上的技术学习平台，下面开始正文：

一、做好准备

知己知彼，百战不殆；先上优达学城的官网逛逛，看看这个学习平台，到底有什么料；因为我的目的很明确，就是想看看这个平台，如何教会我微信小程序的开发；

入口在这里：

微信小程序开发课程_学习微信小程序开发技术_程序开发培训-优达学城(Udacity)官网 | Udacity

首先课程主页，是整个课程的简单说明，一目了然，而且是中文授课，中文字幕；对于英文不好的同学，比较友好；另外，需要注意的是，需要HTML、CSS和JavaScript基础，不确定自己是否达标的，可以花10分钟，做一下平台提供的测试，题目本身并不复杂，稍有基础的同学，分分钟就可以通过测试；不具备的同学，可以通过平台提供的前端开发（入门）课程，学习对应的基础知识；

二、开始体验

体检通过，接下来，开始正式体验；点击免费试听课程链接，然后注册账号，登录，开始学习；

上图是整个课程的大纲，只有成功申请注册账号后才能看到，废话不多说，重点介绍一下我在“10分钟体验小程序开发真实课堂”的体会。

1. 概览

通过33秒的视频，明确学习目标：如何搭建小程序页面；视频中着重强调了即将要学习的2部分内容：

a. 开发工具和文件类型介绍

b. 构建小程序页面所涉及的基本操作，包括：插入文字和图片、调整排列和格式以及对页面导航栏样式进行调整

对于有前端基础的同学，课程内容相对简单，都是非常基本的操作，不管是插入文字和图片，还是调整排列和格式，和利用html编写页面，使用css控制样式，基本类似。可以说是：大同小异；

看似大同小异的两部分内容，其实非常关键；首先，小程序的运行环境是微信，对于开发工具的介绍非常必要；其次，小程序页面作为小程序开发的最基本单元，是小程序开发的基石，在熟悉这些常规操作的前提下，才能满足我们更加复杂的开发需要。

2. 工欲善其事，必先利其器

做过开发的同学都知道，一款趁手的编辑器，是可以有效提升开发效率的；对于微信开发者工具，主要分为3部分：工具栏，模拟器和调试器；通常情况下，前端开发使用的是相对轻便的编辑器，不需要编译，也没有模拟器，浏览器就是模拟器；

而对于类似android studio，xcode这样的编辑器，光是介绍编辑器本身，就足够出一本书了；

对于微信开发者工具这种“全能型”的IDE，课程中并没有逐一介绍，而是把最常用的几部分做了介绍，对于初学者，非常友好。至于开发工具的其他部分，我们可以边开发边学习，将学习贯穿始终。

3. 尺寸单位rpx

在概览里，不是先介绍编辑器，再介绍构建页面的基本操作吗？怎么说到rpx了呢？

有过移动端开发经验的前端同学都知道，适配不同尺寸的屏幕，对于初学者来说，并不容易理解；对于小程序，这个问题被简化了成了一个新的尺寸单位：rpx；课程中，把这节课放在非常靠前的位置，而且用了一整节的内容来介绍，可想而知，rpx非常重要；

但这还不是最骚的，最骚的是：课程并没有直接告诉我们rpx到底是什么，而是通过一个rpx小测试，让我们自己整合信息，得出结论；

作为一个过来人，对于这种学习方式，很是赞同；我们的日常工作中，会遇到很多之前从未遇到过的问题，面对这类问题，如何找到解决问题的思路，非常关键，正所谓：授之以鱼不如授之以渔；

课程中介绍的方式，就是使用搜索引擎，另外，就是微信官方开发文档，而且贯穿于整个课程之中；

在我们通过搜索引擎找到答案后，课程中提供了一个互动式的答案输入框，输入答案后，可以测试我们的答案是否正确，也会让我们获得成就感，增强自信心；

可以看出，课程的设计是很有套路的，循序渐进的，先让我们自己动手，丰衣足食；然后分享了他们是如何通过搜索引擎找到答案的，并给出了正确答案和结论；最后，给出了终极答案：小程序开发官方文档；这也是我们学习新知识时的惯用套路。

正如课程中介绍一样，“在小程序的开发过程中，你一定离不开 官方文档 的帮助。我们不会带你走过文档中每一个页面，我也没有看过每一页的文档。 但当我在网上搜索学习时，官方文档永远是我最倾向的选择。每使用一个新的官方接口，我也会去文档中仔细阅读！不看官方文档写小程序，无异于闭门造车呢！”

建议：大部分的小程序开发者都是国内的，而且小程序的官方文档也是中文优先的，对于会科学上网的同学，优先推荐google，另外，百度、搜狗等搜索引擎，也是可以的！ 很多小程序的博文、资料还是以中文居多。

4. 构建小程序页面

在课程中，是通过构建一个天气应用来贯穿教学的；课程中的要求是：显示气温，字号为200rpx；

亮点又来了！和刚才通过搜索引擎找到答案类似，但这里的交互方式和之前不一样，是通过一个类似todolist的任务列表，让我们自己确认，是否完成了这个任务，然后，进入下一项的学习。

这里的精髓就在于，课程中并没有强制我们必须把任务设置为已完成，才能继续后面的学习，这也是对我们自觉思考和学习的一个考验；假设我们并没有完成气温字号的修改，直接进入下一项，对于后面讲解的内容，也不会有深刻的印象，学习效果也会大打折扣；如果我们很用心的去寻找答案，思考，并实践，在看到正确答案的时候，比较容易形成共鸣，学习效果也更加深刻。

接下来，课程中讲解了如何完成字号的修改，同时，有一个非常值得注意的细节，就是课程中把类名“title”修改为“temp”来表示气温；同时，也说明了这么做的原因：“这虽然不会产生任何效果，但是会增加代码可读性，随着代码越来越多，可读性会变得越来越重要。”

对于有实际工作经验的同学来讲，应该有所体会，虽然代码是给电脑来运行的，但更是给人来看的，这里所说的可读性，是非常重要的概念，尤其是在团队协作开发的时候，代码的可读性越强，维护成本就越低，对于工程师来讲，这也是必备素质之一；

再接下来，就是查看，比较示范代码对应分支；

这部分内容，和小程序开发本身，并没有直接关系；但确是日常开发工作中，必不可少的；课程中使用git来作为版本控制系统，各位可以根据课程介绍的学习方法：通过搜索引擎，了解git相关的背景知识和常用操作。

到这里，我们完成了气温的修改，涉及到的内容，除了仅有的几行代码以外，还有代码的可维护性，以及git的使用；麻雀虽小，五脏俱全；这其实也是我们实际项目的一个缩影，在明确具体的需求后，我们的首要任务，并不是立刻上手写代码，而是要从整体考虑，所涉及到的方方面面，包括涉及到的模块，影响范围，可读性，可维护性，开发效率，版本控制等等；

5. 页面搭建的后续步骤

完成刚才的修改后，后续修改在课程设置上，从第6节到第10节，其实是一样的，启发式的教学方式，从课前的自我练习，并给出答案，到课程的具体讲解，再到代码的版本控制，思路很清晰，深入浅出的教会我们如何去做开发，不光是针对小程序的开发，而是真正的作为一个实际的小程序项目，去教学；同时，也教会我们如何去学习、思考，如何成为一个更好的工程师。

说到这里，体验课程的教学内容也即将结束，最后一小节的内容，则总结了我们前面所学到的知识！并给了一个很好的建议：把代码上传到github上，github上的活跃度，对于找工作至关重要，越早开始越好。

总结

回顾整个体验过程，一气呵成，由浅入深；对于学习习惯的培养，也非常有帮助；尤其是这种启发式的教学方式，参与感很强，并不是单纯的看视频和文字，会有课前练习，课中讲解，以及最后的总结；而且是和微信官方合作的，还可以得到领域专家的指点，并能够和志同道合的小伙伴一起，用最短的时间高效成长。在我看来，高效成长不就是我们最大的收获吗！

授人以鱼不如授人以渔，是我对这套课程最大最直观的评价，如果感兴趣不妨来试试这套不一样的微信小程序学习资料。

首先入门微信小程序开发非常简单，你只要会 JS 的话，开发小程序非常简单，如果你会 React 和Vue 的话，那开发微信小程序更简单，因为他们的思想如出一辙。

如果你是零基础的人，想入门微信小程序开发，必须先学习 JS，会 CSS 样式就行。

学习一门语言和开发最好的资料就是官方文档，微信小程序官方文档很详细，从组件到API都很全面，另外还是中文的，看起来真的很容易。

现在分享一些学习资料，如下：

• 开源项目（1010 更新）
• 微信官方资料（0924 更新）
• 工具文档（0924 更新）
• 资料（0924 更新）
• 教程（1012 更新）
• 讨论（0924 更新）
• 文章（0924 更新）
• 看法观点（1010 更新）
• 视频（1010 更新）
• Q&A（1010 更新）

微信小应用资源汇总整理

开源项目

• 微信小程序 - 豆瓣电影 (hingsir/weapp-douban-film)（1010）
• 小程序 hello world 尝鲜 (kunkun12/weapp)（1010）
• 微信小程序版 2048 小游戏 (natee/wxapp-2048)（1010）
• 微信小程序 - 微票 (wangmingjob/weapp-weipiao)（1010）
• 微信小程序购物车 DEMO(SeptemberMaples/wechat-weapp-demo)（1010）
• 微信小程序 V2EX(jectychen/wechat-v2ex)（1010）
• 微信小程序 - 知乎日报 (myronliu347/wechat-app-zhihudaily)（1010）
• 微信小程序 - 公众号热门文章信息流 (hijiangtao/weapp-newsapp)（1010）
• 微信小程序版 Gank 客户端 (lypeer/wechat-weapp-gank)（1010）
• 微信小程序集成 Redux 实现的 Todo list(charleyw/wechat-weapp-redux-todos)（1010）
• 微信小程序 - 番茄时钟 (kraaas/timer)（1010）
• 微信小程序项目汇总（1010）
• 微信小程序版聊天室 (ericzyh/wechat-chat)（1010）
• 微信小程序 - HiApp(BelinChung/wxapp-hiapp)（1010）
• 小程序 Redux 绑定库 (charleyw/wechat-weapp-redux)（1010）
• 微信小程序版微信 (18380435477/WeApp)（1010）
• 小程序开发从布局开始 (hardog/wechat-app-flexlayout（1010）)
• 微信小程序 - 音乐播放器 (eyasliu/wechat-app-music)（1010）
• 微信小程序 - 简易计算器 - 适合入门（dunizb/wxapp-sCalc）（1010）
• 微信小程序 - github(zhengxiaowai/weapp-github（1010）)
• 微信小程序 - 小熊の日记 (harveyqing/BearDiary)（1010）
• 微信小程序 (Seahub/PigRaising)（1010）
• 灵犀新闻客户端 - 基于微信小程序（应用号）开发（1010）
• 微信小程序（应用号）实战课程之记账软件开发（1010）
• [微信小程序版 简易情绪音乐播放器（1010）] (http://git.oschina.net/laohuangshu/wmusic)
• 微天气 - 开发一个完整的微信小程序 (上)（1003）
• 小程序 CNode 社区（1001）
• wxapp-Breakfast（0929） 9 月 28 日晚 8 点直播开发
• weapp-demo 豆瓣电影（0927）
• wechat-v2ex（0927）
• wechat-app-zhihudaily（0927）
• wechat-dribbble Dribbble（0927）
• wechat-weapp-gank Gank 客户端（0927）
• weapp-gold 掘金主页 （0927）
• wechat-weapp-mapdemo（0927）地图定位
• wechat-demo（0923） demo
• wechatApp-demo - 微信小程序 DEMO
• weapp-quick - 微信小应用示例代码

微信官方资料（1104）

微信官方文档和开发工具已开发，不需要再用破解开发工具，直接使用官方开发工具就好。

• 微信公众平台小程序开放公测 (1104))
• 设计指南（1104）
• 开发教程（1104）
• [简易教程] (https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089359)
• [框架] (https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html?t=1474644083132)
• [组件] (https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=1474644089682)
• [API] (https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=1474644087418)
• [工具] (https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=1474644084689)
• [Q&A] (https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html?t=1474644089359)

工具文档

• weapp-ide-crack - 微信小应用资源破解
• API - API 文档
• 开发者工具文档
• API 文档
• 微信公众平台 API 文档 - GitHub
• 视图组件文档

资料

• [信小程序剖析（三）：为什么我们需要一个兼容「微信小程序」的 Web 框架？（0926）] (http://www.toutiao.com/i6334280813353370114/)
• [微信小程序剖析（二）：框架原理 | 在桌面浏览器上运行的（0924）] (http://www.toutiao.com/i6333820509242786305/)
• [微信小程序剖析（一）：运行机制（0924）] (http://www.toutiao.com/i6333298768707846657/)
• [微信小程序平台运营规范（0923）] (http://wxopen.notedown.cn/product/)
• [微信小程序平台常见拒绝情形（0923）] (http://wxopen.notedown.cn/product/reject.html)
• [微信小程序平台服务条款（0923）] (http://wxopen.notedown.cn/product/service.html)
• [微信小程序认证指引（0923）] (http://wxopen.notedown.cn/product/renzheng.html)
• [特殊行业所需资质材料（0923）] (http://wxopen.notedown.cn/product/material.html)

教程

• [教程] 玩转微信小程序（一）怎样将「服务号」改造成「小程序」？（1012）
• [教程] 让「微信小程序」运行在 Chrome 浏览器上，让我们使用 WebStorm（1012）
• 番外篇！全球首个微信应用号开发教程！小程序 DEMO 视频奉上！（1011）
• 微天气 - 开发一个完整的微信小程序 (下)（1010）
• [微天气 - 开发一个完整的微信小程序 (中)（1008）] (http://swiftcafe.io/2016/10/08/wx-weather-app-2/)
• [微天气 - 开发一个完整的微信小程序 (上)（1003）] (http://swiftcafe.io/2016/10/03/wx-weather-app/)
• 博卡君的应用号（小程序）开发教程首发第五弹！（0928）
• [微信小程序入门干货（0926）] (http://www.toutiao.com/a6334581140863648002/)
• [微信小程序（应用号）开发新闻客户端的实战课程 (绝对干货）（0926）] (http://www.toutiao.com/a6334461358152089858/)
• 博卡君的应用号（小程序）开发教程首发第四弹！（0926）
• [博卡君的应用号（小程序）开发教程首发第三弹！（0923）] (https://my.oschina.net/wwnick/blog/750974)
• [博卡君的应用号（小程序）开发教程首发第二弹！（0923）] (https://my.oschina.net/wwnick/blog/750495)
• 博卡君的应用号（小程序）开发教程首发第一弹！
• 解决微信 web 开发者工具崩溃导致无法使用问题（0923）
• [微信小程序开发环境搭建（0923）] (http://mp.weixin.qq.com/s?__biz=MzIyNjE4NjI2Nw==&mid=2652557458&idx=1&sn=9300a6486ffc9e9cb51bb8f35ec87146&chksm=f39a35e6c4edbcf04518a8b45678b599a3f387a01de2d15a291bdd5f52d2e4ababe47175c3c7&scene=0#wechat_redirect)
• [开发微信小程序的必备技能图谱（0923）] (http://geek.csdn.net/news/detail/103138)
• 简易教程
• 常见问题
• 微信小程序怎么开发？玩物志用一个上午上线了电商应用 | 爱范儿
• 首个微信小程序开发教程！
• 抢先看：微信官方发布的微信应用号（小程序）设计规范
• 开发微信小程序入门前
• 微信小程序开发教程！
• 微信小程序开发环境搭建
• 微信小程序「官方示例代码」浅析【上】
• 微信小程序「官方示例代码」浅析【下】
• 微信小程序常见问题汇总 微信小程序有什么功能 如何申请？

讨论

• 开始内测的「微信公众平台 · 小程序」可能有哪些应用场景？
• 如何评价 9 月 21 日开始内测的「微信小程序」？
• 如何看待微信将推应用号？
• 微信小程序（应用号）价值是什么？
• 微信的小程序会导致安卓和 ios 开发失业吗？
• 微信小程序的出现会给前端开发带来什么？
• 在微信应用号（微信小程序）开发什么什么应用爆发概率大？
• 微信小程序（应用号）来了，对创业者来说到底是不是好机会？
• 微信应用号是否真能颠覆 APP？
• 如何获得「微信 · 小程序」的内测资格？
• 微信 “小程序” 真的来了！移动端会炸吗？Native 开发何去何从？
• 做微信小程序的开发者，需要掌握哪些编程技能？

文章

• 微信小程序是谁的 “通往财富自由之路”？
• 微信小程序怎么开发？玩物志用一个上午上线了电商应用
• 关于微信小程序（应用号）的底层逻辑分析和拥抱建议
• 微信小程序，普通人如何抓住这波万亿级红利！实现逆袭
• 一文读懂微信小程序（应用号）是什么，创业者是否值得投入进来做？
• 关于微信小程序（应用号），我能透露的几个细节
• 关于微信小程序，我联想到的几点
• 微信小程序（应用号）是如何通过苹果审核的？
• 微信应用号来了，程序猿要涨工资了！
• 一篇文章读懂微信小程序 (应用号) 是什么，是否值得投入进来做？
• 微信小程序动了谁的蛋糕, 又会把蛋糕分给谁?
• 微信应用号正式公开，一个开放的微信已经上路？
• 一张图看懂微信 “小程序”
• 你想做个怎样的微信小程序？

看法观点

• [原创] 微信小程序可能会造就千万个一万富翁, 看看会是哪些人？（1010）
• [极客思维，不一样的视角看微信小程序] (http://www.toutiao.com/a6334527463460995329/)
• 我们真的需要 “小程序” 么？| HTML5 老兵如是说（0923）
• [小程序绝对是跨平台混合开发的最好背书（0923）] (http://geek.csdn.net/news/detail/103482))
• 从程序员的角度分析微信小程序
• 微信推出小程序应用号，移动互联网第二春会来吗？
• 微信小程序，一个有局限的类似 React Native 轮子！
• 你的产品适不适合做微信小程序？你需要这篇产品逻辑分析
• 关于微信小程序（应用号）的底层逻辑分析和拥抱建议
• 微信应用号相关资料集合
• 关于微信小程序（应用号）的全部看法
• 微信小程序，仅仅是 Web App 么？

• 封闭一周开发微信应用号（小程序）
• 为什么要发布微信应用号

视频

• 视频 - 全网首个微信小程序开发视频教程（1010）
• 视频 - 微信小程序开发实战第一季 (CSDN)（1010）
• 视频 - 微信小程序开发实战第二季 (CSDN)（1010）
• 视频 - 极客学院微信小程序开发（1010）
• 视频 - 微信小程序新手入门 (51CTO)（1010）
• 微信 “小程序” 内部视频流出：原来是这么玩的（0923）

Q&A

• 关于小程序，我知道你想知道这些（1010）

以上内容来自于：github，地址：deific/wechat-weapp-resource

不方便在知乎看的，看一去 GitHub 上看。

另外：

菜鸟教程里的汇总的资料也不错。

欢迎大家关注我的微信公众号：非著名程序员，一起交流学习微信小程序开发。

微信小程序学习线路图

学习线路图镇楼，然后从几点开始分析。

• 从认识小程序，
• 小程序火爆程序
• 小程序就业前景、
• 小程序就业方向、
• 小程序学习
  

微信小程序到底有多火？

网曝微信“跳一跳”小游戏的广告售卖达到了一天500万人民币。

2018年，微信小程序将成为中国零售、电商重要的消费场景，行业对于微信小程序开发者的人才需求指数级增长。

认识微信小程序

微信小程序是基于微信运行的移动应用程序，提供原生APP体验，无需安装、打开即用、用完即走，让应用“触手可及”。它可以运用于各个领域，上线仅1年，收揽4亿用户、1.7亿日活、发布58万个小程序。

微信小程序就业前景分析

就业岗位分析

每个学习阶段学到的知识：

第一阶段：

第二阶段：

第三阶段：

第四阶段：

微信小程序学习视频：

68集轻松玩转微信小程序

视频http://yun.itheima.com/course/372.html?zzj

资料链接：https://pan.baidu.com/s/17UjCKcLBxf2HNsc2GcguRA

想要视频的小伙伴们请关注点赞留言哦，让我看到你们的诚意我就放出视频。

良心推荐小慕登场~微信小程序开发干货合集，快上车！

小程序的成功，让广大程序员早已不再纠结该不该学习小程序开发 ，但会纠结如何学习小程序开发，为帮助大家更好的学习小程序开发，特地整理一批相关学习资源，供大家交流学习！

近期优秀文章

• Scott|微信公众号与小程序后台的 10 个上车姿势
• 晚风轻拂|基于后端云开发微信小程序《口袋吉他》
• mytac|迅速上手：使用taro构建微信小程序基础教程
• 7七月|再看微信小程序
• 风蓝小栖|mpvue两小时，产出一个《点钞辅助工具》小程序
• 刘员外_|微信小程序商城-注意要点
• 向建峰_Javan|微信小程序动画两种实现方式
• 旧巷老友|（干货）微信小程序转发好友
• 向建峰_Java|小程序如何解决重复点击？
• 旧巷老友|微信小程序UI组件库 iView Weapp快速上手
• 向建峰_Javan|微信小程序popup组件你会了吗？
• 叶梅树|推荐一个简约漂亮的小程序日历插件
• Scott|一锅端掉微信公众号-小程序的用户资料获取
• 向建峰_Java|小程序双向调节的Slider滑块，速度get
• 蜗牛老湿|mpvue: vuejs和小程序碰撞出来的火花
• Noahlam|美团小程序框架mpvue入门教程
• Noahlam|美团小程序框架mpvue 蹲坑指南
• UncleCatMySelf|做一个开源的小程序登录模块组件（token）
• Scott|微信公众号与小程序后台的 10 个上车姿势
  

作者:一斤代码

• 5个最优秀的微信小程序UI组件库
• 使用mpvue开发小程序教程（一）
• 使用mpvue开发小程序教程（二）
• 使用mpvue开发小程序教程（三）
• 使用mpvue开发小程序教程（四）
• 使用mpvue开发小程序教程（五）
• 使用mpvue开发小程序教程（六）
  

作者：西江无月

• 微信小程序多层展开/收起列表
• 微信小程序精品input组件、虚拟键盘
• 微信小程序多张图片上传
• 微信小程序购物车案例

【入门课程】

• “连胜”|《入门微信小程序开发》如果你对小程序的了解只停留在听过名字，那么你可以花费1小时40分钟听一下这个课程，本课程只要讲解微信小程序的基本知识，如何注册，并开发一个自己的小程序，以及小程序开发过程中部分常见的问题。

适合人群：对html基础知识已经掌握，最好是前端开发者，对数据渲染有一定了解。

【初级课程】

• “七月”老师，你可以自行看看七月老师其它课程的学员对他课程的真实评价，选择他的课，不需要纠结，更不需要犹豫！《微信小程序入门与实战 》，通过本课程的学习，你将学会和掌握小程序的框架结构、数据绑定机制、模板、数据缓存、常用组件和API等相关知识。
  适合人群：有一定JavaScript和CSS基础，不需要你精通JavaScript和CSS，了解JavaScript和CSS的基本语法即可

【中级课程】

• 蜗牛老湿|《全网首发mpvue课程小程序全栈开发》2018年3月，美团mpvue开源，是现在业内最火的vue开发小程序解决方案。慕课网第一时间推出，业内第一门mpvue全栈课程。结合腾讯云提供的小程序全套后端解决方案，从小程序+vue+Koa2的基础学习，到使用vue语法全栈开发一个小程序，完整的上线流程，使学生能直接上手开发一个完整的小程序并且上线，形成一个完整的知识体系。
  适合人群：了解JS基本语法、对Es6语法了解的前端开发，对小程序的感兴趣的后端开发

• 编_程_浪_子|《Python flask构建微信小程序订餐系统》，该课程是python flask+微信小程序完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。从基础语法入手，易于掌握，构建MVC架构，增进对小程序和后端API的理解认识。深入浅出带你进阶全栈工程师课程，帮助你快速提升项目经验，掌握项目开发技巧，提高项目中解决问题的能力。
  适合人群：Python web后端开发，想进阶全栈却不知道如何系统学习的你

• 七月|《纯正商业级应用-微信小程序开发实战》这是一次纯正的实战，不模拟、不虚构，以极致的产品体验，完美的细节处理，带你开发“完全真实”的小程序，扫描图片下方二维码，即可体验课程项目：
  
  适合人群：具备HTML、JavaScript和CSS基础知识，对微信小程序开发感兴趣的程序员

最后

小伙伴们有什么建议，都可以留言哦!非常期待与各位小伙伴的交流！

链接：https://www.imooc.com/article/51133

来源：慕课网

推荐阅读：

有哪些好笑的关于程序员的笑话？

正在工作的程序员，生活状态什么样？

程序员是如何看待「祖传代码」的？

网上黑程序员的现实依据是什么？程序员真的那么悲惨吗？

程序员反感（讨厌、不喜欢）什么？

如何快速打好java基础？

怎样才是优秀的前端工程师？

你为什么要学算法？

如何自学 Android 编程？

微信小程序开发入门

修真院Web工程师零基础全能课

本节课内容
微信小程序开发入门

主讲人介绍
沁修，葡萄藤技术总监

项目经验丰富，擅长H5移动项目开发。
专注技术选型、底层开发、最佳代码实践规范总结与推广。


直播录屏版

文字解析版

小程序的介绍和准备


什么是小程序
微信之父张小龙是这样描述的：
小程序是一种不需要下载安装就可以使用的应用，它实现了应用触手可及的梦想。

用户扫一扫或者搜一下即可打开应用，也体现了用完即走的理念。
用户不用关心是否安装太多应用的问题：
应用将无处不在，随时可用，但又无需安装卸载。

小程序的优势
它的优势体验上虽然没法完全媲美原生app，但综合考虑还是有很多优势：

省流量省时间；开发成本更低，可以把更多人力物力财力放在运营上，做好内容本身；

总体来说相当于一个精简版的app

准备工作
1.注册账号 （https://mp.weixin.qq.com）
2.激活邮箱
3.信息登记
4.登录小程序管理后台（不完善好信息是无法发布小程序的）
5.完善小程序信息，绑定开发者（尤其是团队多人开发）

在官网下载安装开发工具

安装完成后就可以登录：
微信扫码登录开发者工具，这里选小程序项目，进入小程序本地项目进行管理

新建一个项目：

目录自选本地文件夹，AppID就是登录微信开发平台后的设置里能看到的AppID。

如果没有ID也可以使用官方的测试号，但这样只能做做简单的本地测试，最后是填上适合的项目名称。

上手第一个小程序新建项目

选择一个空目录，使用普通快速启动模板
然后就可以看到预设的模板和内容了，可以直接查看或者点击编译在手机上扫一扫查看

接下来了解一下小程序的目录结构：

pages
index
index.js 页面脚本逻辑文件
index.wxml 页面模板文件
index.wxss 页面样式文件
index.json 单个页面的配置信息，比如头部底色，头部title等

utils
app.js 全局逻辑
app.json 全局配置信息，包含了小程序的所有页面路径，界面表现，底部tab等基本信息
app.wxss 设置样式
project.config.json 开发工具的配置信息

小程序的启动过程：

打开小程序之前，微信会把小程序的代码包下到本地。
然后通过app.json的pages字段知道当前小程序的所有页面路径，写在pages字段的第一个页面就是小程序的首页。

然后微信就把首页代码装载进来，渲染出首页。

然后app.js里App的实例onLaunch回调就会执行来一段简单的实战，为项目增加一个city选择页：
首先添加一个新的页面

1.在pages文件添加新页面文件

2.为city.wxml模板页面添加选择器：

picker是一个类似于select的picker组件
bindchange是用于绑定一个change事件的方法
value的值是一个序列号
range则是表示这个选择器的取值范围

3.然后在city.js中书写页面逻辑：

Page({})是页面的一个实例
data中的数据用于视图绑定
bindPickerChange则是绑定的change事件的函数名

可以看到，data中的数据可以在页面中被直接绑定使用
在js代码中想要改变data的值也非常简单，使用this.setData就可以了
这里我们传入了一个index序列号，也就是picker选择器选择了country数组中的元素。

通过这样的方法，就可以为页面添加不同的组件。

4.选择之后如果想要将选中的city的值传到其他页面比如首页

那么一般来讲有3种方法：

第一种是将数据存到全局的data中，也就是app.js的data中，这样所有的页面都能取到这些数据。
但我们并不推荐这样的用法，就如同我们不推荐使用全局变量都一样。

第二种是将数据带在url路径后作为参数传导：
http://local.com/foo?bar=abc。
这样的做法在传输复杂数据的时候并不是太合适。

第三种则是使用本地存储，在需要的页面再将其取出就可以了：
// 存储
wx.setStorageSync('city', {});
// 取出
wx.getStorageSync('city');


这样就完成了我们的第一个上手小页面的开发

获取实战经验，自信赢取职位
以上就是上节课的内容解析啦，截止本篇，我们已经完成了前端从零基础到独立完成项目的所有课程

大家可以在公众号【葡萄藤IT技能树】菜单栏获取课程全部视频及文字内容资料

想进一步深入学习及获取复盘项目资格的同学，欢迎加入我们的IT交流群565734203共同交流学习！

推荐阅读：
修真院全民使者招募令
为什么互联网公司不爱招新手？