Uniapp框架使用说明

绝地灬酷狼 2023-02-14 06:53 282阅读 0赞

## 目录 ##

*  **开发工具**
 *  **新建项目**
 *  **项目结构**
 *  **页面结构**
 *  **项目开始**
 *  **接口配置地址**
 *  **接口请求**
 *  **页面跳转**
 *  **回调传参**
 *  **使用Vuex，定义全局变量**
 *  **使用自定义素材（iconfont图标）**
 *  **运行环境判断**
 *  **兼容小程序分包**

## 开发工具 ##

**HBuilderX**：[官方IDE下载地址][IDE]，下载App开发版（280M左右那个）

是的，你没有看错，只需要这一个工具就可以啦，当然如果需要开发微信小程序的话还需要下载**微信开发者工具**，[快捷传送门][Link 1]

## 新建项目 ##

使用HBuilderX新建项目：

1.  填写项目名称
2.  填写项目目录地址
3.  选择项目模板，我一般使用自带uni组件的项目模板，根据开发需求也可以使用其他模板

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvX2JlX0Rlc2lnbmVy_size_16_color_FFFFFF_t_70]

## 项目结构 ##

一个uni-app工程，默认包含如下目录及文件：

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

## 页面结构 ##

页面文件遵循**Vue 单文件组件 (SFC) 规范**  
每个 `.vue`文件包含三种类型的顶级语言块 `<template>`、`<script>` 和 `<style>`，还允许添加可选的自定义块：

<template>
      <view class="example">{
        {
         msg }}</view>
    </template>
    
    <script>
    export default {
        
      data () {
        
        return {
        
          msg: 'Hello world!'
        }
      }
    }
    </script>
    
    <style>
    .example {
        
      color: red;
    }
    </style>

新建了工程，认识了项目的结构和页面结构，我们接下来就开始编码了……

## 项目开始 ##

### 1. 新建一个页面 ###

1.  鼠标指在`pages`目录上，右键选择‘新建页面’，输入页面名称，点击完成，完成页面的新建。
2.  在`pages.json`文件夹内注册该页面。  
    在`pages.json`下添加，`navigationBarTitleText`为该页面的标题：

{
        
    		"path": "pages/test/test",
    		"style": {
        
    			"navigationBarTitleText": "测试页面"
    		}
    	}

结果如下：

注意：`pages`下的第一个页面为启动该应用是显示的页面。

{
        
    	"pages": [{
        
    		"path": "pages/index/index",
    		"style": {
        
    			"navigationBarTitleText": "uni-ui基础项目"
    		}
    	}, {
        
    		"path": "pages/test/test",
    		"style": {
        
    			"navigationBarTitleText": "测试页面"
    		}
    	}],
    	"globalStyle": {
        
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#FFFFFF"
    	}
    }

### 2. 编写页面 ###

*  在模板中编写页面结构，控件使用uniapp自带组件，[点击查看组件文档][Link 2]。每个组件的使用都有详细的文档说明，这里不赘述，直接查看文档即可。
 *  在`<script>`中编写js逻辑代码，做交互处理。
 *  在`<style>`中编写样式，同html样式，一般为了兼容都使用flex布局。

uniapp给我们提供了一个示例项目，用来演示每个组件的使用，所以我们在开发样式过程中，为了方便快捷的完成央视开发，可以直接去示例项目中找到合适的组件复制代码进行相应的样式修改即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvX2JlX0Rlc2lnbmVy_size_16_color_FFFFFF_t_70 1]

## 接口配置地址 ##

接口配置地址在`main.js`文件中设置：

Vue.prototype.$RequestUrl = 'https://172.10.0.68:8080/';//接口请求地址
    Vue.prototype.$successCode = '0';//请求成功code值

## 接口请求 ##

接口请求需要进行封装，统一应用内的接口请求方式，在封装接口内做统一处理，封装的接口在`common/api`文件内。

1.  在页面`</script>`模块内引入定义的接口请求方法：

1.  接口请求方法：

注意：接口请求目前封装了一般请求方式和单文件上传，如需更多可以到`common/api`中根据需求自行封装。

## 页面跳转 ##

1.  页面跳转`uni.navigateTo(OBJECT)`

//在起始页面跳转到test.vue页面并传递参数
    let param = {
        
    	id: '1'
    };
    let paramStr = JSON.stringify(param); // 这里转换成 字符串
    uni.navigateTo({
        
    	url: '../../pages/test?paramStr=' + encodeURIComponent(paramStr)
    });

//test.vue的onLoad方法中接收数据
    onLoad: function(e) {
        
    	var data = JSON.parse(decodeURIComponent(e.paramStr)); // 字符串转对象
    	this.id= data.id;
    },

1.  重定向uni.redirectTo(OBJECT)，关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
        
        url: 'test?id=1'
    });

1.  uni.reLaunch(OBJECT)，关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({
        
        url: 'test?id=1'
    });

1.  uni.switchTab(OBJECT)，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.switchTab({
        
        url: '/pages/index/index'
    });

1.  uni.navigateBack(OBJECT)，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
    
    // 此处是A页面
    uni.navigateTo({
        
        url: 'B?id=1'
    });
    
    // 此处是B页面
    uni.navigateTo({
        
        url: 'C?id=1'
    });
    
    // 在C页面内 navigateBack，将返回A页面
    uni.navigateBack({
        
        delta: 2
    });

## 回调传参 ##

使用`uni.$on`，`uni.$emit`，`uni.$off`的方式进行页面通讯

// 接收信息的页面
    // $on(eventName, callback)  
    uni.$on('page-popup', (data) => {
          
        console.log('标题：' + data.title)
        console.log('内容：' + data.content)
    })  
    
    // 发送信息的页面
    // $emit(eventName, data)  
    uni.$emit('page-popup', {
          
        title: '我是title',  
        content: '我是content'  
    });
    
    //结束监听
    // $off(eventName, data)  
    uni.$off('page-popup',(data) => {
          
        console.log('标题：' + data.title)
        console.log('内容：' + data.content)
    });

## 使用Vuex，定义全局变量 ##

1.  在工程目录下新建`store/index.js`，`state`中添加变量值，`mutations`添加变量修改方法。

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        
    	state: {
        
    		hasLogin: false,//是否登录
    		nickname: "", // 昵称
    		signature: "", // 签名
    		avatar: "", // 头像
    	},
    	mutations: {
        
    		login(state, val) {
        
    			state.hasLogin = true;
    			state.nickname = val.nickName; // 昵称
    			state.signature = val.signature // 签名
    			state.avatar = val.avatarUrl; // 头像
    		},
    	
    		logout(state) {
        
    			state.hasLogin = false;
    			state.nickname = "";
    			state.signature= "";
    			state.avatar = "/static/logo.png";
    		}
    	},
    	actions: {
        
    
    	}
    })
    
    export default store

1.  在页面`<script>`模块内内引入vuex。

1.  获取值，两种方式

1.  修改值

## 使用自定义素材（iconfont图标） ##

1.  登录[https://www.iconfont.cn/][https_www.iconfont.cn]，搜索需要的图标，将图标添加购物车，然后将购物车内的图标添加到项目中。
2.  “图标管理” -> “我的项⽬”，选择具体项⽬以后，选择"Unicode"然后点击"点击复制代码"，将内容复制到根目录下`common/css/iconfont.css`文件内替换，并在url上加上`"https:"`

@font-face {
        
      font-family: 'iconfont';  /* project id 1704723 */
      src: url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.eot');
      src: url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.eot?#iefix') format('embedded-opentype'),
      url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.woff2') format('woff2'),
      url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.woff') format('woff'),
      url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.ttf') format('truetype'),
      url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.svg#iconfont') format('svg');
    }

1.  添加自定义图标格式如下,例如 delete，将`content`替换成iconfont上对应的图标代码。

.delete:before {
        
    	content: "\e6f6";
    }

1.  使用时直接在class中声明iconfont 和图标自定义名称即可显示。

## 运行环境判断 ##

1.  开发环境和生产环境  
    在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境

if(process.env.NODE_ENV === 'development'){
        
        console.log('开发环境')
    }else{
        
        console.log('生产环境')
    }

1.  判断平台  
    条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

> 写法：以 `#ifdef` 或 `#ifndef` 加 `%PLATFORM%` 开头，以 `#endif` 结尾。  
> `#ifdef`：if defined 仅在某平台存在  
> `#ifndef`：if not defined 除了某平台均存在  
> `%PLATFORM%`：平台名称

// #ifdef H5
        alert("只有h5平台才有alert方法")
    // #endif

样式的条件编译必须使用`/* 注释*/` 的写法

/*  #ifdef  %PLATFORM%  */
    平台特有样式
    /*  #endif  */

%PLATFORM% 可取值如下：

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>平台</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>APP-PLUS</td> 
   <td>App</td> 
  </tr> 
  <tr> 
   <td>APP-PLUS-NVUE</td> 
   <td>App- nvue</td> 
  </tr> 
  <tr> 
   <td>H5</td> 
   <td>H5</td> 
  </tr> 
  <tr> 
   <td>MP-WEIXIN</td> 
   <td>微信小程序</td> 
  </tr> 
  <tr> 
   <td>MP-ALIPAY</td> 
   <td>支付宝小程序</td> 
  </tr> 
  <tr> 
   <td>MP-BAIDU</td> 
   <td>百度小程序</td> 
  </tr> 
  <tr> 
   <td>MP-TOUTIAO</td> 
   <td>字节跳动小程序</td> 
  </tr> 
  <tr> 
   <td>MP-QQ</td> 
   <td>QQ小程序</td> 
  </tr> 
  <tr> 
   <td>MP-360</td> 
   <td>360小程序</td> 
  </tr> 
  <tr> 
   <td>MP</td> 
   <td>微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序</td> 
  </tr> 
 </tbody> 
</table>

## 兼容小程序分包 ##

由于小程序对发布包大小有限制单包不可以超过2M，分包不可超过8M。所以为了发布功能复杂的小程序需要对工程进行分包处理。

1.  在manifest.json中设置打开分包

"mp-weixin" : {
        
            "appid" : "",
            "optimization" : {
        
                "subPackages" : true
            }
        }

1.  在`package.json`中设置`subPackages`分包。  
    使用方法：  
    假设支持分包的 uni-app 目录结构如下：

┌─pages               
    │  ├─index
    │  │  └─index.vue    
    │  └─login
    │     └─login.vue    
    ├─pagesA   
    │  ├─static
    │  └─list
    │     └─list.vue 
    ├─pagesB    
    │  ├─static
    │  └─detail
    │     └─detail.vue  
    ├─static             
    ├─main.js       
    ├─App.vue          
    ├─manifest.json  
    └─pages.json

则需要在 pages.json 中填写

{
        
        "pages": [{
        
            "path": "pages/index/index",
            "style": {
         ...}
        }],
        "subPackages": [{
        
            "root": "pagesA",
            "pages": [{
        
                "path": "list/list",
                "style": {
         ...}
            }]
        }, {
        
            "root": "pagesB",
            "pages": [{
        
                "path": "detail/detail",
                "style": {
         ...}
            }]
        }]
    }

[IDE]: https://www.dcloud.io/hbuilderx.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvX2JlX0Rlc2lnbmVy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200601160105685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvX2JlX0Rlc2lnbmVy,size_16,color_FFFFFF,t_70
[Link 2]: https://note.youdao.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvX2JlX0Rlc2lnbmVy_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200603145219394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvX2JlX0Rlc2lnbmVy,size_16,color_FFFFFF,t_70
[https_www.iconfont.cn]: https://www.iconfont.cn/