开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第12天,点击查看活动详情 学习完微信小程序,又学了支付宝小程序,他们俩有很多相似的地方,也有不同的地方,把不同的地方列举了一下。
文件构成
支付宝小程序也是分为app和page两层。app 用来描述整个应用,page 用来描述各个页面。
mini.project.json小程序的配置文件app.js全局逻辑app.json全局配置文件app.acss全局样式,可省略- 小程序的核心也是一个响应式的数据绑定系统,分为视图层和逻辑层。这两层始终保持同步,只要在逻辑层修改数据,视图层就会相应的更新。和微信小程序一样。
- 在项目根目录中创建
mini.project.json,可在这个文件中新增配置项实现项目的编译,开发功能。其中,miniprogramRoot配置项用来指定小程序源码目录,也就是app.json文件所在位置。
开发者写的所有代码最终将会打包成一份 JavaScript 脚本,在小程序启动的时候运行,在小程序结束运行时销毁。
npm插件
- 支付宝小程序支持
npm下载第三方插件,需先在小程序根目录下执行如下命令安装该模块:使用import再逻辑层js文件中引入,与react/vue一样,而微信小程序不支持npm。 - 但使用时也有一定的限制,由于
node_modules里第三方模块代码不会经过转换器,为了确保各个终端兼容,node_modules下的代码需要转成 ES5 格式再引用,模块格式推荐使用 ES2015 的 import/export。同时,浏览器相关 web 能力同样无法使用。
模块化
小程序支持使用ES5import/export模块。
import util from './util'; // 载入相对路径
import absolute from '/absolute'; // 载入项目根路径文件
关键字
- 小程序保留的关键字globalThis、global、AlipayJSBridge、fetch、self、window、document、location、XMLHttpRequest。
- 如果遇到了关键字,可以使用
as对模块进行重命名。
import { window as myWindow } from './myWindow'
console.log(myWindow)
注意: 小程序包体积限制在2MB以内。图片尽量使用CDN或者服务器上的图片数据,测试的时候没影响,但是上线的话是上线不了的。还有体积太大也做不了真机测试。