Xcode概览：在源码编辑器中编写代码
招聘信息：
本章节由CocoaChina翻译组成员星夜暮晨（博客）翻译自，CocoaChina校对，敬请勘误。您将大部分开发时间花在了编写、编辑以及调试代码上。Xcode源码编辑器的语法修正、代码补全以及静态代码分析等特性可以帮您快速准确地键入代码。而诸如分拆窗口、快捷键、syntax-aware字体以及文本颜色等自定义特性则允许你根据项目需求配置源码编辑器。要查看和编辑源码文件，请在工程导航器中选中文件，文件的内容则会展示在工作区窗口的编辑区域。键入时修正错误当你在源码编辑器中进行输入时，Xcode会对文本进行扫描。当你出现语法错误时，Xcode会以红色下划线或者插入符号标记。点击错误之处，Xcode则会展示对问题的描述信息。通常，Fix-it可自动修复错误。选中推荐的修复方案，按下Return键接受修复。在上方的屏幕截图中，Fix-it建议在文本字符串之前插入“@”字符。更多信息，请查看 .在您的文件中使用代码片段您可以使用代码片段快速键入源码文本。您可以从Code Snippet Library中直接将代码片段拖放至源码文件中。想要访问Code Snippet Library，请在工作区窗口的实用工具区点击Code Snippet标识按钮（）。Code Snippet Library提供了有用的标准的代码片段，比如屏幕上展示的switch语句代码片段。想要将自己的代码片段添加至代码片段库中，并添加快捷键，请查看.通过模板来创建源文件使用文件模板来添加文件到您的项目中是最省心的办法。要访问文件模板库，请单击工作区窗口的实用工具区的文件模板按钮（），并将这些模板拖曳到项目导航器中来创建源文件。还可以选择 File > New File 或者使用 Command + N 的快捷键来创建源文件。Xcode 将打开一个 New File 对话框，您可以从中选择合适的模板来创建文件。选择完模板后单击 Next 按钮，给文件命名后就可以将其添加到项目中了。进行静态代码分析您可以在运行应用前使用静态分析器查找代码中的bug。静态分析器可在数秒内尝试上千种可能的代码路径，然后报告可能隐藏得很深的错误，或者是几乎不可能被复制的 bug。静态分析器同样还将确定出您代码中没有遵守 API 推荐使用方式的区域，比如Foundation、UIKit 以及AppKit 等API的语言风格。要执行静态代码分析的话，请选择 Product > Analyze。Xcode 的静态分析器将解析程序的源代码，并确定这些问题类型：逻辑错误，如访问未初始化的变量和取消对空指针引用。内存管理错误，如分配内存泄露死存储（未使用的变量）错误由不遵循项目正在使用的框架和库所需的策略所引发的 API 用法错误。静态分析器将在问题导航栏中报告错误，您可以在项目导航栏中单击问题导航栏按钮（）来激活这个视图。在问题导航栏中选择一个分析器消息，以在源码编辑器中显示相关的代码。在源码编辑器中点击相应的消息，然后使用源码编辑器上方的分析结果栏中的弹出菜单来研究错误路径和原因。接着编辑代码以修复错误。欲了解更多，请参阅 Xcode Help 中的使用代码补全功能加快输入当您开始键入某个符号名符号时，Xcode 会提供内联建议以补全其名称。单击建议栏中的某项来选中它，或者使用向上或向下键来更改选中的建议。按下 Return 键接受该建议。当一个方法或者函数含有参数或者引用时，代码完成功能将用占位符来替代每个参数。要在这些占位符中跳转，请选择 Navigate > Jump to Next Placeholder（或者 Navigate > Jump to Previous Placeholder）。另外，使用 Tab 键可以跳转到下一个占位符，Shift + Tab 键跳转到上一个占位符。欲了解更多详细信息，请参阅拆分编辑器窗口来显示相关内容拆分编辑器窗口以便能够查看一个文件的多个视图，亦或者是能一次查看多个相关文件。例如，您可以同时查看某个实现文件以及其对应的头文件。要拆分代码编辑器，可点击工作区工具栏上的辅助编辑器按钮（）来打开辅助编辑器窗口。您可以选择垂直拆分还是水平拆分。如果要改变拆分的方向的话，选择 View > Assistant Editor，然后选择其中一项菜单设置。在上面两个截图中，我们关闭了导航栏和工具栏以最大程度地显示代码编辑器区域。当打开辅助编辑器窗口时，您可以将其设置为两种模式：手动或跟踪。在手动模式下，您通过跳转栏选择要显示的文件。即使您改变了主编辑器的内容，辅助编辑器中的内容也不会改变。在跟踪模式下，您可以从弹出菜单中选择一种标准。这个标准含有一些内含组，比如说副本、父类、子类以及同级类。一旦您选中了一个标准，那么 Xcode 将会在子菜单中列出相应的文件。当您改变了主编辑器中的文件时，Xcode就会基于选中的标准来更新辅助编辑器。要更改模式，请选择辅助弹出菜单中的某一项。（辅助弹出菜单是辅助编辑器跳转栏中前进和后退按钮右边的第一个项目）您可以通过点击辅助编辑器窗格右上方的添加按钮（）来进一步分割辅助编辑器窗格。一旁的关闭按钮（）则将其关闭。快速打开文件选择 File > Open Quickly 来查找一个定义特殊符号的文件，也可以选择一个名称含有特定字符的文件。Open Quickly 搜索栏不区分大小写，并且搜索范围仅限于当前项目和已激活的软件开发包（SDK）。您可以在搜索结果列表中双击文件来打开它们。要打开辅助编辑器窗格中的文件，请在双击时按住 Option 键。要在一个单独的窗口中打开文件，请按下Option + shift 键。要查看能让您指定应在何处打开文件的对话框，请按住 Option + shift 键并单击。使用手势和快捷键使用手势和快捷键可以简化并增强您对源代码编辑器的使用。除了在 OS X 系统上常见的 Multi-Touch 手势，下列这些手势在源代码编辑器中尤为适用：两指轻按可以打开编辑器的上下文菜单（还可以通过Control-click或使用鼠标左键单击显示）两指向上或向下轻扫垂直滚动，以及左右水平滚动。三指轻扫导航栏可以在编辑器中打开任何文件。向左轻扫显示前一个文件，向右轻扫显示后一个文件。键盘序列提供了很多在 Xcode 中常见的菜单命令快捷键。例如，按住 Shift + Command + O 键可以从 File 菜单中调用 Open Quickly 命令，按住 Shift + Command + D 键可以从 Navigate 菜单中调用 Jump 命令。还有一些在编辑操作中的快捷键。例如，Control + K 可以删除从插入点到行尾的所有字符。快捷键通过键值绑定来建立，您可以选择 Xcode > Preferences 然后选择 Key Bindings 来查看和修改快捷键。在代码中自动全局更改数据Xcode 提供了几种方法来适用于多行文本修改。您可以同时修改某一范围内出现的所有相同的符号名称，比如说局部变量或者参数名。将插入符放在您想要编辑的符号上，当三角形符号出现时，单击它来显示出菜单，然后选择 Edit All in Scope。接下来编辑该符号。当您输入新的内容后，该符号的所有实例都将同时改变。通过选择 Find > Find and Replace 来更改一个文件中的文本字符串实例。您可以通过选择项目中的 Find > Find and Replace 项来改变项目或者工作区中的文本字符串实例。这个命令将显示查找导航器。您可以自定义其操作--例如限制搜索范围，或者按大小写来匹配字符串。查找导航器提供了一个预览，允许您替换字符串的所有实例或者接受还是拒绝某一单独替换。您可以在搜索区使用通配符字符串模式。要进入该模式的某个部分，单击查找检索区左侧的小三角形，然后选择 Insert Pattern 。从模式弹出菜单中选择一项。Xcode 将在查找到的字符串中的当前光标位置插入该通配符。您可以重构您的代码以改善其结构、增强易读性和可维护性而不改变其行为。重构操作（也称为变换）被应用到您在代码编辑器中选择的某个代码片段或符号上。您可以重命名符号、提取代码并放到方法中、创建父类、移动项目到父类或子类，以及在整个项目文件范围内封装变量。在选择完需要重构的代码片段或符号后，选择 Edit > Refactor，然后选择合适的重构命令。预览面板将显示应用重构时代码会出现的变化。在预览对话框的左窗格中取消某个文件可以将其从重构操作中移除。您可以在预览中直接编辑您的源代码。所有的修改操作将在预览中显示，并且其会包含在重构操作中。显示符号的定义将鼠标指针放到一个符号上，然后按住 Command 键并单击来显示这个符号的定义。源代码编辑器将导航到该符号的定义中，并将其高亮显示。如果该定义位于单独的文件中，那么代码编辑器将会显示这个文件（亦或者将鼠标指针放到符号上，然后选择 Navigate > Jump to Definition）。将鼠标指针放到一个符号上，然后按住 Command + Option 键并单击，就可以在辅助编辑器窗格中显示其定义，如截图中所示的APALoadFramesFromAtlas函数。这个方法可以让您在查看符号定义时保持该符号一直在视图中。使用代码折叠来检查代码您可以通过隐藏源代码的其他部分，来让自己更容易将注意力集中在源代码的特定函数或方法上。选择 Editor > Code Folding > Fold Methods & Functions。定位到您想要折叠的方法上，然后双击它的省略按钮来折叠该方法。下面的截图显示了configureConnectedGameControllers方法的折叠。将鼠标指针移动到编辑器左边缘上，它将会在焦点框中显示一个焦点范围带——比如说截图中的for声明。范围外的代码将会用阴影覆盖。欲了解更多详细信息，请参阅自动配对花括号、圆括号以及方括号Xcode 帮助您自动配对分隔符，比如：将鼠标指针放在源代码编辑器左边缘的焦点范围带上。Xcode 高亮显示该位置的括号范围，如前面的屏幕截图所示。键入一个左括号，Xcode 将会在键入换行符之后插入右括号。键入一个右括号或者其他分隔符，Xcode 将简要强调其对应的分隔符。使用向右箭头键将插入点移动到结束分隔符后面，Xcode会暂时高量强调其对应的分隔符。选择 Editor > Structure > Balance Delimiter。Xcode 将选择插入点附近的文本，其中包括最近的一组封闭分隔符。双击任意一个分隔符。Xcode 将选中由分隔符以及其对应分隔符所封闭的全部文本。欲了解更多详细信息，请参阅选择字体和文本颜色Xcode 基于编程语言来分析代码，并为每个标记或字符串分配一个句法标签。例如，项目中的每一个注释、关键字以及类名都将被定义。Xcode 为每个句法标签类型分配一种颜色和字体以让代码易于阅读。您可以通过选择 Xcode > Preferences 然后选择 Fonts & Colors 项来选择多种字体和颜色。例如，Presentation 主题增加了字体大小以让屏幕上的项目文本更易阅读。您可以创建自定义的字体和颜色主题。自定义编辑和缩进选项您可以更改源代码编辑和缩进设置，以适应您的喜好。选择 Xcode > Preferences，然后选择 Text Editing 来修改如下配置：在源代码编辑器边列显示行数在您输入后自动插入右括号当您输入代码时显示代码补全建议使用空格或制表符缩进虚换行(soft-wrap)线执行语法感知缩进查找某个符号的相关文档您可以通过将插入点放到符号上来查看其参考文档，比如说方法或属性。在检查器窗格工具栏中选择 Quick Help 按钮（）。如果检查器窗格没有打开，那么可在主工具栏中单击该按钮来以在工作区配置按钮集中显示该导航。符号的 Quick Help 项出现在工具区。文档信息包括针对该符号的完整参考文档链接、声明该符号的头文件、相关的编程指南、以及相关的示例代码。（按住 Option 单击该符号，以查看弹出窗口中的信息概要，即声明、符号的描述信息、其所有返回值、其可用的 SDK版本、头文件以及相关参考文档的链接）。单击 Quick Help 中的链接，Xcode 将会打开一个单独的 Xcode 文档查看器窗口。Xcode 的文档查看起提供了访问信息的快捷步骤，而无需将您的注意力从正在编辑的文件中离开。除了详细的框架API参考外，文档查看器还包括苹果工程师提供的完整编程指南、教程、示例代码以及视频演示。在类引用中单击靠近查看器顶部的“More related items（更多相关项）”来跳转到与您的任务相关的另一个文件中。使用工具栏上的搜索栏来查找关于 API 或者编程概念的额外信息。要在一个消息中内含一个指向该文档的链接，单击分享按钮（），然后选择电子邮件链接或信息。您可以在 Safari 中以 HTML 或 PDF 格式打开。对于示例代码项目来说，单击窗口顶部的 Open Project 来下载该项目然后在 Xcode 中打开。使用源码编辑器获得帮助可以在 Xcode 中直接显示步进说明，以帮助执行常见的源码编辑器任务。在源码编辑器的任意位置按住Control单击，便可以在一个列表中查看一系列常用指令。选择 Show All Hlep Topics 以查看所有关于源代码编辑器的帮助文章。选择某一项任务，然后帮助文章将会出现在 Xcode 的文档查看器窗口中。您可以在Xcode中使用快捷菜单获得Xcode帮助文章。在主界面任何地方按下Control键并单击鼠标，则可以看到适用于该区域的帮助文章列表。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量4556点击量2428点击量2074点击量2043点击量1885点击量1809点击量1738点击量1727点击量1654
&2018 Chukong Technologies,Inc.
京公网安备89如何入门微信小程序开发，有哪些学习资料？ - 知乎<strong class="NumberBoard-itemValue" title="2被浏览<strong class="NumberBoard-itemValue" title=",401,158分享邀请回答mp.weixin.qq.com/debug/wxadoc/dev/?t=93：设计指南：4：设计资源下载：资源下载5：微信小程序公测接入指南：6：微信小程序支付文档：7：新手入门宝典：8：免费视频：9：实战宝典：10：从注册到上线系列：11：精品合集：导航系列：1-6月7月8月9月10月11月特别说明：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日，微信官方宣传六大变化：3月27日：微信官方宣传支持个人注册：3月30日：附近的小程序：4月14日：微信开放长按识别小程序二维码功能；4月17 日：4月18日：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日：8月3日：8月5日：8月18日：8月19日：8月25日：8月31日：9月9日：10月13日：11月3日：1月19日小程序资讯集合 1月19日小程序Demo集合 1月5日小程序资讯集合 1月5日小程序Demo集合 12月29日小程序资讯集合 12月29日小程序Demo集合12月15日小程序资讯集合 12月15日小程序Demo集合 12月1日小程序资讯集合 12月1日小程序Demo集合11月6日小程序资讯集合 11月6日小程序Demo集合 10月24日小程序Demo集合10月14日小程序资讯集合 9月22小程序Demo集合 9月15日小程序资讯集合 9月15日小程序Demo集合9月8日小程序资讯集合 9月8日小程序Demo集合 插件/工具更新：
--------5月4日更新：--------特殊合集：
微信小程序项目总结系列：作者：Tong_T，博客地址：Tong_T的博客 - 博客频道 -
--------跳坑系列更新：
--------开发前必读简要
基于大量无效开发，无法上线的案例，所以开发前部分知识十分重要；|
微信小程序个人注册简单步骤
打开，点击右上角立即注册，进入小程序注册|
微信开发者工具【项目】详解
为什么我的小程序通过审核，但是搜索不到呢？原因是必须在后台内点击发布，才会发布；|
小程序开发上线（发布）步骤
这篇帖子将简单的介绍基本的步骤，以便新手们建立一个基本的印象；|
从零开始：微信小程序新手入门宝典
为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里； |
安卓或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
登录态失效等 |
小程序敏感词汇过滤问题
用户需要发表内容的小程序，需要设定关键词过滤，屏蔽掉政策不允许的内容：|
公众号关联微信小程序简单方法
很多人可能会问，公众号如何添加微信小程序呢？步骤很简单： 1： |
无法长按识别及无法分享到朋友圈的替代方法
看到 同学发了一个花样二维码，我看了之后，顿时来了一个灵感。。。 |
使用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，需要 先在微信开放平台内绑定小程序；，方可解密出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可能出现的问题五花八门，请做好心理准备|
坑点较多。。。|
重力感应及罗盘API开始搞摇一摇了。。。|
计时器/倒计时相关
倒计时，计时器等组件使用说明|
视频播放相关（video组件）video标签认宽度300px、高度225px，设置宽高需要通过wxss设置width和height。|
text组件，文本换行及空格
总结一下text组件，以及文本换行，文本溢出及空格，复制问题；|
animation动画相关问题
本帖主要是针对animation的使用相关的教程及问题说明|
toast吐司组件问题说明（自定义toast）
包括自定义toast等问题说明|
picker及picker-view组
用途广泛的联动选择器，目前已经比较实用了；|
tabbar相关问题说明
包括tabbar不显示，自定义tabbar等问题的说明|
6.9K315 条评论分享收藏感谢收起imgcache.qq.com/qcloud/la/demo-source/qcloud-applet-album.zip下载，也可以从腾讯云团队的 Github 仓库拉取。我推荐从 Github 仓库拉取，这样可以及时获取最新的代码。git clone 最终，我们会得到类似这样的文件目录。简单解释下目录结构：applet（或app）: 「小相册」应用包代码，可直接在微信开发者工具中作为项目打开。server: 搭建的Node服务端代码，作为服务器和app通信，提供 CGI 接口示例，用于拉取图片资源、上传图片、删除图片。assets：「小相册」的演示截图。源码下载完成之后，我们打开微信 web 开发者工具，新建项目「小相册」，选择目录applet（或app）。「小相册」源码分析在进行部署之前，我们来简单分析一下「小相册」的具体代码。毕竟只看效果不是我们的目的，我们的目的是以「小相册」为例，了解如何开发小程序并与服务端进行交互。「小相册」包含一个描述整体程序的 app 和多个描述各自页面的 page。主程序 app 主要由三个文件组成，分别是 app.js（小程序逻辑）、app.json（小程序公共设置）和 app.wxss（小程序公共样式表），其中前两个为必备文件。config.js 文件中包含了一些部署域名的设置，现在不用管。在 pages 目录下，有两个 page 页面，分别是 index 和 album。页面结构算是比较简单的，其中 index 是小程序启动时默认进入的页面。每个页面下，至少要有 .js（页面逻辑）和 .wxml（页面结构）两个文件，.wxss（页面样式表）和 .json（页面配置）文件为选填。你可能注意到了，这些文件的文件名与父目录的名称相同。这是微信官方的规定，目的是减少配置项，方便开发者。接下来我们以 index 页面为例做简单的解释。index.wxml 是这个页面的表现层文件，其中的代码非常简单，可以分为上下两大部分。&view&
&view class="page-top"&
&text class="username"&恭喜你&/text&
&text class="text-info"&成功地搭建了一个微信小程序&/text&
&view class="page-btn-wrap"&
&button class="page-btn" bindtap="gotoAlbum"&进入相册&/button&
&view class="page-bottom"&
&text class="qr-txt"&分享二维码邀请好友结伴一起写小程序！&/text&
&image src="../../images/qr.png" class="qr-img"&&/image&
&image src="../../images/logo.png" class="page-logo"&&/image&
页面的演示效果如下： (二维码自动识别)我们看到，页面上有一个“进入相册”的按钮。正常理解，点击后该按钮后我们就可以进入相册了（这不废话嘛）。那小程序背后是怎样实现该操作的呢？在 index.wxml 中，我们发现对应的 button 标签上定义了一个 bindtap 属性，绑定了一个叫做gotoAlbum 的方法。而这个方法可以在 index.js 文件中找到。事实上，文件中也只定义了这一个方法，执行的具体动作就是跳转到 album 页面。Page({
// 前往相册页
gotoAlbum() {
wx.navigateTo({ url: '../album/album' });
album.js 页面中编写了程序的主要逻辑，包括选择或拍摄图片、图片预览、图片下载和图片删除；album.wxml 中三种视图容器 view、scroll-view、swiper均有使用，还提供了消息提示框 toast。具体方法和视图的实现请查看。所有的这些功能都写在 Page 类中。lib 目录下提供了小程序会用的一些辅助函数，包括异步访问和对象存储 COS 的 API。总的来说，和微信官方宣传的一样，在开发者工具下进行小程序的开发，效率确实提高了很多，而且有很多微信提高的组件和 API。所以，在开发速度这点上的体验还是非常爽的。另外，由于「小相册」需要使用诸多云端能力，如图片的上传和下载，我们还需要进行服务器端的部署和设置。具体请看接下来的步骤。第三步：云端部署 server 代码虽然服务端的开发不是本文的重点，但是为了全面地体验「小相册」的整个开发部署流程，我们还是有必要了解服务端的部署，这里我们使用的是腾讯云。如果你想更爽一点，那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，可以。可谓是一键部署好云端。如果你以前没有使用过腾讯云，可以选择免费试用（我已经领取了 8 天的个人版服务器），或者以优惠的价格购买所需的服务。你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。第四步：准备域名和配置证书如果你已经有腾讯云的服务器和域名，并配置好了 https，那么可以跳过第 4-6 步。在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。简单来说，就是你的域名必须走 https 协议。所以你还需要为你的域名。如果没有域名，。由于我们没有收到内测，也就暂时不用登录微信公众平台配置通信域名了。第五步：Nginx 配置 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 服务，需要登录 ，然后在其中完成以下操作。点击创建 Bucket。会要求选择所属项目，填写相应名称。这里，我们只需要填上自己喜欢的 Bucket 名称即可。然后在 Bucket 列表中，点击刚刚创建的 Bucket。然后在新页面点击“获取API密钥”。 弹出的页面中包括了我们所需要的三个信息：唯一的 APP ID，一对SecretID和SecretKey（用于调用 COS API）。保管好这些信息，我们在稍后会用到。最后，在新的 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的「」，大家也可以看看。 (二维码自动识别)1.6K165 条评论分享收藏感谢收起