当前位置：首页 > JavaScript > 微信、支付宝小程序的开发工具、框架

微信、支付宝小程序的开发工具、框架

一叶知秋2024-04-09 03:21:07JavaScript8

小程序有配套的开发环境/IDE/包管理等基础设施支持，无需再重复建设。
对于业务开发者，小程序不是全新的一套开发方式，在业界可复用，对于框架实现者，RN也是业界流行开源方案，有强大的社区支持。对内对外都避免了另外创建一套只能在内部使用的技术体系，极大降低技术成本。

基于这些原因，在蚂蚁财富这边一些内部原本应该使用H5 实现的业务，也正尝试更多地使用小程序实现，以提升用户体验，目前部分基于小程序RN版开发的业务已在线上稳定运行，后续也会继续尝试把小程序RN版持续打造成高性能稳定的三端统一动态化方案。

三、开发工具

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

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

优点

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

官方工具，可调试，可预览
基本的代码编辑、智能提示、调试等功能都有
项目管理、创建、手机预览、代码提交审核
官方维护更新

缺点

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

api提示不全，要一个个查api，影响写代码的速度
很多必备的快捷键都没有，比如全选关键字、快速复制一行等等
颜色主题不能选，不喜欢白色风格怎么搞
没有插件没有插件没有插件重要的事情说三遍

评价

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

2、即速应用

适合技术小白的小程序开发工具,严格来说，即速应用并不是为专业程序员准备的开发工具，但它绝对是一款功能非常强大的微信小程序制作工具。不懂技术不懂编程的人，一定会爱上即速应用这款工具的。目前只要登录 www.jisuapp.cn 就能使用这款工具。

优点

可视化操作，直接拖拽组件生成页面
提供大量可套用的模板
可将代码打包下载，直接对接到小程序的开发工具
下载下来后的代码可以任意编辑

缺点

电商模板居多，其他类别的模板较少
复杂的功能仍然需要专业程序员二次开发

评价

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

3、Sublime Text 3

简洁高效的开发工具

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

优点

打开文件速度倍儿快、UI 简洁大方
代码编辑体验舒适、高效
拥有大量插件，针对不同需求基本上能找到对应插件来满足
第三方开发者开发小程序插件用于代码着色和代码提示

缺点

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

评价

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

4、WebStorm

功能繁多的重度开发工具

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

优点

有插件可以实现代码高亮，代码提示等功能
有非常成熟和非常丰富的功能
各种快捷键

缺点

无法调试预览
功能比较多、比较臃肿

评价

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

总结

这四款工具各有优劣，适用于微信小程序开发过程中的不同情况。到底选择哪一种，就看自己的需求了。如果你想尽快学会开发微信小程序，那么熟练掌握这些开发工具是非常必要的。

四、MINA 框架

微信小程序的框架示意图如下所示：

1、MINA 框架主要分为两大部分：

第一部分页面视图层，开发者使用WXML文件来搭建页面的基本视图结构(WXML是类似于HTML标签的语言和一系列基础组件），使用wXSS文件来控制页面的表现样式。

第二部分AppService应用逻辑层，是MINA框架的服务中心，通过微信客户端启动异步线程单独加载运行，页面渲染所需的数据、页面交互处理逻辑都在其中实现。MINA框架中的AppService使用JavaScript来编写交互逻辑、网络请求、数据处理，但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过AppService实现数据管理、网络通信、生命周期管理和页面路由。

MINA框架为页面组件提供了一系列事件监听相关的属性（比如 bindtap、bindtouchstart等)，来与 AppService中的事件处理函数绑定在一起，来实现页面向AppService层同步用户交互数据。MINA框架同时提供了很多方法将AppService中的数据与页面进行单向绑定（注意数据的绑定方向是单向的），当AppService中的数据变更时，会主动触发对应页面组件的重新渲染。

框架的核心是一个响应式的数据绑定系统，它能让数据与视图很简单的保持同步。只需要在逻辑层修改数据，视图层就会做相应的更新。示例如下:

<! --页面视图层代码–>

<text closs="app-avatar>欢迎使用{{appnamel

更换名称

//AppService应用逻辑层代码

//初始数据

page({

data:{

appname:‘易投票’

changeAppnawe:functiov(e)H

this.setData({

appnawe:‘我的小程序’

})

}

})

示例中数据是如何更新的呢?首先，开发者通过框架将AppService应用逻辑层数据中的appname 与页面视图层名为appname 的变更进行了绑定，页面在刚打开的时候会显示“欢迎使用易投票。然后，当点击按钮“更换名称"之后，视图层会发送changeAppname 的 tap事件给逻辑层，逻辑层找到事件函数changeAppname。最后，逻辑层changeAppname函数执行了setData操作，将对象appname的值改变为“我的小程序"，因为该对象已经在视图层绑定，所以视图层会显示为图2的名称了。

小程序的 MINA 框架有着接近原生 App 的运行速度，在框架层面做了大量的优化，在重功能上（page 或 tab 切换、多媒体、网络连接等）上使用接近于 native的组件继承，对安卓和 ios 端做出了高度一致的呈现，还有近乎完备的开发、调试工具。

2、目录结构

典型的小程序目录结构非常简洁，一般一个项目包含两个目录（pages 和 utils）三个文件（app.js、app.json、app.wxss）。pages 目录下包括程序所需的各个页面，一个页面对应一个目录，包含 2 至 4 个文件（.js、.wxml、.json 及.wxss）。utils 目录则包含一些公共的 js 代码文件。当然，我们还可以添加其他的公共目录，如用来存放本地图片资源的 images 目录。

逻辑层

小程序的逻辑层就是所有.js 脚本文件的集合。小程序在逻辑层处理数据并发送至视图层，同时接受视图层发回的事件请求。

MINA 框架的逻辑层是由 JavaScript 编写，在此基础上，微信团队做出了一些优化，以便更高效的开发小程序，这些优化包括：

（1）、增加 app 方法用来注册程序，增加 page 方法用来注册页面；

（2）、提供丰富的 API 接口；

（3）、页面的作用域相对独立，并拥有了模块化的能力；

简单概括，逻辑层就是各个页面的.js 脚本文件。

需要注意的是，小程序的逻辑层由 js 编写，但并不是在浏览器中运行的，所以JavaScript 在 Web 中的一些能力都不能使用，比如 dom、window 等，这也是我们开发过程中要克服的阻碍。

视图层

对于微信小程序而言，视图层就是所有的.wxml（WeiXin Markup language）文件与.wxss（WeiXin Style Sheet）文件的集合：.wxml 用于描述页面结构而.wxss 用于描述页面样式。

视图层以给定的样式来展现数据并反馈事件给逻辑层，而数据展现是以组件来进行的。组件（Component）是视图的基本组成单元。

数据层

数据层包括临时数据或缓存、文件存储、网络存储与调用。

（1）、页面临时数据或缓存

在页面 page()中，我们要使用 setData 函数来将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。this 在小程序中一般指调用页面，广泛情况下指的是包含它的函数作为方法被调用时所属的对象。直接修改 this.data 是无效的，无法改变页面的状态，还会造成数据的不一致。单次设置的数据有一个大小限制，不能超过 1024KB，避免一次性设置过多的数据。

setData()函数的参数接受一个对象。以 key,value 的形式表示，将 this.data 中的 key 对应的值改变为 value。key 可以非常灵活，包括以数据路径的形式表示，如 array[0].title，并且无需在 this.data 中预定义。

（2）、文件存储（本地存储）

使用微信提供的现成数据 API 接口，如：

wx.getStorage：获取本地数据缓存

wx.setStorage：设置本地数据缓存

wx.clearStorage：清理本地数据缓存

（3）、网络存储与调用

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。