微信·小程序开发工具安装指南及注意事项

Posted 2020-08-10

这两天闲来无事，也安装了 “微信折叠”的开发工具来玩一下。以下是一些小道消息及使用体验，过两天我会写一篇文章以开发者的角度来详细评价微信小程序:

• 微信小程序不能开发游戏类、直播类功能，小程序每个人关注的上限是20个（还不确定，不过我相信这是真的，这次公布的API里并没有视频组件。微信太大，苹果要有所顾忌，但是微信也要做出相应的让步)

• 微信目前有没有同苹果商谈好，还是个未知数，毕竟会对AppStore有一定的冲击。

• 抛弃了大量的javascript组件后，这个生态体系变得相当的封闭，微信解释肯定是：为了更好的性能提升。那么我们拭目以待。

• 小程序的入口是微信里的三级菜单，就是在“Tab栏发现里的游戏下面加入一个“小程序”。反正，这一栏里的购物和游戏我是从来没点进去过的。

• 以腾讯的尿性，小程序同服务号一样，其关系链及重要功能的开放程度会因“人”而异。对，优质的接口只会开放给腾讯的儿子们（滴滴呀、京东呀）

• 微信从来就是一眼不合就封杀，优步就是很好的案例。官方解释是优步涉嫌诱导，滴滴同样被禁过。利益面前还讲道理？反正我是不信的。腾讯的投资覆盖各个行业，一旦腾讯掌握了应用分发入口，给儿子们一些小小的甜头，应该不是什么大事儿吧。有人说AppStore也有很多限制，但至少苹果并没有像腾讯这样大量的投资消费级App，直接产生利益冲突的点并不多。话说回来，这点创业者是不用考虑的，暂时，你的产品和创意，在微信眼里还是个蝼蚁。。。你不用担心受到不公正的对待。如果真有一天你被微信封杀了，只要不是因为违规内容，那么你应该高兴，然后迅速炒作一波…….

• 很多做Web的朋友尝试在小程序里写div、ul等标签，别试了，没效果，包括JQUERY在内的DOM操作库，小程序内是不能运行的。小程序本质是JS+ReactNative，对RN底层做了重构，已经和dom说拜拜了。

 

下面是详细的安装步骤（9月24日更新）。注意：9月23日给出的微信小程序开发者工具0.7和0.9破解版本已过时。微信官方已给出了不需要破解的0.9.092300版本。win10下测试通过

以下是安装步骤：

1. 按操作系统下载相应开发工具版本

    windows 64位

    windows 32位

    mac

    小程序示例组件demo下载

2. 双击安装

3. 打开微信web开发者工具

4. 添加一个项目，如图

   

5. 填写项目信息 注意AppId这里选择“无AppId”,AppID只有内测用户才有，无AppId在目前有功能限制，比如不能发布项目到手机微信中预览。

   

6. 点击“添加项目”按钮后，将创建一个小程序项目, 工具已经为你创建了一个demo —– Hello World

   

开发者工具功能区域介绍

工具左侧分别有编辑、调试、项目调试区按钮，分别解释3个区域的作用.。

编辑： 是你写代码的地方，左侧的文件目录是微信为你创建的一个项目基础骨架，你可以在这个骨架上编写自己的业务代码。当我们编写完代码后，点击编辑视图左下角的“编译”即可进行调试和运行（当点击“编译后”，工具视图会自动跳转到第二个“调试”视图）

调试: 是你调试代码的地方。整个界面同Chrome的调试工具一模一样（应该是内嵌了WebKit内核），相信有Web开发经验的同学很快就能上手。F8 运行到下一个断点、F10 单步运行、Ctrl+/ 注释代码。

解释一下“调试”视图下，顶部的六个Tab栏（Console、Sources、Network、Storage、AppData、Wxml）：

 

Console： 工具的输出区域，在程序中调用 console.log(‘测试一下console’), 可在这里输出自定义调试信息。同时，这里也是工具遇到异常和发出警告的信息输出区域。见图：

 

 

Sources: 源代码显示区域，这里你可以打断点并调试代码。Sources Pannel 用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sources Pannel 中开发者看到的文件是经过处理之后的脚本文件，同编辑区域的代码有稍许的差异，比如开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。

 

 

Network: 用于观察和显示 网络的request 和 socket 的请求情况

 

 

 

Storage: 如果你在程序中使用了 wx.setStorage 或者 wx.setStorageSync 后，在这里将会显示你的数据存储情况。是的，小程序支持本地缓存数据。

 

 

 

AppData: 用于显示当前项目当前时刻 appdata 具体数据。可以在这里管理应用程序中的各类变量（不同于Storage中的缓存变量，只有调用wx.setStorage 或者 wx.setStorageSync 的数据才会出现在Storage中）。在这，你可以随时修改变量，工具将把变量改变在左侧预览视图中实时显示。我们可以看到，AppData 以页面（pages/index/index）作为分组单位，每个页面只会显示自己的AppData，非常的清晰。

 

Wxml：将Wxml标签同预览界面实时关联，在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的 wxml 代码。

最后说下“项目”这个功能区块儿， 项目实际上是用来上传和预览项目的。微信要求所有发布的小程序都必须审核，所以需要在这里将小程序上传（应该是类似于AppStore，但肯定不是AppStore的发布模式，苹果应该不会允许。小程序目前同用户的接触方式还是未知数，而这恰恰是最重要的一块儿）。如果你没有被内测邀请，这里你是不可以上传和预览项目的，也不可以真机运行小程序，所以真正的体验相对于原生App还是未知数。目前阶段，你只能熟悉一下小程序的API，以便在公测后迅速拿出自己的产品，抢夺第一波红利。

总体来说，小程序的大概开发模式和模型 已经暴露，其本质是JS+RN，很多人说JavaScript程序员的春天来了，其实小程序的体系和Web开发还是有很多区别的。微信言下之意是要抛弃你们熟悉的DOM采用他的组件体系，更熟悉这种组件式开发的不是传统的Web前端，而是ios开发人员（更早点你可以追溯到Flex和SilverLight），我本人是不喜欢这种非JS原生的组件式开发的，自由度会受限。后续，我会持续更新小程序的开发例子和教程，尽快帮助大家上手开发业务和产品。你现在需要做的，就是静心想想，我应该开发一个什么样的产品？

 

关注 我的个人博客 www.imayi.me