小程序环境搭建与开发工具介绍 - cexo

时间：2024-02-18 20:10:23

小程序环境搭建与开发工具介绍

最近公司里发现好多项目都是跟微信小程序相关，所以对于移动端开发的我来说觉得有必要紧跟时代的潮流来学学它，说不定哪个时间点就可能派上用场，不能给自己的技能设限，在学得动的年纪遇到觉得不错的学就是的，当然自己的主业一定得要想办法精通，毕境得靠它养活自己的，好费话不多说，这里是在跟着网上的教程来学的，纯小白跟着大师走就对了，所以这里会把整个学习的点滴记录下来，逼迫自己一定得要“动手”，而不是只看不动的假把式。

小程序环境搭建与开发环境介绍：

开篇当然就是整整微信小程序的开发环境喽，这里参考了大佬的这个文章https://course.7yue.pro/lin/lin-ui/来学习，按着这个大纲一步步来搭建自己的小程序开发环境，真的是纯小白，之前完全没有接触过小程序~~

开发前的第一步：注册小程序账号：

先登录微信公众平台，之前有注册过微信公众号【但没运营过】，就用这个账号了,如下：

登录之后，在左侧会有一个“小程序”的入口：

由于我还木有开通小程序的功能，所以先要开通一下：

点击之后，则会提示：

点击“前往注册”：

此时得注册一下，所以填写注册信息，然后点击“注册”：

此时需要激活一下账号，激活成功之后，则会到这个界面：

关于个人账号的区别，如作者也对它进行了描述，这里截图看一下：

所以这里选个人，其实在选择它之后官方对它就有说明，如下：

填写好之后，如下：

 

然后点击继续会弹一个警告提醒：

点确定：

此时就可以到小程序的开发平台后台啦，如下：

然后点击“开发”选项，随后在右侧顶部点击【开发设置】，找到页面中的AppID(小程序ID)。AppID是非常重要的小程序ID，我们将在之后会使用这个AppID，需妥善保管和保存。如下：

微信Web开发者工具下载及安装：

先点击“文档”：

注意不是点击“开发”---“开发者工具”哈，我之前就以为开发工具是在这个里面下载的，如下：

好，回到咱们的工具下载页面：

点击“工具”：

咱们下载稳定版本既可，我电脑是mac，所以选择mac版本的，如下：

接下来则默认安装既可，安装完成如下：

温馨提示：小程序的开发工具官方名称为：“微信开发者工具”，其中并不包含“小程序”3个字。看来微信的这个IDE并不想仅仅只是用来开发小程序。事实上也确实如此，这款开发工具不仅仅可以用来开发小程序，还可以用来调试运行在微信上的网页以及微信小游戏。

新建第一个项目：

开发工具安装完成后，我们来新建第一个小程序项目。双击打开微信开发者工具，如果你是第一次打开或者长时间未打开微信开发者工具，开发工具都会弹出一个二维码，请使用微信“扫一扫”扫描该二维码，如下：

扫描之后则会进入开发主界面，如下：

看到左侧有几个选项，下面直接引用博主的介绍：

小游戏、公众号网页和小程序分属不同的开发体系，小游戏和公众号均不在本次的研究范围，所以我们只需关注第一个小程序这个项目选项。选择第一个【小程序】，然后在右侧点击 + ，这将打开一个新建小程序的面板，如下所示：

关于这块的介绍也直接引用博主的：

而里面提到的AppID正是在之前我们注册时这块看到的：

所以咱们来创建第一个微信小程序的项目直观的感受一下，当然是HelloWorld喽：

点击新建：

 

微信开发者工具界面功能介绍：

下面先来对开发工具功能进行一个整体的了解，依然从博主那了解到：

WX20190310-175805@2x WX20190310-175331@2x

我们可以将主界面分为以上6个区域，分别是

  1. 区域1 【模拟器】
  2. 区域2 【文件管理器】
  3. 区域3 【编辑器】
  4. 区域4 【调试面板】
  5. 区域5 【菜单栏】
  6. 区域6 【工具栏】

下面针对常用的一些功能有个大致的了解，随着小程序开发的不断深入，自然而然工具就熟悉了，没啥可说的。

模拟器：

【模拟器】主要是用来模拟小程序在真机上的显示效果与逻辑运行状态。我们可以在这里预览到小程序在真机上的运行情况。在模拟器的顶部有如下图所示的一条工具栏。“iPhone 6”这一栏可以让开发者选择模拟器的机型用来模拟小程序在不同机型上的运行情况：

”75%“一栏可以调节模拟器的显示比例:

“wifi”一栏，可以让我们选择不同的网络环境：

文件管理器：

这个没啥可说的，就是我们工程的代码树状结构，里面的功能随着之后的不断学习再熟悉：

其中可以看到里面的大概结构:

其中看到有个"wxss"，就是微信相关的css东东。

项目设置面板：

调试面板非常重要，我们在后续的学习中再来对它进行使用。 【菜单栏】菜单栏功能较多，大多数菜单通过文字描述即可明白它的作用。这里着重介绍一下【设置】->【项目设置】，如下

 

项目设置里包含了项目的基本信息以及其他重要设置，比如小程序基础库版本、ES6转ES5等设置。项目设置是非常重要的设置选项，但其中一些选项的意义需要我们在深入学习小程序后才能理解，这里就不再赘述了。默认情况下，开发者无需修改项目设置，但建议开发者将此处的【不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书】勾选上，为啥？小程序的服务端接口理论上必须是HTTPS的。但在开发阶段我们服务端的接口可能暂时未支持HTTPS，勾选【不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书】可以让小程序不受这些限制，允许访问HTTP接口。所以：

工具栏详解：

【工具栏】工具栏上的按钮是我们经常需要用到的一些功能，所以微信将这些按钮直接列在了整个开发工具最显眼的位置。

  • 工具栏最显著的位置放着4个按钮：【模拟器】、【编辑器】、【调试器】、【云开发】。点击这4个按钮可以打开/关闭相应的功能区域。
  • 【小程序模式】这个选项有2个模式：小程序模式和插件模式:

    通常这里无需调整取默认的小程序模式即可，插件模式是用于开发小程序插件的。
  • 【普通编译】这个选项用于选择小程序的编译模式，除了”普通编译“这个模式外，还可以选择”自定义编译模式“和”二维码编译模式“：

    对于我们还不太熟悉小程序开发的开发者来说，可以先忽略，待之后需要用到时再来学习既可。
  • 【编译】点击后将重新运行整个小程序。由于小程序默认有”自动编译“，所以当我们更改项目代码后（必须保存文件更改），开发者工具将自动重新编译/运行小程序。
  • 【预览】点击后，开发工具将编译当前小程序并实时生成一张二维码，开发者使用微信扫描这个二维码将在真机上运行当前小程序。

    用手机微信扫描它既可以在微信上运行整个小程序。
  • 【真机调试】点击后，同样会编译当前小程序并实时生成一张二维码，扫码后同样会在真机上打开当前小程序。但不同于”预览“，开发工具在扫描二维码后，将打开一个新的”调试“页面，我们在真机上所有的操作信息都将实时的传送到开发者工具中。所以”真机调试“主要的目的是让开发者在真机上调试小程序，这是不同于【预览】的地方：

    并且会在电脑端出现一个调试的窗口：


    待之后用到时再学。
  • 【切后台】可以在开发工具中模拟小程序的前后台切换操作。以iPhone为例，当我们运行一个应用程序时，点击iPhone的“Home”键，应用程序将被切换到后台，但并没有关闭。如果我们想在开发工具中模拟真机上的切换操作，点击【切后台】即可实现。 具体的功能作用我们在学习小程序生命周期时再来细说，效果如下：
  • 【清缓存】是非常重要的一个功能选项。点击【缓存】会出现一个子菜单，包括6个选项：【清除数据缓存】、【清除文件缓存】、【清除授权数据】、【清除网络缓存】、【清除登录状态】和【全部清楚】。

    清缓存选项是开发工具提供给我们用来清除各种缓存的小工具。关于各种缓存将在后面的学习中来接触。如果开发者遇到缓存相关问题是，可以考虑到此处进行处理。
  • 【上传】当我们在开发工具中开发完毕一个小程序后，可以点击【上传】将小程序上传到腾讯的服务器并自动成为体验版。

这里要注意的是小程序只有通过审核后才能正式上线，体验版只是将小程序提交到了腾讯服务器，并未进入待审核的状态。开发者还需要登录到小程序管理后台，将体验版提交，才能进入待审核的状态等待微信审核。这里先简单概括下小程序的发布流程，希望能够让开发者对小程序的发布有一个整体上的认知：【开发】-> [测试] -> [提交体验版]->[提交审核] -> 【等待审核】-> [发布正式版]。

  • 【版本管理】这是开发者工具提供的一个可视化的Git管理工具。

  • 【社区】点击后可进入小程序社区

调试小程序：

首先需要关注的是调试面板顶部从左向右的10个视图菜单。我们重点介绍其中的6个。 WX20190311-022500@2x

【Console】：Console视图是调试面板默认的视图，主要用于输出信息，我们在JS代码中使用console.log(message)所输出的messag就会显示在这个视图中。当然开发者也可以在这里输入并执行JS代码。

 

【Sources】：Sources视图用于显示当前项目的JS文件以及文件结构（树状）。它是我们进行断点调试的的主要视图窗口。那么如何在小程序中进行断点调试呢？首先我们需要点开Sources视图，如下图所示：

在Sources视图的最左侧树状文件管理器中找到我们要打断点的文件，比如上图中我们就选中了index.js?[sm]这个文件。打开这个文件后，在中间区域会显示这个文件的详细代码（源码），我们只需要把鼠标移动到某一行，点击该行代码前的行号即可设置断点。当代码运行到断点处时将停止继续执行。常用快捷键有【F10】单步执行，【F11】进入方法，【F8】继续运行到下一个断点。中查看。Sources视图的最右侧区域将显示断点调试状态下变量的状态与快捷按钮。

【注意】：左侧树状管理目录中有许多相同的文件名，一种带有[sm]后缀，另外一种并不带次后缀。断点调试的断点务必打在带有[sm]的文件代码中。

【Network】：Network视图主要用于观察和显示网络连接的相关情况，它同样是一个非常好用的调试网络请求的工具。这里的Network视图和Chrome浏览器里的Network视图几乎一样。如下：

这里就不多说了。

【AppData】：AppData视图用于显示项目中被激活的所有页面的数据情况，这些数据主要是用来做数据绑定。关于数据绑定我们同样在之后的学习开发中再学习。在这里不仅可以查看数据情况，还可以更改数据，小程序框架会实时地将数据的变更情况反馈到UI界面上。

【Storage】：Storage视图用于显示当前项目的数据缓存情况。关于数据缓存未来学到再说。

【Wxml】：Wxml视图是非常重要的一个功能模块。这个视图类似于Chrome调试工具下的Elements模块，主要用于调试Wxml标签和相关CSS样式，调试方法同Chrome一样。如果你是一个前端新手，那么建议好好地摸索一下这个功能模块的调试技巧，绝大多数和样式、标签相关的问题，都需要依靠这个模块来调试。
 

以上的6个模块功能对我们开发非常有帮助。如果你在开发中遇到一些稀奇古怪的问题，那么最好的解决办法就是使用这6个视图来解决。在后面小程序的开发时也会经常回过头来讲解这些视图的使用技巧，并使用这些视图中的功能解决我们的问题。

快速打开官方API文档：

相关文章