当前位置: 首页>移动开发>正文

uniapp 架构 业务模块 基于uniapp的框架

一. 初始uni-app

是使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

1. 开发环境搭建,nodejs,hbuilderx

2. 应用开发流程

2.1 DCloud开发者中心注册账号并创建应用,获取AppID,去注册

uniapp 架构 业务模块 基于uniapp的框架,uniapp 架构 业务模块 基于uniapp的框架_uniapp 架构 业务模块,第1张

2.2 创建uniapp项目

uniapp 架构 业务模块 基于uniapp的框架,uniapp 架构 业务模块 基于uniapp的框架_uni-app_02,第2张

uniapp 架构 业务模块 基于uniapp的框架,uniapp 架构 业务模块 基于uniapp的框架_App_03,第3张

2.3 按照规范编写源代码
├── api                    # 所有请求
├── assets                 # 主题 字体等静态资源
├── common                 # 全局通用工具类
├── components             # 全局公用组件
├── language               # 国际化 language
├── store                  # 全局 store管理
├── pages                  # views 所有页面
├── ├──  index             # 视图模块名
├── ├── ├──  index.vue     # 模块入口页面
├── static                 # 存放应用引用静态资源(如图片、视频等)的目录
├── wxcomponents           # 小程序组件的目录
├── App.vue                # 入口页面,应用配置,配置App全局样式以及监听
├── main.js                # 入口文件 加载组件 初始化等
├── package.json           # package.json
├── manifest.json          # 配置应用名称、appid、logo、版本等打包信息
└── pages.json             # 配置页面路由、导航条、选项卡等页面类信息
2.4 应用调试运行

uniapp 架构 业务模块 基于uniapp的框架,uniapp 架构 业务模块 基于uniapp的框架_uniapp 架构 业务模块_04,第4张

2.5 应用发布
  • 云打包
  • IOS离线打包:https://ask.dcloud.net.cn/article/41
  • Android离线打包:https://ask.dcloud.net.cn/article/508

二. 知识点梳理

1. 应用生命周期

<script>
export default {
	// 当uniapp初始化完成时进行触发,全局只触发一次
	onLaunch: function() {
		console.log('App Launch')
	},
	// 当uniapp启动或者从后台进入前台显示
	onShow: function() {
		console.log('App Show')
	},
	// 当uniapp从前台进入后台
	onHide: function() {
		console.log('App Hide')
	}
}
</script>

2. 页面生命周期

<script>
export default {
    onLoad(option) {}, // 监听页面加载,option为上个页面传递的数据,参数类型为Object
    onReady() {}, // 监听页面初次渲染完成
    onShow() {}, // 监听页面显示。页面每次出现在屏幕上都触发
    onHide() {}, // 监听页面隐藏
    onUnload() {}, // 监听页面卸载
    onResize() {}, // 监听窗口尺寸变化
    onPullDownRefresh() {},
    onReachBottom() {},
    onTabItemTap() {}
}
</script>
注意:
(1)不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的,this 不会是如你做预期的 Vue 实例,且 this.a 或 this.myMethod 也会是未定义的。
(2)建议使用 uni-app 的 onReady代替 vue 的 mounted。
(3)建议使用 uni-app 的 onLoad 代替 vue 的 created。

3. 页面路由配置及跳转

需要在pages.json里配置每个路由页面的路径及页面样式,类似小程序在app.json中配置页面路由一样。

{
	"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页", // 导航标题
				"navigationBarBackgroundColor": "#F8F8F8", // 导航背景颜色
				"navigationBarTextStyle": "black", // 导航字体颜色
				"enablePullDownRefresh": true, // 下拉刷新
				"app-plus": { // App节点配置项
					"titleNView": {},
					"animationType": "fade-in",
					"animationDuration": 300
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black", // 导航字体颜色
		"navigationBarTitleText": "uni-app", // 导航标题
		"navigationBarBackgroundColor": "#F8F8F8", // 导航背景颜色
		"backgroundColor": "#F8F8F8" // 页面背景颜色
	},
	"tabBar": {
		"color": "#333333",
		"borderStyle": "black",
		"backgroundColor": "#FFFFFF",
		"selectedColor": "#333333",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "",
				"selectedIconPath": "",
				"text": "首页"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "",
				"selectedIconPath": "",
				"text": "我的"
			}
		]
	}
}
1、初始化
2、打开新页面
uni.navigateTo 、 <navigator open-type="navigate"/>
3、页面重定向
uni.redirectTo 、 <navigator open-type="redirectTo"/>
4、页面返回
uni.navigateBack  、<navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键
5、Tab 切换
uni.switchTab  、  <navigator open-type="switchTab"/>  、用户切换 Tab
6、重加载
uni.reLaunch  、<navigator open-type="reLaunch"/>

注意:
(1)navigateTo, redirectTo 只能打开非 tabBar 页面。
(2)switchTab 只能打开 tabBar 页面。
(3)reLaunch 可以打开任意页面。
(4)页面底部的 tabBar 由页面配置决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
(5)不能在 App.vue 里面进行页面跳转。

4. 页面布局

为支持跨平台,框架建议使用Flex布局
Flex 布局教程:语法篇Flex 布局教程:实例篇

5. 字体图标

uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:

  • 支持 base64 格式字体图标。
  • 支持网络路径字体图标。
  • 网络路径必须加协议头 https。
  • 从 http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。
@font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

6. 基础组件

  • 视图容器:view,scroll-view,swiper
  • 基础内容:icon,text,rich-text,progress
  • 表单组件:button,check-box,form,input,textarea,picker,radio,switch
  • 导航:navigator
  • 媒体组件:audio,camera,image,video
  • 地图:map
  • 画布:canvas
  • webview:web-view
  • 广告:ad
  • 开放能力组件:
  • App nvue 专用组件:list,recycle-list
  • 扩展组件:uni-ui

7. 应用配置

  • manifest.json

manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等。

uniapp 架构 业务模块 基于uniapp的框架,uniapp 架构 业务模块 基于uniapp的框架_App_05,第5张

三. 进阶知识点

1. 条件编译

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

  • API 的条件编译
// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

说明:
以 #ifdef 或 #ifndef 加** %PLATFORM%** 开头,以 #endif 结尾。
%PLATFORM%:APP-PLUS,APP-PLUS-NVUE,H5,MP-WEIXIN...
  • 组件的条件编译
<template>
	<view class="content">
		// #ifdef MP-WEIXIN
		<page-loading></page-loading>
		// #endif
	</view>
</template>
  • 样式的条件编译
<style lang="scss">
	/*  #ifdef MP-WEIXIN  */
	.wx-bg-login {
		background-color:#11ff11;
	}
	/*  #endif  */
</style>
  • pages.json 的条件编译
// #ifdef MP-WEIXIN
{
	"path": "pages/speech/speech",
	"style": {
		"navigationBarTitleText": "语音识别"
	}
}
// #endif
  • static 目录的条件编译
┌─static                
│  ├─mp-weixin
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json

2. vuex使用

import Vue from 'vue'
import Vuex from 'vuex'
import api from '@/api'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		language: uni.getStorageSync('language') || 0,
		isLogin: !!uni.getStorageSync('isLogin'),
		loginInfo: {},
		userInfo: {}
	},
	mutations: {
		// 语言信息
		SET_LANGUAGE: (state, value) => {
			state.language = value
		},
		// 用户登录
		SET_LOGIN: (state, value) => {
			state.isLogin = value
		},
		// 用户登录信息
		SET_LOGININFO: (state, value) => {
			state.loginInfo = value
		},
		// 用户信息
		SET_USERINFO: (state, value) => {
			state.userInfo = value
		}
	},
	actions: {
		// 设置语言信息
		SetLanguage({
			dispatch,
			commit
		}, value) {
			uni.setStorageSync('language', value);
			commit('SET_LANGUAGE', value);
			dispatch('SetLang', value);
		},
		// 用户登录
		Login({
			dispatch,
			commit
		}, data) {
			return new Promise((resolve, reject) => {
				api.login(data).then(response => {
					if (response.status === 1) {
						uni.setStorageSync('loginInfo', response.data);
						uni.setStorageSync('isLogin', true);
						dispatch('ParseLoginInfo');
					}
					resolve(response)
				}).catch(error => {
					reject(error)
				})
			})
		},
		// 获取用户信息
		GetUserInfo({
			dispatch,
			commit
		}) {
			return new Promise((resolve, reject) => {
				api.getUserInfo(this.state.loginInfo.mobile).then(response => {
					if (response.status === 1) {
						uni.setStorageSync('userInfo', response.data);
						dispatch('ParseUserInfo');
					}
					resolve(response)
				}).catch(error => {
					reject(error)
				})
			})
		},
		// 解析登录信息
		ParseLoginInfo({
			dispatch,
			commit
		}) {
			const loginInfo = uni.getStorageSync('loginInfo') || {};
			commit('SET_LOGININFO', loginInfo);
			commit('SET_LOGIN', Object.keys(loginInfo).length > 0);
			dispatch('ParseUserInfo');
		},
		// 解析用户信息
		ParseUserInfo({
			dispatch,
			commit
		}) {
			const userInfo = uni.getStorageSync('userInfo') || {};
			commit('SET_USERINFO', userInfo);
		},
		// 退出登录
		Logout({
			dispatch,
			commit
		}) {
			uni.clearStorageSync();
		}
	}
})
export default store

3. npm支持

uni-app支持使用npm安装第三方包。

4. 小程序组件支持

uni-app 支持在 App 和 小程序 中使用小程序自定义组件,从HBuilderX2.4.7起,H5端也可以运行微信小程序组件。

平台

支持情况

小程序组件存放目录

H5

支持微信小程序组件(2.4.7+)

wxcomponents

App(不含nvue

支持微信小程序组件

wxcomponents

微信小程序

支持微信小程序组件

wxcomponents

支付宝小程序

支持支付宝小程序组件

mycomponents

百度小程序

支持百度小程序组件

swancomponents

头条小程序

支持头条小程序组件

ttcomponents

QQ小程序

支持QQ小程序组件

wxcomponents

┌─wxcomponents                  微信小程序自定义组件存放目录
│   └──custom                   微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
├─mycomponents                  支付宝小程序自定义组件存放目录
│   └──custom                   支付宝小程序自定义组件
│        ├─index.js
│        ├─index.axml
│        ├─index.json
│        └─index.wxss
├─swancomponents                百度小程序自定义组件存放目录
│   └──custom                   百度小程序自定义组件
│        ├─index.js
│        ├─index.swan
│        ├─index.json
│        └─index.wxss
├─pages
│  └─index
│        └─index.vue
│
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

在 pages.json 对应页面的 style -> usingComponents 引入组件:

{
    "pages": [
        {
            "path": "index/index",
            "style": {
                "usingComponents": {
                    // #ifdef APP-PLUS || MP-WEIXIN || MP-QQ
                     "custom": "/wxcomponents/custom/index"
                    // #endif
                    // #ifdef MP-BAIDU
                     "custom": "/swancomponents/custom/index"
                    // #endif
                    // #ifdef MP-ALIPAY
                     "custom": "/mycomponents/custom/index"
                    // #endif
                }
            }
        }
    ]
}

5. 使用nvue

uni-app在App端,支持vue页面和nvue页面混搭、互相跳转。也支持纯nvue项目。

四. 注意事项

1. data 属性

data 必须声明为返回一个初始数据对象的函数;否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。

//正确用法,使用函数返回对象
data() {
    return {
        title: 'Hello'
    }
}

//错误写法,会导致再次打开页面时,显示上次数据
data: {
    title: 'Hello'
}

2. 全局变量

  • 公用模块封装
  • globalData
    小程序中有个globalData概念,可以在 App 上声明全局变量。 Vue 之前是没有这类概念的,但 uni-app 引入了globalData概念,并且在包括H5、App等平台都实现了。
    在 App.vue 可以定义 globalData ,也可以使用 API 读写这个值。
    globalData支持vue和nvue共享数据。
    globalData是一种比较简单的全局变量使用方式。
<script>  
    export default {  
        globalData: {  
            text: 'text'  
        },  
        onLaunch: function() {  
            console.log('App Launch')  
        },  
        onShow: function() {  
            console.log('App Show')  
        },  
        onHide: function() {  
            console.log('App Hide')  
        }  
    }  
</script>  
<style>  
    /*每个页面公共css */  
</style>

js中操作globalData的方式如下:

赋值:getApp().globalData.text = ‘test’
取值:console.log(getApp().globalData.text)
如果需要把globalData的数据绑定到页面上,可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起,nvue页面在uni-app编译模式下,也支持onshow。

  • Vuex

3. Class 与 Style 绑定

  • class 支持的语法:
<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
  • style 支持的语法:
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

非H5端不支持 Vue官方文档:Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

<template>
    <view :class="[activeClass]" :style="[baseStyles,overridingStyles]"></view>
</template>

<script>
    export default {
        data() {
            return {
                activeClass: {
                    'active': true,
                    'text-danger': false
                },
                baseStyles: {
                    color: 'green',
                    fontSize: '30px'
                },
                overridingStyles: {
                    'font-weight': 'bold'
                }
            }
        }
    }
</script>

注意:以:style=""这样的方式设置px像素值,其值为实际像素,不会被编译器转换。

此外还可以用 computed 方法生成 class 或者 style 字符串,插入到页面中,举例说明:

<template>
    <!-- 支持 -->
    <view class="container" :class="computedClassStr"></view>
    <view class="container" :class="{active: isActive}"></view>

    <!-- 不支持 -->
    <view class="container" :class="computedClassObject"></view>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? 'active' : ''
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>

用在组件上

非H5端暂不支持在自定义组件上使用 Class 与 Style 绑定

4. 列表循环

在H5平台 使用 v-for 循环整数时和其他平台存在差异,

  • 如 v-for=“(item, index) in 10” 中,在H5平台 item 从 1 开始,其他平台 item 从 0 开始,可使用第二个参数 index 来保持一致。
  • 在非H5平台 循环对象时不支持第三个参数,如 v-for=“(value, name, index) in object” 中,index 参数是不支持的。

5. 事件处理器

// 常用事件映射表,左侧为 WEB 事件,右侧为 ``uni-app`` 对应事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap', //推荐使用longpress代替
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    scroll: 'scroll'
}
  • 为兼容各端,事件需使用 v-on 或 @ 的方式绑定,请勿使用小程序端的bind 和 catch 进行事件绑定。
  • 若需要禁止蒙版下的页面滚动,可使用 @touchmove.stop.prevent="moveHandle",moveHandle 可以用来处理 touchmove 的事件,也可以是一个空函数。
    -<view class="mask" @touchmove.stop.prevent="moveHandle"></view>
  1. v-html指令
    App端(vue页面V3编译模式)和H5端支持v-html,其他端不支持v-html。

跨端的富文本处理方案详见:https://ask.dcloud.net.cn/article/35772

五. 消息推送-UniPush

UniPush是DCloud联合个推公司推出的集成型统一推送服务,内建了苹果、华为、小米、OPPO、VIVO、魅族等手机厂商的系统级推送和个推等第三方推送。

uniPush推送开发指南

1. 推送平台开通

2. 模块权限配置

uniapp 架构 业务模块 基于uniapp的框架,uniapp 架构 业务模块 基于uniapp的框架_App_06,第6张

3. 厂商推送设置

uniapp 架构 业务模块 基于uniapp的框架,uniapp 架构 业务模块 基于uniapp的框架_json_07,第7张

4. 主要代码

// 初始化推送
initPush() {
	// #ifdef APP-PLUS
	let _self = this;
	// 点击状态栏消息
	plus.push.addEventListener('click', function(msg) {
		// 收到消息点击逻辑处理,跳转页面
	}, false);
		
	// receive事件
	plus.push.addEventListener('receive', function(msg) {
		_self.createLocalPushMsg(msg); //创建本地消息
	}, false);
	// #endif
},

//创建本地消息
createLocalPushMsg(msg) {
	if (msg.payload === 'LocalMSG') {
			return;
	}
	let options = {
		cover: false
	};
	plus.push.createMessage(msg.content, 'LocalMSG', options);
},

4. 获取clidentid

plus.push.getClientInfo().clientid

六. 开放生态

  1. uni-app插件市场,有数千款插件,支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型
  2. 兼容微信小程序 JS SDK,丰富的小程序生态内容可直接引入uni-app,并且在App通用
  3. 兼容微信小程序自定义组件,并且App通用
  4. 支持 mpvue 项目及组件,全端通用
  5. 支持 NPM 包管理系统
  6. 图表uCharts
  7. 丰富样式库ColorUI
  8. 官方UI组件库uni-ui



https://www.xamrdz.com/mobile/43q1942015.html

相关文章: