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

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 的运行环境判定代码。

// uEnvDevif (process.env.NODE_ENV === 'development') {    // TODO}// uEnvProdif (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;}