跳至主要內容

配置模板

XinYang's Blog大约 3 分钟移动开发

本文介绍一般创建uniapp项目开发app时所配置的一些配置项

  1. 忽略版本兼容检查提示。这个提示常会出现在打包完运行时候弹出来的提示信息,然后点击弹框上的“查看详情”,就会跳转到DCloud的网页上,可以设置以下来进行关闭,这样打包完运行时候就不会出现弹框提示了。
{
    "app-plus": {
        "compatible":{
            "ignoreVersion": true
        }
    }
}
  1. 代码分包。代码分包可以减少app首次加载启动时所耗费的时间,需要在manifest.jsonpages.json两个文件同时配置才会生效:

  2. 开发app竖屏锁定,不运行app页面跟随页面旋转而进行旋转。这个需要在pages.json下的globalstyle/pageOrientation下进行配置,pageOrientation配置参考open in new window

  3. rpxCalcBaseDeviceWidthrpxCalcBaseDeviceWidthrpxCalcIncludeWidth三个值的介绍open in new window,一般默认即可,或者可能设计师给的稿纸宽度不是375,此时可以设置一下rpxCalcBaseDeviceWidth,这三个值方便我们进行响应式的布局,另外dynamicRpx根据实际情况是否设置为true,为true会根据屏幕大小变化进而重新进行页面布局

  4. transformPx,transformPx配置参考open in new window设为true时,方便我们将px转化为rpx,从而方便我们进行响应式的布局,当然,也可以部根据第四五点所介绍的uniapp内置的响应式布局配置,你还可以使用第三方的插件,如postcss-px-to-viewport,仅在开发环境使用即可,它可以将你所指定的单位和稿纸宽度全部转换成你所期待的单位。如果你的项目是ts声明,需要手动书写声明文件,也可以参考以下声明文件:

declare module "postcss-px-to-viewport" {
  type Unit = "px" | "rem" | "cm" | "em" | "rpx";
  interface Options {
    /**
     * 需要转换的单位
     */
    unitToConvert: Unit;
    /**
     * 设计稿的视口宽度
     */
    viewportWidth: number;
    /**
     * 单位转换后保留的精度
     */
    unitPrecision: number;
    /**
     * 能转化为vw的属性列表
     */
    propList: Array<string>;
    /**
     *  希望使用的视口单位
     */
    viewportUnit: string;
    /**
     * 字体使用的视口单位
     */
    fontViewportUnit: string;
    /**
     * 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
     */
    selectorBlackList: Array<string>;
    /**
     * 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
     */
    minPixelValue: number;
    /**
     * 媒体查询里的单位是否需要转换单位
     */
    mediaQuery: boolean;
    /**
     *  是否直接更换属性值,而不添加备用属性
     */
    replace: boolean;
    /**
     * 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
     */
    exclude: Array<Regexp> | Regexp;
    /**
     *  如果设置了include,那将只有匹配到的文件才会被转换
     */
    include: Array<Regexp> | Regexp;
    /**
     *  是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
     */
    landscape: boolean;
    /**
     * 横屏时使用的单位
     */
    landscapeUnit: string;
    /**
     * 横屏时使用的视口宽度
     */
    landscapeWidth: number;
  }

  export default (options: Partial<Options>): void => {};
}

但是一般看情况决定是否用这个插件,因为有些uniapp的组件,是使用到了rpx作为单位的,而rpx在uniapp里会自动转换成px

  1. minSdkVersion配置open in new window
  2. condition启动模式配置open in new window
  3. 配置app打包后的cpu类型open in new window,需要注意的是从HBuilder2.7.0+开始,云打包不再将x86打包进去。cpu配置注意事项open in new window
  4. 设置UrlSchemesopen in new window,配置此项可以从H5或其它app唤起我们开发的app