从零开始：微信小程序新手入门宝典《一》

时间 2019-12-04

标签开始微信程序新手入门宝典繁體版

原文原文链接

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

一：微信小程序的特色

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

1：无需下载：咱们直接使用它，因此无须安装是小程序最基础的一个特性；
2：触手可及：当咱们拿着智能手机接触周边的时候，咱们能够经过手机直接得到信息，就是周边的信息；
3：用完即走：对于周边要完成的任务来讲咱们须要的是用完即走；
4：无须卸载：小程序看起来是程序，可是它以彻底不一样于过去APP的形状出现，它有更灵活的应用组织形态；程序员

二：微信小程序官方地址

1：官方工具：https://mp.weixin.qq.com/debu...
2：简易教程：https://mp.weixin.qq.com/debu...
3：设计指南：https://mp.weixin.qq.com/debu...；在这里查看如何符合设计标准，仅供参考，非强制性；
4：运营规范：https://mp.weixin.qq.com/debu...；在这里查看禁止事项；
5：接入指南：https://mp.weixin.qq.com/debu...
6：支付文档：https://pay.weixin.qq.com/wik...
7：客服消息：https://mp.weixin.qq.com/debu...
8：特殊行业所需资质材料：https://mp.weixin.qq.com/debu...
9：数据分析：https://mp.weixin.qq.com/debu...es6

三：如何学习微信小程序

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

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

@Somnus13 ：我以为基础知识必定要过关！！！事件绑定 ajax请求本地存储之类先搞清楚小程序以外是怎么实现的遇到问题
看文档，看不懂第二遍，再不行啥时候看懂再开始作若是你在群里发问没人理你，不是你们都解决不了就是你问的问题别人根本不想理百度，谷歌
，bing 别一直就放着，用起来还有最重要的一点不要眼高手低，人家的demo下载下来跑起来而后看懂以后必定要本身尝试写一遍！
——————
正常思路啊首先是静态页面数据展现而后是页面跳转而后就会考虑带参数实现详情页面而后。。。找一个熟悉的逻辑开始模仿
而后就会一步步往前走了json

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

四：公司开发前必读

根据观察，不少公司由于不了解小程序，而致使盲目跟进而盲目开发，没法有效利用小程序的特性，甚至白白浪费了开发周期；事前准备：小程序

微信小程序须要https请求，须要准备
1：备案的域名：因为备案须要必定的时间，因此请事先准备
2：受承认的证书 https排查说明：
http://www.wxapp-union.com/fo...

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

4：微信小程序的问答

1：小程序没有入口，这和公众号同样。
2：小程序没有官方商店
3：小程序不会有订阅的关系
4：颇有限的通知能力，限制的很是严格
5：小程序不能分享到朋友圈，可是能够分享到聊天和群聊之中。
6：小程序不能作游戏
7：用户能搜索到小程序，但咱们会极力限制搜索能力，避免被滥用。
8：目前有提供的关联是能够在公众号中看到该企业还有哪些小程序，反之亦然。
9：会轻量提醒用户附近有哪些小程序存在，好比附近哪一家店提供小程序。

5：目前能看到的入口

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

6：遇到没法解决或难以理解的难题时，请在官方社区内进行反馈：https://developers.weixin.qq.com

7：你必须经过微信认证，才可使用微信支付等功能：认证指引：https://mp.weixin.qq.com/debu...

五：我的开发前必读

我的开发和学习的同窗，最关心的是我的额能不能申请和发布，目前的答案是：不能发布，可是能够开发；
1：申请Appid：http://www.wxapp-union.com/fo...；拥有appid后，便可开始真机预览；本方法仅用于测试和研究，没法认证和审核，请勿申请认证；
2：如何真机预览：http://www.wxapp-union.com/fo...
3：如何设置体验者/开发者/体验版本/：http://www.wxapp-union.com/fo...
4：快捷键列表：

格式调整

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/po...
删除项目：删除相应的项目

代理：在这里能够设置代理，或取消代理；用于解决不少因代理而引起的问题；

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

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

6：后台配置域名：http://www.wxapp-union.com/fo...；
必须配置域名后，才可使用配置的域名，好比你须要请求XX地址的数据，必须在后台设置了域名以后，才能够真机请求数据；
必须https的域名才能够请求，若是出现https的问题，请查询排查：http://www.wxapp-union.com/fo...；

六：新手学习可选系列：

任选其一便可；

特别提示：微信小程序开发者工具版本及推出日期：

介绍目的：据此日期，能够避免本身受到老教程的误导，请优先阅读/使用新日期的教程/demo；在教程中遇到困惑时，请对比官方教程，假如没法解决，请请教熟悉的同窗或发帖求助；
1014版本：10月14日推出：
1028版本：10月28日推出：
1123版本：11月23日推出：最新版本 0.11.112200 更新内容详情
1221版本：12月21日推出： -0.11.1221版本新增功能：客服消息使用指南微信小程序0.11.122100 版本更新详情
 微信小程序-0.11.1221版本新增细节点：扫码接口，微信支付及分享的调试
1230测试版本：12月30日推出：开发者工具测试版本下载：12月30日更新

如下系列仅供参考，有效期仅限于2017年1月期间，你能够在新手入门教程内看到更多：http://www.wxapp-union.com/po...

开发详解系列：

程序员实战系列

学习记录系列

现学现卖系列

至此，你应该会修改一些基本的属性了，剩下的开始遇到问题，开始跳坑：如下是最新的坑十个：

你能够在这里看到整个跳坑系列：http://www.wxapp-union.com/fo...

七：如何解决学习过程当中的问题

1：看文档，尤为是版本更新后，可能文档已经更新，附上了你问题的说明；
2：群内问，群是一个比较好的途径，可是只能解决较为简单的问题；
3：论坛搜索；你能够在本站或官方社区内搜索相应的关键词，来查看是否有解决方案；你能够在这里查看搜索方法：http://www.wxapp-union.com/fo...
4：发帖询问，在综合交流区内发帖询问，并@几个大神；5：常见错误及基本排除方法

1：ES6；使用es6可能致使安卓端真机调试时不少问题出现，还有其余未知问题；缘由未知；
2：字母拼错，包括字母拼写错误，大小写没有注意；微信小程序中，有大量这样的代码示例，从中间冒出一个大写，好比支付中的appId
3：官方文档示例代码有误，有时官方文档示例代码也会出现问题，好比大小写出错，或者其余缺乏参数等问题；
4：https，这个坑目前遇到的人最多，首先说明一下，工具的这个设置，

，这个设置有一些独特的做用，让你可让本地避开一些限制；可是这个设置对真机无效，因此假如存在https问题，是否勾选并影响；仍然须要按贴排查： http://www.wxapp-union.com/fo...
5：重启/重装工具大法：有时候编辑器会出现一些莫名其妙的BUG，好比昨天仍是好的，今天打开各类问题等等，能够考虑从新编译或屡次重启工具或重启电脑；
6：前人经验：有不少人遇到了不少问题，你能够在版块的问答分类下看看其余人遇到的问题及如此解决的；http://www.wxapp-union.com/fo...
7：没法登录：参考 @M-信念同窗的建议：能够稍微等等；当出现账号登录问题时，能够尝试使用他人微信号，或是咨询其余人是否也遇到了相同的状况，不要着急；
8：代理设置；代理设置应该是一个隐藏比较深的坑，可是不少人被坑过，假如你的机器设置了代理，开发者工具可能会也跟着默认带来代理，而后会接踵而来不少登录，空白等问题；

9：使用搜索；如今本站聚合了大量的微信小程序相关内容，能够考虑使用本站的搜索，来获取本身想找的东西或用于解决问题，搜索时，请使用主要关键词，或相近关键词进行搜索，而不要直接搜索一句话，好比你须要appid，你能够搜索“appid”，你遇到了登录问题，应该搜索“登录”，真机预览遇到了问题，能够搜索“真机”，遇到了上传问题，能够搜索“uploadfile”
10：微信版本问题，伴随微信的版本更新，不一样的微信版本之间可能会出现不一样的未知BUG；你能够在这里查看最新微信版本：weixin.qq.com

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