本教程指导您在阿里云小程序开发者工具中使用uni-app跨平台开发扩展插件开发多端小程序。

前提条件

步骤一 创建和配置小程序项目

完成以下操作,创建小程序项目:

  1. 打开小程序开发者工具,选择跨平台小程序 > uni-app
  2. 单击+创建小程序项目。
  3. 在左侧工具栏单击npm模块,然后选择安装全部项目依赖。
    说明 依赖安装时间可能较长,和网络环境有关,请耐心等待。
    依赖安装成功后,编译报错消失,如下图所示。

uni-app项目创建成功后,您就可以开发uni-app跨端工程了。主要项目目录如下:

  • src/:uni-app工程的源码目录。详细信息,请参见uni-app 工程目录结构
  • dist/:小程序构建的文件:
    • dev/mp-alipay:支付宝小程序结构文件。
    • dev/mp-weixin:微信小程序结构文件,需要结合uni-app插件使用。详细使用说明,请参见uni-app跨平台开发扩展使用教程
      说明 目前仅支持开发支付宝和微信端小程序。

步骤二 开发小程序

您可以在小程序开发者工具中直接进行代码开发。本教程中以小程序开发者工具中自带的小程序为例。

  1. 在小程序开发者工具中,打开src/pages/index/index.vue文件,并将title修改为Hello World。
  2. 保存修改。
    IDE会触发自动编译,编译完成后的模拟器效果,如下图所示。

步骤三 预览和调试

完成以下操作,调试小程序:

  1. 在小程序开发者工具顶部菜单栏,单击预览,默认选中自动预览。
    预览
  2. 编译完成后,请保持手机支付宝在前台运行,小程序会自动显示。您也可以点击扫码预览,然后使用支付宝客户端扫描二维码预览小程序。

步骤四 上传小程序

小程序调试完成后,您可以直接单击上传将开发好的小程序上传至开放平台。