uni-app的基本使用

一、什么是 uni-app ?

        官方文档
        uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

        即使不跨端，uni-app同时也是更好的小程序开发框架。

        DCloud公司拥有350万开发者用户，旗下uni-app有5万+案例、600+插件、50+微信/qq群、更高的百度指数，可以放心选择，快速体验

二、为什么要使用 uni-app ?

        使用 uni-app 解决了跨平台开发存在的问题

1. 跨平台更多

真正做到 “一套代码、多端发行”!
条件编译 : 优雅的在一个项目里面调用不同平台的特色功能!

2. 运行体验更好

组件、api 与 微信小程序一致
兼容 weex 原生渲染

3. 通用技术栈,学习成本更低

vue 的语法、微信小程序的api
内嵌 mpvue

4. 开放生态,组件更丰富

支持通过 npm 安装第三方包
支持微信小程序自定义组件及SDK
兼容 mpvue 组件及项目
App 端支持和原生混合编码
DCloud 将发布插件市场

三、uni-app 功能框架图

四、安装

        我们需要安装两个工具 :

        1. HBuilderX是通用的前端开发工具，但为 uni-app 做了特别强化。
        下载地址 : HBuilderX官网

图1

图2

        我们点击图1 download下载,就会弹出一个图2的窗口,选择你的系统,下载 App 开发版.下载成功后这是一个压缩包,解压完成我们点击 HBuilderX.exe 文件就成功打开了 HBuilderx

        2. 安装微信开发者工具

        下载地址 : 微信开发者工具

        我们根据自己的系统配置下载稳定版的,成功之后一直点击 next 下一步即可

五、初始化项目和运行项目

        1. 初始化项目

                1.1 用 HBuilder 创建

打开 HBuilder,点击左上角的"文件",点击"新建",再点击"项目",就会弹出一个项目窗口. 然后进行选择 uni-app 及创建项目和位置

                1.2 用 微信开发者工具 创建

这里就不再一一叙述了,可以去我的主页中找到微信小程序的基本使用就可以看到,就正常创建项目即可.运行的时候就会实现uni-app

        2. 运行

                2.1 用 HBuilder 运行

打开 HBuilder,点击左上角的"运行",点击"运行到浏览器",接着选择你想用什么浏览器打开,点击一下就成功打开了

                2.2 用 微信开发者工具 运行

如果是第一次使用微信小程序打开创建的 uni-app 项目,需要以下两点:

1. 先在微信开发者工具中,在最上面找到"设置",点击"安全设置".然后把"服务器端口"这一项打开
2. 复制 微信开发者工具的路径,然后点击 HBuilderx ,在最上面的"运行"中,找到"运行到小程序的模拟器",然后复制 微信开发者工具 的路径,就配置好了.下次在点击这样的操作,直接会在 微信开发者工具中转为小程序的文件格式

六、项目目录和文件作用</