本教程指导您在阿里云小程序开发者工具中使用uni-app跨平台开发扩展插件开发多端小程序。
前提条件
确保您安装的是最新版本小程序开发者工具。访问这里下载最新版本:https://docs.alipay.com/mini/ide/download
完成uni-app跨平台开发扩展的安装和编译。详情请参见uni-app跨平台开发扩展使用教程。
步骤一:创建和配置小程序项目
完成以下操作,创建小程序项目:
打开小程序开发者工具,选择
。单击+创建小程序项目。
在左侧工具栏单击npm模块,然后选择安装全部项目依赖。
说明依赖安装时间可能较长,和网络环境有关,请耐心等待。
依赖安装成功后,编译报错消失,如下图所示。
uni-app项目创建成功后,您就可以开发uni-app跨端工程了。主要项目目录如下:
src/:uni-app工程的源码目录。详细信息,请参见uni-app 工程目录结构。
dist/:小程序构建的文件:
dev/mp-alipay:支付宝小程序结构文件。
dev/mp-weixin:微信小程序结构文件,需要结合uni-app插件使用。详细使用说明,请参见uni-app跨平台开发扩展使用教程。
说明目前仅支持开发支付宝和微信端小程序。
步骤二:开发小程序
您可以在小程序开发者工具中直接进行代码开发。本教程中以小程序开发者工具中自带的小程序为例。
在小程序开发者工具中,打开src/pages/index/index.vue文件,并将title修改为Hello World。
保存修改。
IDE会触发自动编译,编译完成后的模拟器效果,如下图所示。
步骤三:预览和调试
完成以下操作,调试小程序:
在小程序开发者工具顶部菜单栏,单击预览,默认选中自动预览。
编译完成后,请保持手机支付宝在前台运行,小程序会自动显示。您也可以单击扫码预览,然后使用支付宝客户端扫描二维码预览小程序。
步骤四:上传小程序
小程序调试完成后,您可以直接单击上传将开发好的小程序上传至开放平台。
使用咨询
如果在跨端开发中遇到任何问题,您可以通过搜索钉钉群(支付宝IDE跨平台小程序开发者群,群号 : 23356164)入群咨询。
- 本页导读 (0)