uni-app 性能优化实战之逻辑层条件编译的生产环境-EW帮帮网

文章目录

uni-app 性能优化

逻辑层和视图层分离，非H5终端通信损坏
当uni应用程序在非H5端运行时，它在架构上分为两个部分：逻辑层和视图层。逻辑层负责执行业务逻辑，即运行js代码，视图层负责页面呈现。
在这里插入图片描述

虽然开发人员在一个vue页面中编写js和css，但实际上，它们在编译时已经被分割。

逻辑层详细说明

逻辑层在独立的jscore中运行。它不依赖于本地Web视图。因此，一方面，它没有浏览器兼容性问题。另一方面，它可以在Android 4.4上运行es6代码。另一方面它不能为浏览器（如窗口、文档、导航器和本地存储）运行特殊的js API。

<view class="uni-list">
    <view class="uni-list-cell">
        <view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
            {{item.value}}
        </view>
    </view>
</view>

Jscore是一个标准的js引擎，可以正常运行，例如if、for、各种字符串和日期处理。应该区分js和浏览器之间的区别。
所谓浏览器的js引擎是基于jscore或v8的新一批特定于浏览器的API，如dom；

uni.showToast({
    title: '',
    mask: false
    duration: 1500
});

node.js引擎基于v8，并补充了一些特定于计算机的API，如本地io；
因此，uni应用程序的app端和applet端的js引擎实际上向jscore添加了许多移动端常用的js API，例如代码扫描。

viewfor：生成一段带有v-for循环结构的视图代码块
vbase：生成一段基本的vue代码结构

在这里插入图片描述

条件编译调用 HTML5+

小程序和H5等平台没有HTML5+扩展规范，因此当uni-app调用HTML5+extension规范时，请注意使用条件编译。否则，在运行到h5、applet和其他平台时，将发生加号未定义错误。

var appid = plus.runtime.appid;
console.log('应用的 appid 为：' + appid);

Uni-app不需要plus-ready来使用html中的plus-api，它需要等待plus-roady。uni应用程序可以直接使用，无需等待。如果您调用plus ready，它将不会被触发。
uni-app中的事件监视
在一个普通的H5+项目中，您需要使用文档。addEventListener以侦听本机扩展的事件。
在uni-app中，没有文档。它可以通过使用plus.globalEvent来实现。addEventListener（请注意，需要在清单中启用新编译器，即用户定义的组件模式“usingComponents”：true）。

plus.globalEvent.addEventListener('netchange', function(){});

全局组件

<template>
    <view>
        <uni-rate value="2"></uni-rate> <!-- 第三步，使用组件。并传值点亮2颗星 -->
    </view>
</template>
<script>
import uniRate from "@/components/uni-rate/uni-rate.vue" //第一步，导入组件
export default {
    components: {
        uniRate //第二步，注册组件
    }
}
</script>

uni app支持全局组件的配置，必须在main中配置。在js中全局注册后，组件可以在所有页面中使用。
小心

维埃。组件的第一个参数必须是静态字符串。
nvue页面暂时不支持全局组件

实例
主要的js中的全局导入和注册

import Vue from 'vue'
import pageHead from './components/page-head.vue'
Vue.component('page-head',pageHead)

index.vue 里可直接使用组件

<template>
  <view>
    <page-head></page-head>
    </view>
</template>

开发环境和生产环境

Uni-app可以通过进程访问。env NODE_ env判断当前环境是开发环境还是生产环境。它通常用于测试服务器和生产服务器之间的动态切换。
在HBuilderX中，点击“Run”编译的代码是开发环境，点击“Publish”编译代码是生产环境
在cli模式中，它是一种常见的编译环境处理模式。

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

HBuilderX中敲入代码块uEnvDev，uEnvProd可以快速生成对应development，production的运行环境判定代码。

// uEnvDev
if (process.env.NODE_ENV === 'development') {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
    // TODO
}

上述代码将只编译到H5分发包中，其他平台的包中不会包含上述代码。
运行时诊断运行时判断是指代码已经加载到包中，运行时仍需对平台进行判断。此时，您可以使用uni。getSystemInfoSync（）平台判断客户端环境是Android、iOS还是applet开发工具（使用uni.getSystemInfoSyncs（））。平台返回值以重置百度applet开发工具、微信applet开发平台和支付宝applet开发环境中的开发工具）。

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

uni-app 性能优化实战之逻辑层条件编译的生产环境

文章目录