hbuilderX在点击左侧文件时希望可以焦点离开编辑框，否则文件复制，粘贴，f2重命名等快捷键没法用

背景

6月30日起，苹果App Store审核要求应用在启动时，不能使用启动图片，必须改为使用Storyboard来制作启动界面。原文参考：https://developer.apple.com/news/?id=03262020b

之前使用静态png图片做启动屏的方式，最大的问题是多尺寸适配，iOS设备目前不同屏幕尺寸太多，为每种屏幕做png图片不是合理解决方案。

Android处理多屏适配问题使用了.9.png，iOS则使用了Storyboard来处理。

什么是Storyboard

Storyboard是Apple提供的一种简化的布局界面，通过xml描述界面，不能编程。
虽然无法制作非常灵活的界面，但满足启动界面是没问题的，比如设定背景色背景图、设定前景文字、图片的位置。
storyboard的优势是启动速度快。在App的真实首页被渲染完成前，可以快速给用户提供一个基于Storyboard的启动屏。

其实5+App、wap2app、uni-app在iOS上，已经在两种情况下使用了Storyboard：

• 如果在manifest里没有选择自定义启动图片，那么默认情况下，打包后App启动时，会出现一个显示着app logo和name的通用启动界面。在iOS上，其实这个界面就是使用Storyboard实现的。
• 如果你的App启用了uni-AD广告服务，那么开屏广告界面，iOS上也是基于Storyboard实现的。

6月30日起，如上线Appstore，iOS只能使用Storyboard做启动图。如果你不想自己做Storyboard文件，就选择上述2种方式。
如果想自定义Storyboard，那么从HBuilderX 2.8起，也提供了自定义storyboard的方式。

如何自定义storyboard

HBuilderX2.8+版本开始支持配置自定义storyboard启动界面。

概要流程是：开发者首先制作storyboard文件，然后将storyboard文件和图片资源打包成zip，然后在HBuilderX 2.8+的项目manifest中选择这个zip，最后打包生效。

第一步：制作storyboard文件

storyboard有两种制作方式：
1. 直接使用附件提供的相对常用的 storyboard 模板，可在这个文件的基础上进行自定义（不需要 Mac 及 XCode，详情请查看附件中的 readme 教程）
此 storyboard 文件适用于各种 iPhone 及 iPad 设备的横竖屏，支持自定义界面元素包括

• 页面背景图片或背景颜色
• 中间显示图片
• 底部显示文字及颜色
  注：每一项都是可选的（比如只显示背景图片，只提供背景图片即可）

2. 使用xcode自行制作。xcode提供了可视化的制作storyboard的方式，但依赖于mac电脑。在xcode中制作storyboard的教程请自行网络搜索，请注意下面的注意事项。

HBuilderX需要的自定义storyboard文件格式为zip压缩包，里面要求包含XCode使用的.storyboard文件，以及.stroybard文件中使用的png图，如下图所示：

注意事项

• zip压缩包中不要包含目录，直接包含.storyboard和.png文件
• 有且只有一个.storyboard文件
• .storyboard文件可以通过xcode生成，也可以使用任何文本编辑器修改其源码，比如对.storyboard文件点右键，使用HBuilderX打开。它本质是一个xml文件。
• png文件名称中的@2x和@3x是适配不同分辨率的图片，系统会自动根据设备dpi选择，可参考这里
• 为了避免png文件名称与应用中内置的文件名冲突，建议以dc_launchscreen开头
• 制作 storyboard 时，请将图片资源直接拖到放工程中，不要放到 imageset 里面，并且图片命名要保证一定的唯一性可参考附件中的示例
• XCode中创建 storyboard 文件时，页面元素添加约束时一定要相对于 Superview，不然启动图到 loading页面过渡时页面会跳动或者变形
  

第二步：在HBuilderX的manifest界面中选择 自定义storyboard文件包。

把制作好的storyboard的zip包放置到硬盘中。
HBuilderX中打开项目的manifest.json文件，在“App启动界面配置”页面中勾选“自定义storyboard启动界面”，并选择自定义storyboard的zip包：

配置后需提交云端打包才能生效

离线打包请参考：iOS平台配置应用启动界面

附件说明

附件CustomStoryboard.zip为自定义sotyboard模板示例，默认效果如下：

此 storyboard 文件适用于各种 iPhone 及 iPad 设备的横竖屏，支持自定义界面元素包括

• 页面背景图片或背景颜色
• 中间显示图片
• 底部显示文字及颜色

注：每一项都是可选的（比如只显示背景图片，按照附件zip文件中的 readme.md 教程进行自定义修改，只提供背景图片即可）

后续

为iOS和Android制作不同的屏幕适配方案，还是比较麻烦。
而通用启动界面虽然双端均支持，且可以上Appstore，但自定义性不足。
后续DCloud会强化通用启动界面的灵活度，允许对背景、前景提供更多自定义性，并确保在iOS、Android双端均支持。

暂时，开发者如觉得自定义storyboard启动界面配置麻烦，也可以在manifest的启动图设置中选择默认的通用启动界面（或在HBuilderX2.8以前的版本删除启动图片配置），也满足App Store审核要求。

温馨提示：请勿在本贴下频繁刷广告，一经发现，直接封号。

附件下载：

此文档将不再维护，请参考新文档：https://uniapp.dcloud.io/tutorial/app-splashscreen

App启动时，因为应用自动需要一定时间，为了避免用户等待白屏，手机OS提供了特殊的启动界面设计，让用户先看到一个简单的界面，然后该界面消失，正式进入应用。

这个界面，即被称为启动界面，也成称为 splash 或 lauch screen。

启动界面原本是一个静态png图片方式。随着移动设备屏幕的多样化，为了让每种屏幕启动时界面都不变形，开发者需要为越来越多的屏幕尺寸制作不同的图片。

这带来很多问题，包括制作复杂、app包体积增大等。

于是Android发明了.9.png方式、iOS发明了storyboard方式，来解决多屏幕尺寸适配问题。

苹果公司的政策更为强硬，从2020年6月30日起，不再接受使用图片作为启动界面，必须使用storyboard，否则无法提交Appstore。

DCloud的App，支持所有Android和iOS的启动界面方式。

同时为了降低门槛，简化开发者为不同手机制作不同启动界面的复杂性，DCloud还提供了通用启动界面，即本文要重点介绍的内容。

首先汇总下DCloud支持的所有启动界面方式：

本文重点描述通用启动界面。其他方式，另行参考上表的链接。

通用启动界面是一种简单、可适配不同屏幕的启动界面。

它以app的logo、name为元素，自动生成适配不同屏幕尺寸、适配不同OS要求的启动界面。

通用启动界面有着最低的门槛，仅需要开发者为app在manifest里配好logo和name即可。并且符合任何应用商店的上线规范。它在iOS上就是通过storyboard实现的。

通用启动界面是为了方便开发者而设计的，它不具有很强的灵活性，如果开发者有较强的自定义需求，那么需要在Android上使用.9.png方式、iOS上使用自定义storyboard方式

同时DCloud会在后续适度强化通用启动界面的自定义性，适配更多常见场景。

通用启动界面的设置，在项目的manifest文件的app启动界面设置中。并且是新项目的默认设置，如果开发者未做过启动界面的任何设置，那么启动app时看到的就是通用启动界面。

注意：以下manifest配置需提交云端打包后才能生效

<a id="android" />

Android平台通用启动界面

不配置自定义启动图时，默认会显示通用启动界面，效果如下：

在界面上部显示应用图标（圆形裁剪，外围显示进度），图标下面为应用名称。

配置使用通用启动界面

HBuilderX中打开项目的manifest.json文件，在“App启动界面配置”页面中的“Android启动界面设置”项下勾选“通用启动界面”：

<a id="ios" />

iOS平台通用启动界面

通用启动界面使用storyboard实现，不配置自定义启动图时默认会使用通用启动界面，效果如下：

在界面上部显示应用图标（无裁剪），图标下面为应用名称。

如果应用开启适配暗黑模式/夜间模式/深色模式，则启动界面背景色会自动使用深色，文字颜色自动使用白色。

配置使用通用启动界面

HBuilderX中打开项目的manifest.json文件，在“App启动界面配置”页面中的“iOS启动界面设置”项下勾选“通用启动界面”：

以上界面截图为HBuilderX2.8+。
更低版本的HBuilderX，也支持通用启动界面，只要不配置启动图片，就会按照通用启动界面方式执行。
但自定义storyboard方式仅HBuilderX2.8+才支持。

为满足Appstore强制要求storyboard，开发者可以：

• 使用通用启动界面，此时任意HBuilderX均支持。
• 使用自定义storyboard启动界面，参考：https://ask.dcloud.net.cn/article/37475，此时需升级至HBuilderX2.8+。

因为公司使用的是离线打包方式
所以下载的是官方的IOS 离线打包环境
不清楚是因为未更新还是什么，反正最新的SDK包是过不了机审的，必定会提示要你不能使用UIWebView

所以我们的做法是必须去除一切有关UIWebVIew的插件和代码

找了几天 翻遍论坛，试了几个方法后 终于成功过机审并成功上架第一个版本

在此分享下自己的两个做法，不一定有用，也不清楚是因为哪个有用

MiPassport.framework，QHADSDK.framework，qucFrameWorkAll.framework，还有Google开头的几个库，这几个库不能用，要去掉引用

此处要感谢官方 DCloud_IOS_CLP 感谢他的热心回复

另外 还有一个
cd到项目Libs根目录
执行下面语句

find . -type f | grep -e ".a" -e ".framework" | xargs grep -s UIWebView

反正不知道是哪个有用 至少两个试完我成功了。

关键点：不管是库还是插件，都不能有UIWebView相关！！！！！！！！！！！！

前因

当前代码构建微信小程序可正常运行，但是无法运行H5，运行起来提示如下错误

chunk-vendors.js:4427 [Vue warn]: Property or method "keepAliveInclude" is not defined on the instance but referenced during render. Make sure that this property is   
chunk-vendors.js:4427 [Vue warn]: Error in render: "TypeError: Cannot read property 'meta' of undefined"

刚接触 uniapp，搜了一圈错误信息也没有找到问题所在，于是新建demo组个文件对比发现是 main.js 中我把 App.mpType = 'app' 删除了导致的。

后果

补齐main.js 的 App.mpType = 'app' 即可。
找到原因还是花费了一些时间，故记录一二，以便后者搜索错误提示就可以找到问题~

关于 App.mpType = 'app' 所能找到的说明

小程序页面组件和这个 App.vue 组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值

uni-merge-pages

之前有写这样一个库，通过读取 pages.json 文件内容中的 pages、subPackages 选项作为 uni-simple-router 的路由表，再借助 webpack 注入全局变量，完成一些列的操作。然而 此库刚好相反，它可以让你编写 js 模块文件 自动完成 pages.json 写入。妈妈再也不用担心配置混乱的问题啦。上手难度一颗星 阅读完安装后直接[跳入注意事项即可]()

飞机直达

• 送我去插件市场
• 送我去GItHub

安装

您可以使用 Yarn 或 npm 安装该软件包（选择一个）：

Yarn

yarn global add uni-merge-pages nodemon

npm

npm install uni-merge-pages nodemon -g

注意事项

• 使用之前请把 pages.json 中的所有内容备份到其他文件，避免覆盖文件。HBuilder X 创建页面时，即使勾选 在 pages.json 中注册 也同样无效。插件只认模块化输出的产物。
• 模块化js必须在结尾使用 ; 这样才能通知到插件更准确的捕捉。
• 目标捕捉内容默认是 const 声明，大写变量 包括：PAGES、GLOBALSTYLE、EASYCOM、TABBAR、CONDITION、SUBPACKAGES、PRELOADRULE、PAGESOTHER
• 禁止在对象最后一对 key/value 后 使用注释，如果需要注释请移步到 key/value 头部上
• 插件默认包含提取内容仅有7个，workers 默认是没包含的，如果需要写入到 pages.json 请使用 PAGESOTHER 包含
• pages.json 禁止手动往里面添加内容，因为下次热更直接会覆盖。请在模块 js 下添加。

开始使用

第一步：配置 uni.config.js 文件

在项目根目录或者任何地方新建一个 uni.config.js 文件，简单的配置一下。提供一些必要的选项即可。

// uni.config.js  
const {resolve}=require('path');  

module.exports = {  
    publicPath:'',        //预设一个公共路径  
    nodemon:{  
        watch:[     //监听当前项目根目录下的config文件目录 包括所有文件 默认只提取js文件  
            resolve(__dirname, './config/*'),  
        ],  
    }  
}

以上示例是在当前项目根目录下，如果你是新建在其他地方。那请修改 watch 路径，记住是 绝对路径。然后再通过 cli 传递 --config xxx/xxx/uni-config.js 路径即可。默认读取项目根目录下的 uni-config.js

还想更细腻一点的配置？安排

// uni.config.js  
const {resolve}=require('path');  

module.exports = {  
    publicPath:'',  
    //只提取 这三个文件中的内容作为 pages.json 中的写入物 记住绝对路径 像下面这样  
    includes: [       
        resolve(__dirname,'./config/pages.js'),  
        resolve(__dirname,'./config/tabbar.js'),  
    ],  
    //插件提取完成后 会通知你 你可以进一步修改内容 并返回给你 插件 记住一定要 next   
    transformHook:function(pagesStr,extractStr,next){     
        next(extractStr);  
    },  
    nodemon:{  
        watch:[  
            resolve(__dirname, './config/*'),  
        ],  
        //  显示更详细的日志  
        verbose: true,  
    }  
}

第二步：预设执行脚本

有两种方式实现：

第一种在当前项目根目录下执行 npm init -y 编写 scripts 脚本即可

{  
  "name": "xxxxxx",  
  "version": "1.0.0",  
  "description": "",  
  "main": "main.js",  
  "dependencies": {},  
  "devDependencies": {},  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1",  
    "build:pages": "uni-merge-cli"  
  },  
  "keywords": [],  
  "author": "",  
  "license": "ISC"  
}

需要使用时执行 npm run build:pages 即可。

第二种直接打开 dos cd 到项目根路径下 执行 uni-merge-cli 即可。

第三步：编写默认提取物文件代码

//config/pages.js  
const PAGES = [  
    // #ifdef APP-NVUE  
        {  
            path: "pages/index33/index333",  
            name:'index33'  
        },  
    // #endif  
    {  
        "path": "index2/index2",  
        "style": {  
            "navigationBarTitleText": "uni-app",  
        }  
    },  
];  
export default PAGES;  

//config/tabbar.js  
const TABBAR = {  
    "color": "#7A7E83",  
    "selectedColor": "#3cc51f",  
    "borderStyle": "black",  
    "backgroundColor": "#f00",  
    "list": [{  
        "pagePath": "pages/component/index",  
        "iconPath": "static/image/icon_component.png",  
        "selectedIconPath": "static/image/icon_component_HL.png",  
        "text": "组件"  
    }, {  
        "pagePath": "pages/API/index",  
        "iconPath": "static/image/icon_API.png",  
        "selectedIconPath": "static/image/icon_API_HL.png",  
        "text": "接口"  
    }]  
};  
export default TABBAR;

如果你没有预设 uni-config.js 中的 rule。请按照上面的配置进行编写，大写声明法 记住在一个声明完成的对象后面加上 ; 以便于插件精准提取。 如果不习惯这样的写法 你可以自己编写 rule 正则来提取即可。 在每个对象最后一个key/value后禁止使用注释，请移步到头部注释

额外参数写入到 pages.json

因为插件默认只有 7 个提取物。 包括：globalStyle、pages、easycom、tabBar、condition、subPackages、preloadRule。而 workers 是没有包含在内的。如果你想写入多个插件没包含的提取物进去，可以这样做。

// xxxx/config/other.js  
const PAGESOTHER= {   
    workers:'workers',  
    otherConfig:{  
        name:'hhyang'  
    }  
};

默认插件会把 PAGESOTHER 下声明的所有扁平成一个对象，平级的写入到pages.json 中

默认配置项

uni-config.js 中的配置最后会和默认配置进行合并，你可以在 uni-config.js 中编写任何你想要的代码

module.exports={  
    //预设在 pages 节点下 path 的公共路径  
    publicPath:'',       
    // 需要监听的文件目录下所包含的js文件 必须绝对路径 空则读取监听目录下的所有文件  
    includes: [],  
    // 提取文件内容的正则规则  
    rule: {  
        globalStyle: /(?<=const\s+GLOBALSTYLE\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        pages: /(?<=const\s+PAGES\s*=\s*)\[[\s\S]*?](?=\s*;)/,  
        easycom: /(?<=const\s+EASYCOM\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        tabBar: /(?<=const\s+TABBAR\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        condition: /(?<=const\s+CONDITION\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        subPackages: /(?<=const\s+SUBPACKAGES\s*=\s*)\[[\s\S]*?](?=\s*;)/,  
        preloadRule: /(?<=const\s+PRELOADRULE\s*=\s*)\{[\s\S]*?}(?=\s*;)/,  
        pagesother:/(?<=const\s+PAGESOTHER\s*=\s*)\{[\s\S]*?}(?=\s*;)/  
    },  
    // 这些是 nodemon 的所有配置  
    nodemon:{  
        "verbose": false,  
        "execMap": {  
            "js": "node --harmony"  
        },  
        "restartable": "rs",  
        "ignore": [".git", "node_modules/*"],  
        "env": {  
            "NODE_ENV": "production"  
        },  
        "ext": "js"  
    }  
}

开发一款APP，价格私聊，做蔬菜水果电商的APP，电13139501613，扣317450836，微anjungang007

微信朋友圈分享插件（支持多图），有兴趣联系我，一起交流

uniapp 状态管理以及持久化

安装如下依赖：vuex （vuex 状态管理使用），vuex-persistedstate（状态持久化使用）

store.js ,文件内容示例

// 引入依赖  
import Vue from 'vue'  
import Vuex from 'vuex'  
import createPersistedState from 'vuex-persistedstate'  

Vue.use(Vuex)  

const state = {  
  favorites: [],  
  username:"",  
  demoxxxx: ""  
}  

export default new Vuex.Store({  
  state,  
  plugins: [  
    // 可以有多个持久化实例  
    createPersistedState({  
      key: 'app_config_data',  // 状态保存到本地的 key   
      paths: ['favorites', 'username'],  // 要持久化的状态，在state里面取，如果有嵌套，可以  a.b.c   
      storage: {  // 存储方式定义  
        getItem: (key) => uni.getStorageSync(key), // 获取  
        setItem: (key, value) => uni.setStorageSync(key, value), // 存储  
        removeItem: (key) => uni.removeStorageSync(key) // 删除  
      }  
    })  
  ]  
})

main.js 文件

import Vue from 'vue'  
import store from 'store.js' // 文件的路径自己看着办，这里只是实例  

const app = new Vue({  
  store,  // store 丢这  
  ...App  
})  
app.$mount()

示例页面，仅js部分

<script>  
import { mapState, mapMutations } from 'vuex'  
export default {  
  data:() => ({  
     demo: "demo",  
  }),  
  computed: {  
    // 映射两个状态到页面示例中，可以直接访问，实时获取state的值，更多请自行了解vuex  
    ...mapState(['username','favorites'])   
  },  
}  
</script>

解释

Q：为什么不在template里面是有$store.state.xxx进行访问，而使用 mapState ？
A：因为 uniapp 不支持(或者说只能弯道实现，在 main.js 中 Vue.$store = store)，因此使用 mapState 来访问

更多请了解

vuex-persistedstate： https://www.npmjs.com/package/vuex-persistedstate
vuex：https://vuex.vuejs.org/zh/

uni.getLocation({
type: 'wgs84',
geocode:true,//设置该参数为true可直接获取经纬度及城市信息
success: function (res) {
console.log(res)

我已申请的高德的key，真机安卓测试提示：获取地址失败，将导致部分功能不可用

奇怪的问题

> Tips:
以下讨论基于uni-app 2.0版本(v2.0.0-27920200529001)，在微信小程序中实测有效，其他平台未测试

开发中的一个需求是点击卡片跳转详情页面，卡片上有一个switch按钮，要求点击按钮时仅触发按钮的change事件不做页面跳转。

使用官方文档中的.stop事件修饰符时，发现无法阻止change事件。而若是两个click事件则可以阻止子元素向上冒泡。示例代码如下：

无效示例：

<view class="my-style" @click="goPage">  
    <switch checked @change.stop="switch1Change" />  
</view>  

有效示例：

<view class="my-style" @click="goPage">  
    <view @click.stop="switch1Change">  
        <switch checked @change="switch1Change" />  
    </view>  
</view>  

方案问题

本方案实际上是给switch元素绑定了两个事件，一个change，一个tap，并都指向了同一个method，且需要在方法中过滤click触发的事件，不够优雅。不过目前暂未有更好的解决办法。

HBuilderX2.8.0 版本开始调整uni-app默认使用v8引擎

uni-app项目中的主要业务逻辑代码都是基于js代码控制，运行在独立的js引擎中，HBuilderX2.7.14及以下版本默认使用开源项目weex自带的JavaScriptCore引擎，JavaScriptCore 是基于 JavaScriptCore 2016版 进行了裁剪，已经数年未更新。

HBuilderX2.8.0中集成的V8引擎是基于2020年5月份的8.3版本。

JS引擎对比

为了对比测试JS引擎性能及内存占用情况，我们使用简单uni-app应用进行对比测试。
在华为mete30pro测试10次平均数据如下：

亿次数组操作代码

    var start = new Date().valueOf()  
    var arr = []  
    for (var i = 0; i < 100000; i++) {  
        var arrIn = []  
        for (var j = 0; j < 1000; j++) {  
            arrIn.push(j)  
        }  
        arr.push(arr)  
    }  
    var end = new Date().valueOf()  
    console.log("耗时："+(end - start)+"ms");

性能
从测试数据看v8引擎相对于JavaScriptCore引擎有性能优势，特别是在大量数组操作方面，内存占用方面也有一些优势。

安装包大小
但使用V8引擎相对JSC引擎安装包会变大，仅包含armeabi-v7a类型cpu时约增加1.5M，同时包含armeabi-v7a和arm64类型cpu时约增加3M。

配置使用JSC引擎

云打包配置

如果对安装包大小比较在意，也可以配置继续使用JavaScriptCore引擎
打开项目的manifest.json文件，切换到“代码视图”

• uni-app项目：
  在"app-plus" -> "distribute" -> "android"节点下添加jsEngine字段
• 5+ App项目：
  不支持使用JS独立引起

    "jsEngine": "jsc"

注意：需提交云端打包才能生效

离线打包配置

离线SDK自2.8.1开始已将默认引擎切换到V8，用户可以根据自己的需求切换引擎。

注意：不同引擎的aar库不能同时使用！