uni-app — 安装配置

默永

人生就像骑单车，想保持平衡就得往前走。

uni-app — 安装配置

2022-11-28 13:52:30 179 💗 0 @默永

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台

安装HBuilderX

HBuilderX：官方IDE下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

安装插件

https://ext.dcloud.net.cn/?cat1=1&type=UpdatedDate

搜索要用的插件，点击安装即可

创建项目

文件 -> 新建 -> 项目 -> 选中 ui-app 项目 -> 项目名称 -> 路径 -> 模板 -> 创建

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

微信小程序基础配置

配置AppID

打开 manifest.json 文件选择微信小程序配置

在 HBuilderX 中，配置“微信开发者工具”的安装路径：

① HBuilderX -> 工具 -> 设置 -> 运行配置 -> 小程序运行配置 -> 微信开发者工具路径

② 微信开发者工具 -> 设置 -> 安全设置 -> 安全 -> 服务端口

③ HBuilderX -> 运行 -> 运行到小程序模拟器 -> 微信开发者工具

目录导航

打开“扫一扫”，打开网页后点击屏幕右上角分享按钮
或点击复制连接

2022-11-28 13:52:30 0个人觉得很赞

发表评论

评论列表

博主

删除

点击加载更多

快来参与评论

公告

昵称：默永

园龄：2年236天

注册时间：2021-11-15

当前在第：1页

总共：1条

搜索

精品文章 48小时阅读排行

优秀文章 7天获赞排行