uni-app开发注意事项：Unexpected end of JSON input、static目录注意事项、模板内引入静态资源、JS文件引入问题、运行环境判断、easycom组件模式

1、Unexpected end of JSON input原因及如何解决

　　总是遇到一个报错，导致有时候渲染有问题，我们看看啥报错：

11:29:07.092 [Vue warn]: Error in render: "SyntaxError: Unexpected end of JSON input"
11:29:07.131 (found at pages/account/account.vue:1)
11:29:07.152 SyntaxError: Unexpected end of JSON input

　　初看是JSON解析的问题。但是account代码很简单，没什么json解析问题啊，后来发现是取userInfo信息时报错

  getters: {
    userInfo(state) {
      if (!state.userInfo) {
        state.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
      }
      return state.userInfo
    }
  },

　　如果userInfo不存在时，去storage里面取，如果不存在，这时候就为空。JSON.parse('')，所以就报这个错。

JSON.parse('')
// VM483:1 Uncaught SyntaxError: Unexpected end of JSON input
//    at Object.parse (<anonymous>)
//    at <anonymous>:1:6

　　那么知道了原因，稍微改一下即可：

  getters: {
    userInfo(state) {
      if (!state.userInfo) {
　　　　　　let _user = uni.getStorageSync('userInfo')
　　　　　　state.userInfo = _user ? JSON.parse(_user) : null
      }
      return state.userInfo
    }
  },

2、static目录的一些注意事项

（1）编译到任意平台时，static 目录下的文件均会被打包进去，非 static 目录下的文件（vue、js、css 等）被引用到才会被包含进去。

（2）static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

（3）css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

3、模板内引入静态资源

　　template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径，形式如下

// 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>

// 相对路径
<image class="logo" src="../../static/logo.png"></image>

　　注意：

（1）@开头的绝对路径以及相对路径会经过base64转换规则校验

（2）引入的静态资源在非h5平台，均不转为base64。

（3）H5平台，小于4kb的资源会被转换成base64，其余不转。

（4）自HBuilderX 2.6.6-alpha起template内支持@开头路径引入静态资源，旧版本不支持此方式。

（5）App平台自HBuilderX 2.6.9-alpha起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致

（6）支付宝小程序组件内 image 标签不可使用相对路径

4、JS文件引入

　　js文件或script标签内（包括renderjs等）引入js文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

　　注意：js文件不支持使用/开头的方式引入

5、运行环境判断

　　如何区分开发环境或生产环境？

　　uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境。cli模式下，是通行的编译环境处理方式。

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

　　如果你需要自定义更多环境，比如测试环境：

• 假设只需要对单一平台配置，可以 package.json 中配置，在HBuilderX的运行和发行菜单里会多一个出来。https://uniapp.dcloud.io/collocation/package
• 如果是针对所有平台配置，可以在 vue-config.js 中配置。https://uniapp.dcloud.io/collocation/vue-config

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

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

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

6、easycom：easycom组件模式

　　传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

　　不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

　　组件库批量安装，随意使用，自动按需打包。以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。

　　在uni-app插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。

　　easycom是自动开启的，不需要手动开启，有需求时可以在pages.json的easycom节点进行个性化设置，如关闭自动扫描，或自定义扫描匹配组件的策略。设置参数及如何使用见官网文档。

　　说明：

• easycom方式引入的组件无需在页面内import，也不需要在components内声明，即可在任意页面使用
• easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
• 在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
• 考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
• easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。
• nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom