支付宝小程序1--->文件构成、npm、模块、关键字

362 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 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'; // 载入项目根路径文件

关键字

  • 小程序保留的关键字globalThisglobalAlipayJSBridgefetchselfwindowdocumentlocationXMLHttpRequest
  • 如果遇到了关键字,可以使用as对模块进行重命名。
import { window as myWindow } from './myWindow'
console.log(myWindow)

注意: 小程序包体积限制在2MB以内。图片尽量使用CDN或者服务器上的图片数据,测试的时候没影响,但是上线的话是上线不了的。还有体积太大也做不了真机测试。

支付宝小程序运行在非浏览器的环境,所以它也没有BOM对象和DOM对象