uni-app的安装配置

uni-app(vue2)

官网

准备工作

开发需要这2种结合开发
HBuilderX+微信开发工具

HBuilderX下载地址

HBuilderX下载选择window的正式版

微信开发工具

微信开发工具下载选择稳定版

在vscoed 中运行 uniapp 项目

vscode配置
安装插件： uni-helper
这个插件支持 vscode 中编写并实时更新 HBuilderX 的代码和预览

npm install -g @vue/cli 安装脚手架(已经安装请跳过)

创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project
my-project是自定义名称(可随定)
按上下键进行切换
PS 选择默认模块进行开发

安装vue语法提示插件vetur

npm run serve // h5 浏览器运行
npm run dev:mp-weixin // 微信小程序

在本地运行小程序时会自动打包出一个 dist 文件，首次运行小程序需要在微信开发中工具中导入项目。

在vscoed 中运行小程序

npm run dev:mp-weixin // 微信小程序
生成一个dist文件进行导入运行

PS 开发者工具选择的 appId，
则需要与 manifest.json 文件中的 appId 保持一致，
否则开发者工具会报错(开发工具导入时会出现appid保持一致)

manifest.json文件

appid//与开发者工具保持一致

err：
导入报app.json: 在项目根目录未找到
怎么解决 如下所示

原因是：
导入项目后project.config.json文件被微信开发者工具修改。

解决：
缺少代码"miniprogramRoot": "找到mp-weixin",
“miniprogramRoot”是指定小程序源码的目录(需为相对路径)。

每个人的目录结构可能不一样，可以去各个目录找一下，看哪里有dist目录，然后找下去就可以。

appid怎么获取

微信公众平台

登录微信公众平台-小程序-开发者工具

在这里插入代码片

当 uni-app 遇见 vscode

启动各个端的命令
启动是dev 打包是build

//启动项目（微信小程序）
npm run dev:mp-weixin
 
//启动项目（h5）
npm run dev:h5
 
//启动项目（app平台）
npm run build:app-plus （也就是App平台运行调试不支持cli方式，需在HBuilderX中运行调试）
 
//启动项目（支付宝小程序）	
npm run dev:mp-alipay
 
//启动项目（百度小程序）
npm run dev:mp-baidu	
 
//启动项目（字节跳动小程序）
npm run dev:mp-toutiao	
 
//启动项目（qq 小程序）
npm run dev:mp-qq	
 
//启动项目（快应用）
npm run dev:quickapp-webview	

基于HBuilderX开发

1. 打开HBuilderX进行创建项目
   

这里推荐使用🚗默认版块🚗

基于uni常见完毕

uniapp打包微信小程序详细步骤

uniapp打包H5详细步骤

HBuilderX配置

如何调大小

点击工具–设置–常规配置
如下所示就可以调字体大小了

或者直接点击Ctrl和+ 可以扩大字体也是调字体

如何运行浏览器

如何运行在小程序

  首先点击运行--运行在小程序模拟器

注意：如果是第一次使用，需要先配置小程序ide的相关路径，才能运行成功。如下图，需在输入框输入微信开发者工具的安装路径。

这里定位的是你的小程序安装路径
然后在小程序APP里面设置----安全设置---把服务器端口打开(否则会失效运行不成功)

如果你没有安装小程序—点击工具----运行配置–小程序运行配置–会提示点击下载
然后你下载即可

在vscoed 中运行 uniapp 项目