uniapph5编译模式

① uni-app开发H5

emmmm....大概有大半年吧没有更新文章了吧，疫情一直到三月份才慢慢有了好转，现在已是七月，但还是不能松懈，希望宝宝们从自我做起，自觉带好口罩哦~相信在不久的明天，疫情一定彻底被战败，最终的胜利必将属于我们！中国加油！！！

疫情期间呢也自己学习了一些新的东东，目前在一家公司写着两个比较的大的项目吧，两个项目都是vue搭建的项目，一个是用element-ui框架写的PC端项目，一个是在HBuilder-X软件中使用uni-app框架写的H5！

② uniapp发布H5应用，并在nginx部署

uniapp发行H5-手机版，官网说的看似简单，按步骤操作下来，打开网页确实白的。一路网络查下来，终于实验成功，在此记录完整步骤如下：
一、HBuilderX配置uniapp工程，修改manifest.json关于h5的配置，如图：

二、nginx部署
本条默认nginx已经安装配置好
第一步，打开nginx所在目录，把打包好的h5文件放到nginx/html目录下，如图

第二步，在此目录D:\nginx-1.16.1\conf打开nginx.conf,配置好端口号，服务地址，
location是按照uniapp官方文档要求配置的

第三步，浏览器打开 http://localhost:9001 访问成功，说明部署成功

③ 混合开发之uni-app

uni-app App端内置weex渲染引擎，提供原生渲染能力

然而， Weex并不是一个前端框架 。实际上，前端框架仅仅是 Weex 的语法层或称之为 DSL (Domain-specific Language)，它们与原生渲染引擎是分离的。换句话说，Weex 并不依赖于特定的前端框架，随着前端技术的发展，Weex 也可以集成更多广泛使用的前端框架。

以往的 weex ，有个很大的问题是它只是一个高性能的渲染器，没有足够的API能力，使得开发时非常依赖原生工程师协作，开发者本来想节约成本，结果需要前端、iOS、Android 3拨人开发，适得其反。而 nvue 解决了这个大问题，让前端工程师可以直接开发完整 App，并提供原生插件的市场交易和云打包。这些组合方案，开发者切实的提高效率、降低成本。

如果你是web前端，不熟悉 weex，那么建议你仍然以使用 vue 为主，在App端某些 vue 表现不佳的场景下使用 nvue 作为强化补充：

uni-app App 端内置 HTML5+ 引擎，让 js 可以直接调用丰富的原生能力。

小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。

在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。

uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现（注意manifest中需开启新编译器，即自定义组件模式"usingComponents":true）。

同理，在 uni-app 中使用 Native.js 时，一些 Native.js 中对于原生事件的监听同样需要按照上面的方法去实现。

注意：旧编译器（非自定义组件模式）不支持 plus.globalEvent 这个对象。

④ uniapph5为什么性能好

uniapph5为什么性能好
因为它在底层会自动优化数据同步、虚拟DOM，比大多数开发手动写的代码要更高效。uni-app也如此，框架底层的优化处理比大多数开发者手动写setdata或DOM操作更高效。多端适配很多是在编译时做的，并不影响运行时的性能。

⑤ uniapp打包后的h5能反编译吗

不能。uniapp打包后app无法打开问题，因此h5是不能反编译的。uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web响应式、以及各种小程序，比如微信、支付宝、网络、头条、QQ、钉钉、淘宝、快应用等多个平台。

⑥ uni-app运行到H5正常，但运行到小程序不正常、报错总结

同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。

控制台"Cannot read property 'globalData' of undefined"
解决办法：将getApp()替换成this

以上错误的写法编译都会不通过

问题应该出在(item.title || '').length，其中(item.title || '')得到的结果有问题

解决办法：加入in(this)

原因：h5引用组件会渲染成uni-view标签，而小程序直接是comp-a标签，此时虽然显示设置了样式，但不会渲染出来
解决办法：在子组件中设置好样式，或者用/deep/ 对子组件下的节点设置样式

解决办法：在父组件修改对象的数据，不要在子组件操作，网上说是微信小程序无法直接操作props里的对象

1.竖向的列表，使用的view的滚动，并设置overflow-y:scroll;滑动列表然后点击列表某一项跳转详情后，再回到列表页，view总是回到了顶部，和 这个问题 一样。
解决办法：
使用scroll-view替换view，设置scroll-y=true，但也产生了一个问题，scroll-view的宽度默认继承父级元素的宽度（屏幕宽度），并不是等于所有子集元素的和，因此需要动态设置scroll-view的宽度
2.uni设置scroll-top为0无效
uniapp里面使用scroll-view 组件，动态设置scroll-top 属性来控制滚动高度，但是当想滚动到起始位置时 设置动态值为0 时无效的
解决办法：
首先要定义一个变量记录滚动条的位置

用 @scroll="scrollChange" 监听 滚动条变化

定义一个变量 存滚动的位置，当需要滚动到 初始值的时候

先将滚动的当前高度赋值给scrollTop 然后设置为0 就有效果了

⑦ 仿抖音上下滑动播放视频（兼容安卓，ios，小程序，h5）

运行条件

HBuilder X 2.2.2

安装后，从插件市场导入，即可真机运行

vue

项目地址

github

uniapp插件市场

说明

插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app)，可自行切换。

插件在uni-app编译模式下编写(已切换)。

默认为weex编译模式，在 manifest.json 的源码视图里配置是切换模式， manifest.json -> app-plus -> nvueCompiler 切换编译模式。

swiper在非App端内嵌video性能比较差，不建议导入过多视频。

项目效果

h5在线地址

⑧ uniapp发布h5用户访问还是旧页面

uniapp优点:

①兼容性好

Uni-app最大的特点就是一套代码编译以后多端通用，开发人员不需要在每个平台都单独开发一套代码，节省了大量的成本。

②学习成本低

由于uni-app基于vue.js开发，因此对于前端开发工程师不会十分困难，学习uni-app的门槛也相应降低。

③开发速度快

由于uni-app是用HBX进行开发，所以支持vue的语法。

④拓展性强

Uni-app支持nvue，封装了H5+。同时，还支持原生的iOS和安卓开发。

⑤开发团队支持多

目前uni-app的开发团队DCloud发布新版本的频率比较频繁。

⑨ uniapp中自定义条件编译平台总结

1.运行

2.发布

1.uniapp自定义条件编译平台
2.uniapp条件编译

⑩ uniapp h5项目用nginx部署需要的配置

我项目里有若依后台，和一个微信公众号h5项目，之前用hbuilder启动的时候没什么问题，后来给用户部署的时候，发现配置挺麻烦的，研究了一下：
1.项目编译后，是放在一个h5目录下的，如果你的项目有自己的名字，就是基础路径不为/,比如/gzh，那部署的时候也得放在gzh目录下，并配置nginx指明：

2.如果项目里访问api到后台的话，需要配置：

完毕。