小程序IDE（小程序IDE）

本文目录一览：

• 1、小程序制作软件

• 

  2、微信小程序需要哪些开发工具

• 3、小程序开发工具有哪些

• 4、写给Android开发者看的『微信小程序和Android开发的对比』

• 5、支付宝小程序怎么制作？

小程序制作软件

一、知晓云

知晓云是爱范儿旗下继知晓程序（minapp.com，媒体和小程序商店）后又一个基于微信生态的核心产品。

是国内第一个专注于微信小程序开发的BaaS（Backend as a Service）产品，它可以让开发者更快、更轻松地做出优美、稳定的小程序，且不失灵活性。

二、微信官方小程序开发工具

作为官方小程序开发工具，它只是个工具，而不是一个IDE。官方工具中的代码编辑功能，就是将vscode的代码编辑功能嵌入到工具中，不足以支撑开发。因为是官方工具所以微信官方小程序开发工具有着其他第三方平台不可比拟的天然优势。

三、Coolsite360

CoolSite360推出的小程序编辑器，可以帮助设计师无需编写wxml以及wxss代码，通过小程序可视化编辑器就可快速设计小程序交互UI。使用小程序编辑器设计的页面，可以方便地在微信及浏览器上预览，便于前期的原型展示分享。设计好的页面，可以一键导出符合小程序标准的代码，可直接进行功能开发。

四、即速应用

严格来说，即速应用不是为专业程序员准备的开发工具，但它绝对是一款功能非常强大的微信小程序制作工具。不懂技术不懂编程的小白，一定会爱上即速应用这款工具的。

微信小程序需要哪些开发工具

微信小程序需要哪些开发工具?

一、微信小程序官方开发工具

注意，它只是个工具，而不是一个IDE。官方工具中的代码编辑功能，就是将vscode的代码编辑功能嵌入到工具中，不足以支撑开发。

优点

因为是官方工具所以有这其它第三方工具有这不可比拟的天然优势，如果不是他代码编辑功能太弱的话。

官方工具，可调试，可预览

基本的代码编辑、智能提示、调试等功能都有

项目管理、创建、手机预览、代码提交审核

官方维护更新

缺点

不好的地方也很明显，总体而言是一款工具而不是IDE。糟糕的代码编辑功能，写起代码非常别扭，这是我放弃它的最重要原因。

api提示不全，要一个个查api，影响写代码的速度

很多必备的快捷键都没有，比如全选关键字、快速复制一行等等

颜色主题不能选，不喜欢白色风格怎么搞

没有插件 没有插件 没有插件 重要的事情说三遍

评价

目前因为需要用到微信web开发工具进行小程序的创建、调试、查看、预览、上传，所以这个工具必不可少。但是代码编辑功能实在太差，推荐使用其它第三方代码编辑工具代替。

二、即速应用——适合技术小白的小程序开发工具

严格来说，即速应用并不是为专业程序员准备的开发工具，但它绝对是一款功能非常强大的微信小程序制作工具。不懂技术不懂编程的人，一定会爱上即速应用这款工具的。

优点

可视化操作，直接拖拽组件生成页面

提供大量可套用的模板

可将代码打包-，直接对接到小程序的开发工具

-下来后的代码可以任意编辑

缺点

电商模板居多，其他类别的模板较少

复杂的功能仍然需要专业程序员二次开发

评价

客观地说，即速应用这款微信小程序制作工具非常适合技术小白。因为它相当于把需要代码的`部分都帮你做好了，所以不用太头疼技术方面的问题。当然，如果你是程序员，一样可以在它生成的代码基础上进行二次开发的。

三、Sublime Text 3——简洁高效的开发工具

sublime text 3定位于代码编辑器而不是IDE，在代码提示方面只能算一般般，不过胜在使用起来非常方便。

优点

打开文件速度倍儿快、UI简洁大方

代码编辑体验舒适、高效

拥有大量插件，针对不同需求基本上能找到对应插件来满足

第三方开发者开发小程序插件用于代码着色和代码提示

缺点

没有调试，没有预览

因为是第三方开发者编写的插件，代码提示也不是非常全面

评价

使用门槛不会太高，可以迅速上手。是但如果想实现一些丰富的功能就会比较吃力了。

四、WebStorm——功能繁多的重度开发工具

WebStorm网上有个插件，可以实现代码提示，不能做调试和预览，并且属于重度工具，如果你是，可以尝试一下这个工具。

优点

有插件可以实现代码高亮，代码提示等功能

有非常成熟和非常丰富的功能

各种快捷键

缺点

无法调试预览

功能比较多、比较臃肿

评价

Webstorm和上述几个工具相比，代码编辑功能较强大。但是需要插件支持才可以开发小程序，而且体积臃肿。

小程序开发工具有哪些

一、微信小程序官方开发工具

注意，它只是个工具，而不是一个IDE。官方工具中的代码编辑功能，就是将vscode的代码编辑功能嵌入到工具中，不足以支撑开发。

二、即速应用

即速应用是起步较早、使用量较多、比较成熟的平台。大概是比较有钱，所以到处都能看到他们的广告，有时候我在百度中输入和小程序不相关的词，也会弹出即速应用的广告。在即速应用这个平台上画界面很容易，可以不怎么需要代码的功底。从组件界面来看，给用户的选择还是蛮多，但是模板比较固化，不能做太多修改定制。有些组件是VIP和SVIP级别的用户才能使用，也就是要收费。

三、Sublime Text 3

sublime text 3定位于代码编辑器而不是IDE，在代码提示方面只能算一般般，不过胜在使用起来非常方便。

四、WebStorm

WebStorm网上有个插件，可以实现代码提示，不能做调试和预览，

写给Android开发者看的『微信小程序和Android开发的对比』

微信小程序近期可谓是动作频出，仅最近新增的能力就有：

种种迹象表明，微信对小程序的期望值是很大，所以在它推出的几个月效果没到达预期的情况下，之前的很多『克制』也就逐渐变成『放肆』了 —— 不过不管小程序以后的发展到底怎样，对我们开发者来发，多了解一些总是没有坏处的。

他山之石，可以攻玉。

对于是技术人来说，多了解一些不同的技术、不同的开发模式、不同的架构思想，提高技术『广度』，对于自己的成长是十分必要的。

所以，本文就是从一个 Android 开发者的角度，从项目工程方便切入，来分析一下『微信小程序』跟『Android App』开发上的一些异同。

『微信小程序』开发是一个相对较新的技术，希望通过本文，能让你对它多一些了解。

因为内容是从Android开发的角度来谈的，所以我假设你已经对 Android 开发比较熟悉了。并且对微信小程序的开发也比较感兴趣，如果要是再能有些 javascript、css 的基础的话那就更好了！

Android 开发我们已经比较熟悉——

作为对比，进行微信小程序开发所用的语言是这些——

wxml (WeiXin Markup Language) 基本约等于是 xml。微信之所以没有直接使用 xml ，可能是为了以后扩展方便一些（野心很大）。

同理， wxss (WeiXin Style Sheets) 基本约等于是 css。也是微信扩展了一些功能，比如统一的尺寸单位 rpx 。

对于 Android 来说，对于页面的描述基本上在 xml 中定义的，比如：

这是一个简单的典型的示例，这个文件就是描述了两部分内容：

some.wxss:

很明显可以看出：wxml 是负责了 页面结构 的展示；而 wxss 则负责了对 页面样式 的定义。

这种把结构和样式分离的做法，其实是延续了网页开发中的习惯（html + css）。

这样做的好处起码有两个：

——看起来还是挺简单的结构:

这三个文件用以描述小程序 app 相关的内容，他们的命名是固定这样的，位置也固定是在根目录下。

app.js 基本相当于 Android 中的 Application 类，文件中主要是有一个 App() 函数，来进行小程序的初始化操作。

app.json 的作用跟 Android 中的 AndroidMainifest.xml 文件很相似 —— 都是静态化的配置文件。

app.wxss 定义全局的样式 —— 其定义的样式会作用于每个页面。比如在 app.wxss 中加入：

就可以给所有的 text 控件添加 5px 的 padding 。

当然，页面本身的 xxPage.wxss 可以定义局部样式来覆盖全局样式。

根目录下的 utils 文件夹中有一个 util.js 文件，这个故名思意，是类似于 Java 中的一些工具类的存在。

utils 文件夹其实是一个非必须的结构，而它之所以出现在官方的 HelloWorld 工程中，是作为一个代表，表明了开发者在这里是可以自定义新的文件夹和结构的。微信小程序作为一个使用 js 来开发的平台，是可以使用许多第三方的 js 库的，对于这些第三方库，以及其他的图片资源等，都可以放到自定义的文件夹中。

pages 文件夹下包含两个子目录：index 和 logs ，两个目录的结构都是基本一样的，都是包含四个相同主名称的文件： xx.js、xx.wxml、xx.json、xx.wxss 这几个文件。

这样的一个典型结构表明它是一个小程序的页面，四个文件的作用分别是：

在视图的动态显示上，微信小程序使用了 数据绑定（data-binding） 的方式。

如果你之前使用过 AngularJS 或者 Vue.js 等这些流行的 js 框架，那么你肯定对 数据绑定 并不陌生。它是一种把一个控件的属性绑定到某个数据对象（view-model）的属性的方法，这样在改变数据对象属性的时候，所对应的控件属性也就会相应变化 —— 在开发中，这种方式会使得对 View 层的显示控制变得十分简单、自然。

基于此，软件工程的流行架构方式也在之前的 MVC 、 MVP 之外，又多了一个 —— MVVM（Model-View-ViewModel） 。

数据绑定 这种方式现在是如此的流行，以致于 Android 官方都出了一个 [Data Binding Library] ( ) 来支持数据绑定，但是由于成熟度等原因，目前还并没有成为主流，Android 中的主流视图显示方式，还是通过开发者手动给每个控件 set 数据。

—— 单从这一点上看，微信小程序的开发模式是比原生 Andorid 要『先进』一些的~ 😏

小程序虽然是和前端 H5 页面一样是用 js 来开发，但是由于它最终运行的平台不再是浏览器，而是和 App 的表现几无二致，所以页面的生命周期也是和 App 差不多的。

一个小程序页面的典型生命周期如下：

对比一下 Android 的 Activity 生命周期 ：

微信小程序的页面生命周期稍微简单一些，但主要的思想跟 Activity 生命周期基本是一致的。

小程序的官方 IDE 是微信自己出品 微信Web开发者工具 ，它内置了一个小程序的运行环境，本质上是基于 Chrome 内核的一个浏览器框架，算是一个模拟器了。

——它虽然跟 Android 的各种高大上的模拟器相比起来略显简陋，但是基本该有的功能也基本都有（断点、Log、网络监控等），而且由于是基于浏览器内核的页面 DOM 解析，所以运行的速度也是像浏览器打开网页一样流畅，不会像 Android 模拟器那样对系统资源要求很高。

另外，在绑定了开发者账号之后，也可以用手机进行真机调试来调试小程序，所以也能在上线前用不同的机器来进行充分的兼容性测试。

总体来说，小程序作为一个新的形态，从开发的角度，它可以算作是一个【Native开发】和【H5开发】的结合，它吸收了原生开发和 H5 开发的优点。对于前端开发人员和原生开发人员来说，都可以在微信小程序中找到许多熟悉的东西。再细节的许多点这里就不在赘述了，大家如果有兴趣，可以自己上手去体验一下。

综上，自然也就有两种人特别适合去做小程序的开发——H5的前端开发人员，以及之前的 Android/iOS 原生 App 开发者。

微信小程序的开发总体来说是很简单的。

支付宝小程序怎么制作？

登录开放平台，进入开发者中心频道，点击右侧小程序菜单，可在我的小程序列表页看到对应的小程序应用。

首先，请-小程序开发者工具(IDE)。它是一个辅助开发支付宝小程序的本地应用工具，包含本地调试、代码编辑、真机预览、发布等功能，覆盖了应用开发的完整流程。

-完成之后，打开它，即可使用。部分功能如真机预览和版本上传等需要登录才能使用，在这种情况下开发者可打开手机上的支付宝应用，扫码确定即可登录。

注意：如果登录没有反应，可尝试完全退出手机上的支付宝应用再重新打开。

项目创建

打开IDE，点击新建项目，在支付宝下选择"小程序"，创建项目：

小程序支持多端（支付宝、钉钉、mPaaS）研发和发布，点此查看详情。

代码编辑

打开项目，会默认进入代码编辑模式。从左到右，依次是文件树、代码编辑器和模拟器。

实时预览

在代码编辑器修改任何代码都会重新编译，然后自动刷新应用。

自动补全

工具针对 my 接口和 axml 提供了大量的自动补全提示，以帮助开发者提高效率。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。