快速入门uni-app，把想看的网站变APP。

---

下载hbuildx，这里官方提供了几种安装包，有完全版，还有beta版，还有标准版，随便下一个吧，或者直接下载标准版的，因为它最小。

1.创建uni-app，直接选择uni-app 默认模版(hello-app项目可以拿来看看，不建议开发时使用，wap2app是针对wap转app端的，5+app 使用htmlplus，uni-app对html5+ 进行了整合，并建议直接使用uni-app即可，小程序那就是小程序咯，让我们心大一点，练习多端吧)

关于目录结构，可以在开放规范中看到或者直接创建一个heoll 模版项目看看，各个文件夹之间的关系和作用都比较明确，对于uni-app的配置文件需要仔细看看。

2.配置

manifest.json 这个文件在移动应用中屡见不鲜，在uni-app也有关这个文件的解释https://developer.mozilla.org/zh-CN/docs/Web/Manifest

文件是应用的配置文件，用于指定应用的名称、图标、权限等。个人觉得就是映射，在不同的环境下具体的左右略有不同，比如webpack 中是指向原始文件的映射关系等。

uni-app 中有一些自定义属性比如appid，是用来标识云端编译用的。https://ask.dcloud.net.cn/article/35907

在ide中打开这个文件，会有一个新的视图，是中文的，如果你要详细了解关系，可以到文件目录下打开这个文件查看或者直接点击最下方的源码视图进行查看。另外有一些配置可能找不到，但是在源码视图中可以找到，还有一些配置，默认项目是没有的，比如超时时间的设置。

启动图：配置.9 图片制作流程 https://ask.dcloud.net.cn/article/35527

打开下载工具 draw9patch.bat(这里我没有打开，处理文件报错，不去深究了，看第二种方法，通过as，打开as)

新建一个as项目，找一个png图片丢到as中，右键创建.9 图片

打开这个文件，点击鼠标坐标在边上即可调整拉伸区域与内容区域，类似下面这种，关于四个边的概念大家去看下文档，类似下面这种内容居中的图片(一般都是这样)，拉伸的时候左右两侧和上下两侧拉伸空白，在操作的时候需要先control选择拉伸区域，然后再shift 去掉一部分的拉伸器区域~

像这样搞定后就行了，然后根据uni-app的规定指定图片大小上传。

另外：此用法只适用与android，ios就一个个上传吧。

查看json源码，其中有一项为第三方sdk，配置后可使用第三方sdk的集成，一些常用的第三方sdk已集成，比如授权登录、分享、支付等。

更多的配置自行看吧，再此不表。

第二个配置文件 pages.json 看名字就看的出来是配置页面用的

关于pages，新增的页面需要追到到page文件中，定义全局样式后，每个page可以单独的配置其style。

另外在pages目录下新增页面的时候，配置文件中会自动追加和删除相关page。

其中关于导航栏，官方建议使用原生又uni-app提供的原生导航，如果自定义导航，可能会有很多问题，https://ask.dcloud.net.cn/article/34921

尤其是前端导航与下拉刷新之间的冲突。

关于subNVue，这里解释一下nvue，刚开始看的时候我也有点懵，啥意思，vue提供的新扩展吗？并不是，nvue 是与native.js 结合的一种组件规范，它可以直接调用原生代码中的api，官方建议是只是在有特定需求的地方使用nvue，

而这里提到的subNVue 指的是通过nvue 创建的一种子窗口组件，它使用的是原生渲染的方式，通过窗口进行的实现，在做一些浮动的时候，比如遮罩蒙板，视频弹幕这种的时候用得上。

所以使用nvue的时候想要调试必须在终端环境，模拟器或者微信工具。如果运行之前应该有记录，这里不表。

多页面通讯：有两种，官方推荐新的方式，注册监听

uni.$on('page-popup', (data) => {  vm.title = data.title;  vm.content = data.content; }) uni.$emit('page-popup', {  title: '我是一个title',  content: '我试data content'}); 另，官方提供了一些建议：所以不要滥用它为好

还有就是关于subNVue的style 并不是我们平时理解的所有样式表，它自有规则，具体请看官网，其中有几个重要的属性，比如type、position、dock。

conditon：

指定页面，也就说不要不用每次启动都要重新点一遍来看，只需要指定我们当前调试的页面即可，这个配置只在开发时候生效，正式编译打包后不起作用。

"condition":{ "current":0, "list":[ { "name":"me