Uniapp 开发小程序学习内容(一)

197 阅读1分钟

配置项目开发环境

下载并安装开发工具

  1. uniapp 的专门工具 HBuilder X,[直接下载](HBuilderX-高效极客技巧 (dcloud.io))
  2. 选择‘App开发版本’
  3. 安装即可

安装 sass 依赖

因为项目开发会使用sass,所以需要为HBuilderX 安装 sass编译器。

  1. 打开HBuilderX
  2. 打开插件地址:ext.dcloud.net.cn/plugin?id=2…
  3. 点击【使用HBuilder 导入插件】image-20210515194345248.png
  4. 在弹出的框中点击【打开HBuilderX】 image-20210515194416240.png 5.点击【是】

image-20210515194517418.png 6.等待安装完成

image-20210515194633644.png

创建uni-app项目

image-20210516121024712.png 2. 1704255814832.png

├─pages			    // 页面存放文件夹,等同于 微信小程序中的 pages
│  └─index			// 默认生成的页面
├─static			// 静态资源存放文件夹
└─uni_modules		// uni-app组件目录
│  └─uni-xxx		// uni-app 所提供的业务组件,等同于 微信小程序中的组件
├─App.vue			// 应用配置文件,用来配置全局样式、生命周期函数等,等同于 微信小程序中的app.js
└─main.js			// 项目入口文件
├─mainfest.json		 // 配置应用名称、appid、logo、版本等打包信息,
└─pages.json		// 配置页面路径、窗口样式、tabBar 等页面类信息,等同于 微信小程序中的app.json
└─uni.scss			// uni-app内置的常用样式变量

运行项目到微信开发者工具

运行到微信小程序

  1. 配置【微信开发工具】路径image-20210517150801300.png
  2. 设置【微信开发工具路径】image-20210517150907415.png
  3. 运行到微信小程序

image-20210517150511230.png 4.底部提示编译

image-20210517150622118.png 5.编译成功

image-20210517150949730.png