uni-app跨平台APP开发

落日映苍穹つ 2021-10-06 03:10 491阅读 0赞

### uni-app跨平台APP开发 ###

*  uni-app 介绍
 *  开发
 *   *  开发工具
     *  HBuilderX模拟器连接
     *  框架介绍
     *   *  目录结构
         *  生命周期
         *  路由
         *  页面样式与布局
     *  配置
     *   *  pages.json
         *  manifest.json
     *  组件、接口
     *  全局变量、方法

# uni-app 介绍 #

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。  
适用平台：Android、iOS、微信小程序。实现了一套代码，同时发布到Android、iOS、微信小程序。  
官方：[https://uniapp.dcloud.io/][https_uniapp.dcloud.io]

# 开发 #

## 开发工具 ##

（1）HBuilderX  
下载地址：[http://www.dcloud.io/hbuilderx.html][http_www.dcloud.io_hbuilderx.html]  
（2）微信开发者工具  
下载地址：[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]

## HBuilderX模拟器连接 ##

夜神模拟器 下载地址：[https://www.yeshen.com/][https_www.yeshen.com]  
（1）打开夜神模拟器  
（2）找到模拟器安装目录，执行以下命令

nox_adb connect 127.0.0.1:62001
    nox_adb devices

![在这里插入图片描述][20190102142340676.png]  
（3）找到hbuilder的adb.exe路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70]  
（3）设置端口号  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 1]  
（4）选择项目运行-模拟器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 2]

## 框架介绍 ##

官方：[https://uniapp.dcloud.io/frame][https_uniapp.dcloud.io_frame]

### 目录结构 ###

┌─components            uni-app组件目录
    │  └─comp-a.vue         可复用的a组件
    ├─hybrid                存放本地网页的目录，详见
    ├─platforms             存放各平台专用页面的目录，详见
    ├─pages                 业务页面文件存放的目录
    │  ├─index
    │  │  └─index.vue       index页面
    │  └─list
    │     └─list.vue        list页面
    ├─static                存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
    ├─main.js               Vue初始化入口文件
    ├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
    ├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
    └─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

### 生命周期 ###

参考官方：[https://uniapp.dcloud.io/frame?id=应用生命周期][https_uniapp.dcloud.io_frame_id]

### 路由 ###

参考官方：[https://uniapp.dcloud.io/frame?id=路由][https_uniapp.dcloud.io_frame_id 1]

### 页面样式与布局 ###

参考官方：[https://uniapp.dcloud.io/frame?id=页面样式与布局][https_uniapp.dcloud.io_frame_id 2]

## 配置 ##

### pages.json ###

参考官方：[https://uniapp.dcloud.io/collocation/pages][https_uniapp.dcloud.io_collocation_pages]

### manifest.json ###

参考官方：[https://uniapp.dcloud.io/collocation/manifest][https_uniapp.dcloud.io_collocation_manifest]

## 组件、接口 ##

参考官方：  
[https://uniapp.dcloud.io/component/README][https_uniapp.dcloud.io_component_README]  
[https://uniapp.dcloud.io/api/README][https_uniapp.dcloud.io_api_README]  
参考官方提供示例模板  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 3]

## 全局变量、方法 ##

（1）定义  
在App.vue的script标签中定义，如：

global.root = '全局的值';
    global.isAuth = function(){
    	return false;
    }

（2）使用

在需要使用的页面中使用
    变量：root
    方法：isAuth()

[https_uniapp.dcloud.io]: https://uniapp.dcloud.io/
[http_www.dcloud.io_hbuilderx.html]: http://www.dcloud.io/hbuilderx.html
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[https_www.yeshen.com]: https://www.yeshen.com/
[20190102142340676.png]: /images/20211006/30f7d67baef44cadb74f42069c244973.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70]: /images/20211006/bb4e39f3c2a94e159677937eb7dfbec3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 1]: /images/20211006/08ed0bd29ea2464794613e8591afa533.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 2]: /images/20211006/cf58f075c98c4468b68e1dde416a6748.png
[https_uniapp.dcloud.io_frame]: https://uniapp.dcloud.io/frame
[https_uniapp.dcloud.io_frame_id]: https://uniapp.dcloud.io/frame?id=%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
[https_uniapp.dcloud.io_frame_id 1]: https://uniapp.dcloud.io/frame?id=%E8%B7%AF%E7%94%B1
[https_uniapp.dcloud.io_frame_id 2]: https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80
[https_uniapp.dcloud.io_collocation_pages]: https://uniapp.dcloud.io/collocation/pages
[https_uniapp.dcloud.io_collocation_manifest]: https://uniapp.dcloud.io/collocation/manifest
[https_uniapp.dcloud.io_component_README]: https://uniapp.dcloud.io/component/README
[https_uniapp.dcloud.io_api_README]: https://uniapp.dcloud.io/api/README
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE1NzY0OTQz_size_16_color_FFFFFF_t_70 3]: /images/20211006/71b521b346224064b3bcd815ce909fa4.png