uniapp 从开发到上架应用文档（二）

第二部分  项目开发过程

1  项目搭建

uni-app其实是DCloud推出的众多产品之一，当然我们只研究目前能用到的

DCloud的官网：https://www.dcloud.io/

uni-app的官网：https://uniapp.dcloud.io/

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

1.开始阶段：

公司想要将现有的几个前端项目合二为一，又想兼顾APP和小程序（目前），简而言之，一套代码，兼容多端，在网上调研发现了个这个比较，非常详细：

 

来源地址：https://juejin.im/post/5c4ec383f265da613e229a67，有兴趣可以看一下

经过我在官网和加入官方QQ群之后，感觉还不错，其实vue的多端兼容平台也就那么几个。。。

2.选用uni-app

选用之后，先写demo，看一下难易程度，发现会vue的开发人员能很容易上手，而同时写过小程序的就更容易了，它的api和生命周期是和小程序一模一样的，在自定义组件和编程上遵循vue2.0的规范。

3.项目搭建

（1）下载官方推荐编辑器：https://www.dcloud.io/hbuilderx.html

页面点击右上角下载标准版

在编辑器上直接新建项目，也是非常方便的。

（2）在HBuilderX界面中点击 工具 - 插件安装，依次安装

NPM,内置浏览器，UniApp编译，js-beautify，js压缩，css压缩，less编译，scss/sass编译，es6编译等等

（3）点击工具 - 设置 - 运行配置，

设置浏览器运行配置里的Chrome安装路径为本机的真实Chrome安装路径

如:C:/Users/yeyiqing/AppData/Local/Google/Chrome/Application/chrome.exe

设置小程序运行配置里的微信开发者安装路径为本机的真实微信开发者安装路径

如：E:/warespace/微信web开发者工具

设置node运行配置里的node路径为本机的真实node安装路径

如：C:/Program Files/nodejs/node.exe

（4）在项目里的manifest.json里找到微信小程序配置，更改小程序AppID

（5）先打开微信开发者工具，点击设置-代理设置,选择不适用任何代理...

如需运行：

先在HBuilderX里打开pages下的login.vue页面

选择HBuilderX界面: 运行-运行到浏览器-Chrome

运行-运行到小程序-微信开发者工具

如需打包：

点击；发行 - 原生APP打包 - 发行

发行 - 小程序微信 - 发行

信息会打印到下方控制台里...

2  基础架构配置

   包含基本的应用配置，类比底部模块和基本样式等。

扩展组件 components

在官网的插件市场可以下载各种扩展组件，刚开始可以把官网的例子复制过来，差不多就够用了。

扩展插件 js_sdk

可以在官网下载，也可以在其它地方下载需要的 js 插件，在需要使用的文件里面引入就可以了哦。

页面组件 pages

页面组件里面一个模块就是一个文件夹了，每个模块里面有多个页面组件，就是单文件组件，感觉很方便。

静态资源 static

这是一个放图片的文件夹，图片的引用最好用绝对路径，加个 @ 就是了，真是方便啊。

图片的处理是这样的，小图片的话就生成了 base64 的编码了，大一点的图片就是直接引入了，有的还会加个名字编码。

打包目录 unpackage

在这里有各个平台的打包文件，可以使用官网自己的开发编辑器 HBuilder X 。

应用的文件 App.vue

在这个文件里，可以写一些公共的样式和脚本，应用的生命周期调用等等。

入口文件 main.js

配置文件 manifest.json

各种平台的打包配置。

页面路径 pages.json

每个页面都要在这个文件里面配置一下。

样式变量 uni.scss

可以设置框架的常用样式变量。

2.1  manifest.json

1、manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等
2、打开manifest.json，选择微信小程序配置，勾选前三项

1. 如果要校验安全域名，则勾选第四项检查安全域名和TLS版本，在微信小程序上会自动不勾选不校验安全域名和TLS版本 

  

2.2  App.vue

1、应用配置，用来配置App全局样式以及监听应用的生命周期，包括应用刚运行是的某些函数，可在该配置里增加各种登录相关的功能，类比首次检测热更新等。

2、可以写公共样式

写上scoped表示在当前组件的样式

3、①点击微信开发者工具里右上角获取场景值

②onlaunch可以传option值，当用户切后台进入的时候可以拿到用户进入的场景值

在App.vue中写入

③在控制台打印出1001场景值

2.3  static

static放静态资源，比如图片，字体，阿里图标库的字体文件存放位置。

注意：尽量不要在该目录下存放太多静态文件，小程序发布有大小限制，尽量使用线上数据。

2.4  pages

pages主要做分页，没有公共部分

注意：还是因为微信小程序的限制，若程序模块较多须在开发之前策划好分包机制的使用来减轻主包pages的使用负荷，否则无法发布

2.5 components

1、找到文件所在位置，新建文件夹，components，存放组件（可用来定义一些常用的组件，类比搜索条件下拉等）

 2.新建组件

3、引入组件，进行局部注册

4、传参
①传属性

②绑定事件
index.vue

test.vue

5、注册事件
$on可以调用无数次
$once只可以调用一次