【微信小程序宝典】从零开始做微信小程序开发NO.2

为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习；

首先感谢几位给予建议的同学，包括@dzp @M-信念 @Somnus13 ，以下内容只是一部分，但是够用了，可以先放出来给大家看看：**一：微信小程序的特点
**张小龙：
张小龙全面阐述小程序
，推荐通读此文；

小程序是一种不需要下载、安装即可使用的应用，它出现了触手可及的梦想，用户扫一扫或者搜一下即开打开应用，也出现了用完即走的理念，用户不用关心安装太多应用的问题，应用随处可用，但又无须安装卸载。我当时是这样来定义什么是小程序的。

1：无需下载：我们直接使用它，所以无须安装是小程序最基础的一个特性；

2：触手可及：当我们拿着智能手机接触周边的时候，我们可以通过手机直接获得信息，就是周边的信息；

3：用完即走：对于周边要完成的任务来说我们需要的是用完即走；

4：无须卸载：小程序看起来是程序，但是它以完全不同于过去APP的形状出现，它有更灵活的应用组织形态；

二：微信小程序官方地址

1：官方工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/ 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html；在这里查看如何符合设计标准，仅供参考，非强制性； 4：运营规范：https://mp.weixin.qq.com/debug/wxadoc/product/index.html；在这里查看禁止事项； 5：接入指南：https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html 6：支付文档：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1

7：客服消息：https://mp.weixin.qq.com/debug/wxadoc/introduction/custom.html?t=20161221

8：特殊行业所需资质材料：

https://mp.weixin.qq.com/debug/wxadoc/product/material.html?t=201714

9：数据分析：https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201714**三：如何学习微信小程序
**

多看官方文档，多看几遍，遇到问题时再看，没有问题时继续看；

@jsh5css ：1、首先要通读一遍官方文档，看看都有哪些东西，都能干什么；2、对感兴趣的部分，把例子抠出来放到IDE上面运行一下，运行没问题就自己折腾折腾例子3、自己写个demo，遇到困难当然就来小程序联盟啦，找找看有没有类似的demo4、每天进论坛看看有什么新帖子

@Somnus13 ：我觉得基础知识一定要过关！！！事件绑定 ajax请求本地存储之类先搞清楚小程序之外是怎么实现的遇到问题看文档，看不懂第二遍，再不行啥时候看懂再开始做如果你在群里发问没人理你，不是大家都解决不了就是你问的问题别人根本不想理百度，谷歌，bing 别一直就放着，用起来还有最重要的一点不要眼高手低，人家的demo下载下来跑起来然后看懂之后一定要自己尝试写一遍！

正常思路啊首先是静态页面数据展示然后是页面跳转然后就会考虑带参数实现详情页面然后。。。

找一个熟悉的逻辑开始模仿然后就会一步步往前走了

@xiaoyedeng ：
多走弯路才能少走弯路

四：公司开发前必读
**
根据观察，很多公司因为不了解小程序，而导致盲目跟进而盲目开发，无法有效利用小程序的特性，甚至白白浪费了开发周期；事前准备：微信小程序需要https请求，需要准备1：备案
的域名：由于备案需要一定的时间，所以请事先准备**
2：受认可的证书
https排查说明：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=6483：一个账号只能发布一个小程序，如需发布多个，请申请多个

1：必须通读运营规范；有需要禁止开发的事项需要了解；比如直播，游戏，抽奖，排行榜等；常见拒绝情形：https://mp.weixin.qq.com/debug/wxadoc/product/reject.html?t=2017142：在微信下禁止的一些规则，在微信小程序中同样不能涉及；比如诱导分享；3：暂未开放的类目，无法申请，详情请在本站搜索“服务范围”的文章查看最新服务类目推荐阅读并收藏：[跳坑指南《七十》如何让微信小程序服务类目审核通过

](http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1898) 1月7号更新图：[图片上传中。。。（1）]
4：微信小程序的问答1：小程序没有入口，这和公众号一样。2：小程序没有官方
商店
3：小程序不会有订阅的关系
4：很有限的通知能力，限制的非常严格
5：小程序不能分享到朋友圈，但是可以分享到聊天和群聊之中。
6：小程序不能做游戏
7：用户能搜索到小程序，但我们会极力限制搜索能力，避免被滥用。
8：目前有提供的关联是可以在公众号中看到该企业还有哪些小程序，反之亦然。
9：会轻量提醒用户附近有哪些小程序存在，比如附近哪一家店提供小程序。

5：目前能看到的入口线下扫码：用户可以在小程序中使用扫一扫。对话分享：用户可以分享小程序或其中的任何一个页面给好友或群聊。消息通知：商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片。小程序切换：用户可以在使用小程序的过程中快速返回聊天。历史列表：用户使用过的小程序会被放入列表，方便下次使用。公众号关联：微信小程序可与公众号进行关联。搜索查找：用户可直接根据名称或品牌搜索小程序。

6：遇到无法解决或难以理解的难题时，请在官方社区内进行反馈：https://developers.weixin.qq.com7：你必须通过微信认证，才可以使用微信支付等功能：认证指引：

https://mp.weixin.qq.com/debug/wxadoc/product/renzheng.html?t=201714

**五：个人开发前必读
**
**
**
个人开发和学习的同学，最关心的是个人额能不能申请和发布，目前的答案是：不能发布，但是可以开发；

1：申请Appid：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=495；拥有appid后，即可开始真机预览；本方法仅用于测试和研究，无法认证和审核，请勿申请认证；2：如何真机预览：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=18123：如何设置体验者/开发者/体验版本/：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=12484：快捷键列表：格式调整Ctrl+S：保存文件（必须**保存才可以看到效果
**）
Ctrl+[， Ctrl+]：代码行缩进
Ctrl+Shift+[， Ctrl+Shift+]：折叠打开代码块
Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行
Shift+Alt+F：代码格式化
Alt+Up，Alt+Down：上下移动一行
Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行
Ctrl+Shift+Enter：在当前行上方插入一行
Ctrl+Shift+F：全局搜索

光标相关Ctrl+End：移动到文件结尾
Ctrl+Home：移动到文件开头
Ctrl+i：选中当前行
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标处
Ctrl+Shift+L：选中所有匹配
Ctrl+D：选中匹配
Ctrl+U：光标回退

界面相关Ctrl + \：隐藏侧边栏
Ctrl + m: 打开或者隐藏模拟器

5：开发工具项目区简介：

配置信息：用于解决在后台配置域名未生效的问题；预览：真机预览
上传：管理员上传至后台，设置体验及审核版本使用；
开发环境不校验：为了让开发环境中使用appid时，不合规则的域名也可以正常使用（比如本地或IP地址及未配置的域名）
压缩代码：为了节约空间，小程序上限为1M：参考：http://www.wxapp-union.com/portal.php?mod=view&aid=934删除项目：删除相应的项目

代理：在这里可以设置代理，或取消代理；用于解决很多因代理而引发的问题；

选择无appid，即可在没有appid情况下进行开发，但是无法预览；
项目名称：随意填写
项目目录：1：如果你选择了一个demo导入，请选择app.json所在的根目录文件夹，请勿选择其上级文件夹，否则会报错：找不到app.json；2：如果你想新建一个项目，请先在电脑内新建一个空文件夹，选择空文件夹即可，假如你选择的不是空文件夹，可能无法看到新建quickstart项目；

快速生成项目目录技巧：在app.json内输入路径后保存，即可生成相应路径的完整文件目录，防止因js或json文件为空而引发的一系列报错

6：后台配置域名：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=803；必须配置域名后，才可以使用配置的域名，比如你需要请求XX地址的数据，必须在后台设置了域名之后，才可以真机请求数据；必须https的域名才可以请求，如果出现https的问题，请查询排查：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=648； 六：新手学习可选系列：
任选其一即可；

特别提示：

微信小程序开发者工具版本及推出日期：介绍目的：据此日期，可以避免自己受到老教程的误导，请优先阅读/使用新日期的教程/demo；在教程中遇到困惑时，请对比官方教程，假如无法解决，请请教熟悉的同学或发帖求助；1014版本：10月14日推出：1028版本：10月28日推出：1123版本：11月23日推出：1221版本：12月21日推出：1230测试版本：12月30日推出：1304版本：1月4号推出

以下系列仅供参考，有效期仅限于2017年1月期间，你可以在新手入门教程内看到更多：http://www.wxapp-union.com/portal.php?mod=list&catid=7

开发详解系列：

**《一》开发准备，开发工具使用简介，工程目录结构 ...
**
**《二》开发组件使用初步，配置
**
**《三》APP生命周期
**
**《四》页面生命周期和参数传递
**
**《五》布局基础
**

**程序员实战系列
**程序员开发实战系列《一》注册、预览小程序
 程序员开发实战系列《二》微信小程序架构篇

程序员开发实战系列《三》App()和Page()

程序员开发实战系列《四》视图层WXML绑定数据、模板、逻辑

程序员开发实战系列《五》视图层WXML：事件

**学习记录系列
**微信小程序学习记录《一》：目录结构介绍，开发工具菜单介绍
 微信小程序学习记录《二》：系统配置app.json，程序和页面注册.js
微信小程序学习记录《三》：视图容器

**现学现卖系列
**现学现卖微信小程序开发（三）：引入“Rx”为小程序插上翅膀 ...
现学现卖的一个“快递查询“的小程序开发
 现学现卖微信小程序开发（二）
现学现卖微信小程序开发（一）开始

至此，你应该会修改一些基本的属性了，剩下的开始遇到问题，开始跳坑：以下是最新的坑十个：button样式跳坑
 跳坑《二百一十三》 background-image无法获取本地资源图片、...
跳坑《二百一十二》单位rpx/px/em/vh使用说明
 跳坑《二百一十一》转发API：onShareAppMessage使用
 跳坑《二百一十》使用模拟数据mock.js
跳坑《二百零九》textarea组件value不显示
 跳坑《二百零八》使用Express后端框架
 跳坑《二百零七》使用go语言（golang）作为小程序后端说明
 跳坑《二百零六》使用.switchTab跳转到tabbar页传递参数问题
 跳坑《二百零五》微信小程序测试特辑

你可以在这里看到整个跳坑系列：http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=2&filter=typeid&typeid=3**七：如何解决学习过程中的问题
**
1：看文档，尤其是版本更新后，可能文档已经更新，附上了你问题的说明；

2：群内问，群是一个比较好的途径，但是只能解决较为简单的问题；

感谢@清风迅来提示：请各位新同学在群内提问或者是论坛提问时，尽量提供尽量多的信息，比如关键代码，最简demo，自己的报错提示，还有自己的一些看法；可以参考学习一下如何提问：http://mp.weixin.qq.com/s/yuiq4I4UKL2XBjE7SbduCQ

3：论坛搜索；你可以在本站或官方社区内搜索相应的关键词，来查看是否有解决方案；你可以在这里查看搜索方法：

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1824

4：发帖询问，在综合交流区内发帖询问，并@几个大神；

5：常见错误及基本排除方法

1：ES6；使用es6可能导致安卓端真机调试时很多问题出现，还有其他未知问题；原因未知；

2：字母拼错，包括字母拼写错误，大小写没有注意；微信小程序中，有大量这样的代码示例，从中间冒出一个大写，比如支付中的appId

3：官方文档示例代码有误，有时官方文档示例代码也会出现问题，比如大小写出错，或者其他缺少参数等问题；

4：https，这个坑目前遇到的人最多，首先说明一下，工具的这个设置，

，这个设置有一些独特的作用，让你可以让本地避开一些限制；但是这个设置对真机无效，所以假如存在https问题，是否勾选并影响；仍然需要按贴排查：

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=648
8：重启/重装工具大法：有时候编辑器会出现一些莫名其妙的BUG，比如昨天还是好的，今天打开各种问题等等，可以考虑重新编译或多次重启工具或重启电脑；

10：前人经验：有很多人遇到了很多问题，你可以在版块的问答分类下看看其他人遇到的问题及如此解决的；

http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=2&page=2&filter=author&orderby=dateline&typeid=16
11：无法登陆：参考

@M-信念
同学的建议：可以稍微等等；当出现帐号登陆问题时，可以尝试使用他人微信号，或是咨询其他人是否也遇到了相同的情况，不要着急；

12：代理设置；代理设置应该是一个隐藏比较深的坑，但是很多人被坑过，假如你的机器设置了代理，开发者工具可能会也跟着默认带来代理，然后会接踵而来很多登陆，空白等问题；

13：使用搜索；现在本站聚合了大量的微信小程序相关内容，可以考虑使用本站的搜索，来获取自己想找的东西或用于解决问题，搜索时，请使用主要关键词，或相近关键词进行搜索，而不要直接搜索一句话，比如你需要appid，你可以搜索“appid”，你遇到了登陆问题，应该搜索“登陆”，真机预览遇到了问题，可以搜索“真机”，遇到了上传问题，可以搜索“uploadfile”

14：微信版本问题，伴随微信的版本更新，不同的微信版本之间可能会出现不同的未知BUG；你可以在这里查看最新微信版本：weixin.qq.com

6：查询官方问答：最新的官方问答系列：

最后编辑于：2017.12.08 05:14:15

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,233评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,013评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,030评论 0赞 241
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,827评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,221评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,542评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,814评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,513评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,225评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,497评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,998评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,342评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,986评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,055评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,812评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,560评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,461评论 2赞 266

【微信小程序宝典】从零开始做微信小程序开发NO.2

推荐阅读更多精彩内容