uniapp开发准备项

官方网页
环境搭建
安装编辑器HbuilderX 下载地址
安装微信开发者工具 下载地址

使用HbuilderX初始化项目

点击HbuilderX菜单栏文件>项目>新建 	
选择uni-app,填写项目名称,项目创建的目录
工具->插件安装->安装vue3到各端的编译器

运行项目

运行在浏览器:在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行
运行在微信开发者工具:点击工具栏的运行->运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app
运行在手机:点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

在微信开发者工具中:点击分离窗口,将窗口固定到右侧,同时将开发者工具最小化

注意:

  • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功(微信web开发者工具的安装目录)
  • 微信开发者工具在设置中安全设置,服务端口开启

uni-app 开发规范:

命令行创建 uni-app 项目
vue3+ts版: npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
官网链接
在这里插入图片描述

用 VS Code 开发 uni-app 项目
在这里插入图片描述
control + i 快速提示选项

注册appId:
点击manifest.json文件->微信小程序配置->填入appId
注册appId:微信公众平台=>小程序注册=>登录小程序=>扫码 =>右侧tab找到开发=>顶部开发设置

小程序打包上传:

进入util下的api.js里,将baseUrl改为线上地址,将线上的服务器接口域名配置到 服务器接口域名 ;字体图标地址改为线上地址,降本地字体图标删除。运行ok
点击右上角的上传按钮
在微信公众平台里,点击首页 版本管理 开发版本 提交审核

h5打包

点击manifest.json文件->h5配置->配置标题,hash路由等->发行->网站h5手机版->发行(可只填标题)
live-server --port=3333运行h5即可

安卓打包
点击manifest.json文件->基础配置(获取appId,应用名称,版本)->App图标(选择图标)>App启动图->…->原生App云打包(使用自有证书,打包,打包生成的地址生成二维码扫扫看)

  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值