uniapp:环境搭建+设备调试

uniapp开发规范

• 页面文件遵循Vue单文件组件（SFC）规范

• 组件标签靠近小程序规范 =>uniapp.dcloud.io/component/R…

  <template>
  	<view>
  		页面内容
  	</view>
  </template>
  
  <script>
  	export default {
  		data() {
  			return {
  			}
  		},
  		methods: {	
  		}
  	}
  </script>
  
  <style>
  </style>
  

• 接口能力（JS API）靠近微信小程序规范 => uniapp.dcloud.io/api/README

  uni.getStorageInfoSync()
  

• 数据绑定事件处理同Vue.js规范

  <template>
    <view @click="onClickFn">
        点击事件绑定
    </view>
  </template>
  
  <script>
  export default {
    methods: {
      onClickFn() {
        console.log('click事件')
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  </style>
  

• 兼容多端运行，使用flex布局进行开发

---

uniapp开发环境

开发工具

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

• 模板丰富
• 完善的智能提示
• 一键运行

下载 HBuilderX

1. 访问 HBuilderX 的官网首页 www.dcloud.io/hbuilderx.h…
2. 点击首页的 DOWNLOAD 按钮
3. 选择下载 正式版/alpha -> App 开发版
4. 将下载的 zip包 进行解压缩
5. 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
6. 双击 HBuilderX.exe 即可启动 HBuilderX
7. 详细安装文档：=> hx.dcloud.net.cn/Tutorial/in…

工程搭建

1. 文件 -> 新建 -> 项目

   

2. 填写项目基本信息

   

3. 项目创建成功

   

​ 基本目录结构

项目名称
----【pages】    内部存放所有页面
----【static】   存放所有静态资源，比如图片，字体图标
----【unpackage】存放所有打包生成后的文件
----app.vue     应用配置，用来配置App全局样式以及监听 应用生命周期
----main.js			Vue初始化入口文件
----mainfast.json  配置应用名称、appid、logo、版本等打包信息
----pages.json    配置页面路由、导航条、选项卡等页面类信息
----uni.scss      用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

项目运行

浏览器运行

1. 

小程序运行

1. 填写自己的微信小程序的 AppID：

   

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

   

3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：

   

4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：

   

5. 初次运行成功之后的项目效果：

   

android 真机运行

​ 确保你的手机与电脑是在同一个局域网下面

1. 手机开启开发者模式
2. 数据线连接电脑,连接usb 选项设置为 选择音频来源
3. hbuildeX选择真机运行
4. 等待基座安装
5. 安装完成手机运行项目

hx 可能无法检测到安卓手机，根据官网文档 以及 uniapp调试 未检测到手机或模拟器 来解决

问题1. 参考uniapp 同步资源失败，未得到同步资源的授权，请停止运行后重新运行，并注意手机上的授权提示_uniapp 同步资源失败,未得到同步资源的授权,请停止运行后重新运行,并注意手机上的-CSDN博客

android 模拟器运行

1. 填写模拟器adb.exe 文件的路径 与 端口(不同模拟器查看端口的方式不同)

2. 模拟器显示设置手机版

3. 运行

IOS模拟器运行

1. Xcode下载
2. 定义版本进行模拟器运行

---