Uni-app学习笔记（一）

Uni-app官方教程

https://uniapp.dcloud.io/

Uni -app 是一个使用Vue.js开发小程序、H5、APP的统一前端框架。

开发者使用Vue语法编写代码，uni-app框架将其编译到小程序（微信、支付宝等等）、APP、H5等多个平台，保证其正确运行并达到优秀体验。

 

Vue.js是三大主流框架之一，是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统，即自动对页面中某些数据的变化做出响应。

（想要了解更多，参考https://zhuanlan.zhihu.com/p/143586553）

 

Uni-app 1.跨平台更多：能够做到一套代码，在多端发，且不牺牲不同平台的特色功能

2.运行体验更好：组件、api与微信小程序一致，兼容weex原生渲染。

3.通用技术栈，学习成本更低：vue的语法、微信小程序的api、内嵌mpvue

4.开放生态，组件更丰富：支持通过npm安装第三方包、支持微信小程序自定义组件及SDK、兼容mpvue组件及项目、APP端支持和原生混合编码、Dcloud将发布插件市场

 

 

当前跨平台开发存在的3个问题 1.多段泛滥2.体验不好3.生态不丰富

 

 

 

创建uni-app

Uni-app支持通过可视化界面Hbulider X、vue-cil命令行两种方式快速创建项目，两个选择一个，这里选择Hbuilder X，官方IDE下载地址：

https://www.dcloud.io/hbuilderx.html

 

建议下载APP开发版

在创建项目时 常用的两个模板hello uni-app 和uni ui 项目模板

运行  点击工具栏的运行->选择运行设备，即可在对应的设备体验uni-app的不同版本，若是选择运行到手机，则需要连接手机，开启USB调试

 

打包 在Hbuilder X 工具栏 点击发行，选择原生app-云端打包

 

发布  1.若是发布为H5，则在manifest.json的界面下进行配置，然后点击工具栏的发型，选择网站-H5手机版，即可生成H5的相关资源文件，保存于unpackage目录

 

2.发布为微信小程序，首先要先去熟悉一下微信小程序，需要拥有微信小程序appid，然后点击工具栏的发型->小程序-微信，输入小程序名称和appid，即生成微信小程序项目代码

 

3.发布为百度小程序

4.发布为支付宝小程序

 

当然除了Hbuilder X 之外，还可以使用cli脚手架，可以通过vue-cil 创建uni-app

具体详情可参考uni-app官网教程

https://uniapp.dcloud.io/quickstart-cli

 

学习uni-app的准备

html->css->javascript->ajax->vue->uni-app