ホームページ > 記事 > ウェブフロントエンド > 知っておくべきUniAPPの入門知識をまとめました。
この記事では、UniAPP クイック スタートに関する関連知識をいくつか紹介します。お役に立てば幸いです。
大規模なフロントエンド時代の文脈において、フロントエンド開発者は単一の Web エンド開発をマスターする 能力だけではもはや十分ではなく、WeChat アプレット、Android APP、IOS APP、さらには Windows デスクトップ、そして最近リリースされた Hongmeng システム開発はすべて、成長するために習得する必要のあるスキルとなっています。そのため、さまざまな「クロスプラットフォーム」開発ソリューションが市場に登場しており、代表的なものとしては、UniAPP、Flutter、React Native、Taro、Weex などが挙げられます。
UniAPP は「Vue WeChat Mini Program」言語システムに基づいており、開発者が低コストで学習してすぐに使い始めることができると同時に、UniAPP エコシステムは徐々に成熟してきています。したがって、UniAPP に基づいてマルチターミナル プロジェクトを開発することは、多くの中小企業にとって一般的な技術ソリューションとなっています。
そこで、今日は UniAPP の基礎から始めて、エンタープライズ レベルの実践標準と比較し、マルチターミナル (WeChat ミニ プログラム H5 Android APP IOS APP) コミュニティ フォーラム プロジェクトを段階的に構築していきます。ゼロから一へ。
就学前の指示:
コース紹介 :
プラットフォームの機能に制限はありません
開発版をダウンロードツール HBuilderX
HBuilderX これは一般的なフロントエンド開発ツールですが、uni-app プラグインをインストールするように求められます。
uni-app
を使用して uni-app プロジェクトを作成できます。 「##uni-app
」と入力し、プロジェクト名を入力し、テンプレートを選択して、「作成」をクリックすると、正常に作成されます。
uni-app の実行
uni-app の実行app
┌─components uni-app组件目录 │ └─comp-a.vue 可复用的a组件 ├─hybrid 存放本地网页的目录(自建) ├─platforms 存放各平台专用页面的目录(自建) ├─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面 ├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此 ├─wxcomponents 存放小程序组件的目录(自建) ├─common 公共资源(自建) ├─api 请求封装(自建) ├─store 状态管理(自建) ├─main.js Vue初始化入口文件 ├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息 └─pages.json 配置页面路由、导航条、选项卡等页面类信息
、およびその他のリソースは
static
manifest.json ファイルは、アプリケーションの構成ファイルであり、アプリケーションの名前、アイコン、権限など。ここで Vue と H5 のクロスドメイン インターセプト プロセッサをセットアップすることもできます。
(3) vue.config.js
# をコンパイルして構成します。 pages.json
このファイルは、ユニアプリをグローバルに構成し、ページ ファイル、ウィンドウ スタイル、およびネイティブのパスを決定するために使用されます。ナビゲーション バー、下部のネイティブ タブバーなど。これは、WeChat アプレットの app.json
の Page Management 部分に似ています。
公式ドキュメント
属性 | タイプ | 必須 | 説明 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Object | No | デフォルト ページのウィンドウ パフォーマンスを設定します | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
オブジェクト配列 | is | ページ パスとウィンドウ パフォーマンスを設定します | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Object | No | コンポーネントは自動的にルールを導入します | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Object | No | 下部タブのパフォーマンスを設定します | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
##No | #スタートアップ モード設定subPackages | オブジェクト配列 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
サブパッケージ読み込み構成 | preloadRule | オブジェクト | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
サブパッケージングの事前ダウンロード ルール |
函数名 | 说明 |
---|---|
onLaunch | 当uni-app 初始化完成时触发(全局只触发一次) |
onShow | 当 uni-app 启动,或从后台进入前台显示 |
onHide | 当 uni-app 从前台进入后台 |
onError | 当 uni-app 报错时触发 |
onUniNViewMessage | 对 nvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯 |
onUnhandledRejection | 对未处理的 Promise 拒绝事件监听函数(2.8.1+) |
onPageNotFound | 页面不存在监听函数 |
onThemeChange | 监听系统主题变化 |
函数名 | 说明 |
---|---|
onLoad | 监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参),参考示例 |
onShow | 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面 |
onReady | 监听页面初次渲染完成。注意如果渲染速度快,会在页面进入动画完成前触发 |
onHide | 监听页面隐藏 |
onUnload | 监听页面卸载 |
onResize | 监听窗口尺寸变化 |
onPullDownRefresh | 监听用户下拉动作,一般用于下拉刷新,参考示例 |
onReachBottom | 页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项 |
onTabItemTap | 点击 tab 时触发,参数为Object,具体见下方注意事项 |
onShareAppMessage | 用户点击右上角分享 |
onPageScroll | 监听页面滚动,参数为Object |
onNavigationBarButtonTap | 监听原生标题栏按钮点击事件,参数为Object |
onBackPress | 监听页面返回 |
onNavigationBarSearchInputChanged | 监听原生标题栏搜索输入框输入内容变化事件 |
onNavigationBarSearchInputConfirmed | 监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。 |
onNavigationBarSearchInputClicked | 监听原生标题栏搜索输入框点击事件 |
onShareTimeline | 监听用户点击右上角转发到朋友圈 |
onAddToFavorites | 监听用户点击右上角收藏 |
uni-app 页面路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式(类似小程序在 app.json 中配置页面路由)。
"pages": [ { "path": "pages/index", "style": { "navigationBarTitleText": "路由配置", "navigationBarBackgroundColor": "#FFFFFF", "navigationBarTextStyle": "black", "backgroundColor": "#FFFFFF", "enablePullDownRefresh": true } }, { "path": "pages/user", "style": { "navigationBarTitleText": "路由配置", "navigationBarBackgroundColor": "#FFFFFF", "navigationBarTextStyle": "black", "backgroundColor": "#FFFFFF", "enablePullDownRefresh": true } }]
uni-app
有两种页面路由跳转方式:使用navigator组件跳转(标签式导航)、调用API跳转(编程式导航)
框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 | 触发时机 |
---|---|---|
初始化 | 新页面入栈 | uni-app 打开的第一个页面 |
打开新页面 | 新页面入栈 | 调用 API uni.navigateTo 、使用组件 <navigator open-type="navigate"></navigator>
|
页面重定向 | 当前页面出栈,新页面入栈 | 调用 API uni.redirectTo 、 使用组件 |
页面返回 | 页面不断出栈,直到目标返回页 | 调用 API uni.navigateBack 、 使用组件 、 用户按左上角返回按钮、安卓用户点击物理back按键 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 | 调用 API uni.switchTab 、 使用组件 、 用户切换 Tab |
重加载 | 页面全部出栈,只留下新的页面 | 调用 API uni.reLaunch 、 使用组件 |
getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。
注意
: getCurrentPages() 仅用于展示页面栈的情况,请勿修改页面栈,以免造成页面状态错误。
说明:页面生命周期的 onLoad()监听页面加载,其参数为上个页面传递的数据,如:
//页面跳转并传递参数uni.navigateTo({ url: 'page2?name=liy&message=Hello'});
url为将要跳转的页面路径 ,路径后可以带参数。参数与路径之间使用?
分隔,参数键与参数值用=
相连,不同参数用&
分隔。如 ‘path?key1=value2&key2=value2’,path为下一个页面的路径,下一个页面的onLoad函数可得到传递的参数。
// 页面 2 接收参数 onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数 console.log(option.name); //打印出上个页面传递的参数。 console.log(option.message); //打印出上个页面传递的参数。 }
注意
:url 有长度限制,太长的字符串会传递失败,并且不规范的字符格式也可能导致传递失败,所以对于复杂参数建议使用 encodeURI、decodeURI 进行处理后传递
因小程序有体积和资源加载限制,各家小程序平台提供了分包方式,优化小程序的下载和启动速度。
所谓的主包,即放置默认启动页面及 TabBar 页面,而分包则是根据 pages.json 的配置进行划分。
在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示,此时终端界面会有等待提示。
"subPackages": [ { "root": "news", "pages": [{ "path": "index", "style": { "navigationBarTitleText": "新闻中心", "navigationBarBackgroundColor": "#FFFFFF", "navigationBarTextStyle": "black", "backgroundColor": "#FFFFFF" } } ] } ... ],// 预下载分包设置"preloadRule": { "pages/index": { "network": "all", "packages": ["activities"] }}
uni-app 为开发者提供了一系列基础组件,类似 HTML 里的基础标签元素,但 uni-app 的组件与 HTML 不同,而是与小程序相同,更适合手机端使用。
虽然不推荐使用 HTML 标签,但实际上如果开发者写了p
等标签,在编译到非H5平台时也会被编译器转换为 view
标签,类似的还有 span
转 text
、a
转navigator
等,包括 css 里的元素选择器也会转,但为了管理方便、策略统一,新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发, 基于内置的基础组件,可以开发各种扩展组件,组件规范与vue组件相同。
案例
:知心姐姐布局实现
uni-app
的 js 代码,h5 端运行于浏览器中,非 h5 端 Android 平台运行在 v8 引擎中,iOS 平台运行在 iOS 自带的 jscore 引擎中。所以,uni-app
的 jsAPI 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。
ECMAScript 由 Ecma 国际管理,是基础 js 语法。浏览器基于标准 js 扩充了window、document 等 js API;Node.js 基于标准 js 扩充了 fs 等模块;小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。
标准 ecmascript 的 API 非常多,比如:console、settimeout等等。
非 H5 端,虽然不支持 window、document、navigator 等浏览器的 js API,但也支持标准 ECMAScript。
开发者不要把浏览器里的 js 等价于标准 js。
所以 uni-app 的非 H5 端,一样支持标准 js,支持 if、for 等语法,支持字符串、数组、时间等变量及各种处理方法,仅仅是不支持浏览器专用对象。
案例
:知心姐姐聊天功能
组件是 vue
技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,在项目的component
目录下存放组件,uni-app
只支持 vue
单文件组件(.vue 组件)
组件可以使用「全局注册」和「页面引入」两种方式进行使用,使用分为三步:
导入 import xxx from 'xxx'
注册 Vue.use('xx',xx)
components:{ xxx }
使用 <xx></xx>
父组件通过自定义属性向子组件传递数据
子组件通过 props
接收父组件传递的数据
slot
分发给子组件slot
标签上添加属性,向父组件通信数据,作用域插槽uni.$on
创建一个全局事件uni.$emit
来触发全局事件,实现多组件见的数据通信Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vue多个组件之间需要共享数据或状态。
import { mapState, mapActions} from 'vuex'export default { computed: { ...mapState(['loginState', 'userInfo']) }, methods: { ...mapActions(['userLoginAction', 'userLogoutAction']), }}
注意:配合使用 Storage 来实现刷新页面后状态持续保持的业务需求
uni-app
可通过 process.env.NODE_ENV
判断当前环境是开发环境还是生产环境,一般用于连接测试服务器或生产服务器的动态切换。
在HBuilderX 中,点击「运行」编译出来的代码是开发环境,点击「发行」编译出来的代码是生产环境
if(process.env.NODE_ENV === 'development'){ console.log('开发环境')}else{ console.log('生产环境')}
平台判断有2种场景,一种是在编译期判断,一种是在运行期判断。
编译期判断编译期判断,即条件编译,不同平台在编译出包后已经是不同的代码,
// #ifdef H5 alert("只有h5平台才有alert方法")// #endif// 如上代码只会编译到H5的发行包里,其他平台的包不会包含如上代码。
运行期判断 运行期判断是指代码已经打入包中,仍然需要在运行期判断平台,此时可使用 uni.getSystemInfoSync().platform
判断客户端环境是 Android、iOS 还是小程序开发工具
switch(uni.getSystemInfoSync().platform){ case 'android': console.log('运行Android上') break; case 'ios': console.log('运行iOS上') break; default: console.log('运行在开发者工具上') break;}
uni-app 已将常用的组件、JS API 封装到框架中,开发者按照 uni-app 规范开发即可保证多平台兼容,大部分业务均可直接满足,但每个平台有自己的一些特性,因此会存在一些无法跨平台的情况。
在 C 语言中,通过 #ifdef、#ifndef 的方式,为 windows、mac 等不同 os 编译不同的代码。 uni-app
参考这个思路,为 uni-app
提供了条件编译手段,在一个工程里优雅的完成了平台个性化实现。
条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
**写法:**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头,以 #endif 结尾。
\#ifdef
:if defined 仅在某平台存在\#ifndef
:if not defined 除了某平台均存在%PLATFORM% 可取值如下:
プラットフォーム | |
---|---|
アプリ | #APP-PLUS-NVUE |
H5 | |
#MP-WEIXIN | |
MP-ALIPAY | |
MP-BAIDU | |
MP-TOUTIAO | |
MP-QQ | |
MP-360 | |
#MP | WeChat ミニ プログラム/Alipay ミニ プログラム/Baidu ミニ プログラム/Bytedance ミニ プログラム/QQ ミニ プログラム/360 ミニ プログラム |
QUICKAPP-WEBVIEW | クイックApplication Universal (Alliance、Huawei を含む) |
QUICKAPP-WEBVIEW-UNION | Quick Application Alliance |
QUICKAPP-WEBVIEW- HUAWEI | クイック アプリケーション Huawei |
推奨: 「 | uniapp チュートリアル
以上が知っておくべきUniAPPの入門知識をまとめました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。