学习uni-app的心得与体会

 目录

什么是uni-app

uni-app的使用方法

uni-app的使用技巧

uni-app在微信小程序中运行

uni-app小程序打包运行

pages.json的配置

uni-app组件描述

uni-app路由

uni-app常用api

1:什么是uni-app?

uni-app 是第一个使用vue.js开发所有前端应用的框架，开发者写一套代码就能发布到多个平台上

uni-app有很多优点，例如：

它可以使用现成的库和框架来构建应用程序。

uni-app是一个易于使用和功能强大的项目。

开发工具集成了 sass / less 专业级CSS扩展语言

2：uni-app的使用方法 

第一步：进入官网 HBuilderX-高效极客技巧 (dcloud.io)下载安装HBuilder X开发工具

第二步:启动HBuilder X,创建uni-app

 第三步:输入项目名称，选择uni-app类型,选择项目路径，点击创建按钮

第四步:运行到不同的终端进行 

 3.uni-app使用的小技巧

1:要学好uni-app 首先要学会用组件

以下几个为学习组件的网站

DCloud 插件市场 uni-app官网原生组件说明 | uni-app官网

2:要会使用vue.js的语法

3:能在微信小程序中调试代码

 uni-app在微信小程序中运行

第一步：安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示

uni-app小程序打包发行

第一步: 在HBuilderX中，单机“发行”-->“原生App-打包”命令

 第二步：登录HBuilder账号(如果没有账号需要自行注册)，需要实名认证才可以使用云打包功能，并配置打包选项。配置完成后，单击“打包”按钮。

如果弹出需要安装下图插件，点击安装即可，安装成功之后，再次点击打包。

pages.json的配置

pages.json文件主要用于对uni-app进行全局配置，可以在配置项设置默认页面的窗口、设置页面路径及窗口、设置组件自动引入规则、设置底部tab及分包加载配置

pages.json文件配置的参考文档地址:

uni-app常用组件

uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素，但uni-app的组件与HTML不同，而是与小程序相同，更适合手机端使用。虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转换。但为了管理方便、策略统一，写代码时建议使用view等组件。

组件的官方文档地址：组件使用的入门教程 | uni-app官网

uni-app路由 

uni-app页面路由由框架统一管理，开发者需要在pages.json文件中配置每个页面路由的路径。uni-app有两种页面路由的跳转方式，即使用navigator组件跳转和API跳转

 参数的跳转与接收

例如：在起始页面跳转到pages/news/index.vue页面并传递参数

uni.navigateTo({

    url:'pages/news/index?id=1&title=新闻动态'

})可改成

uni.navigateTo({

   url:"/pages/news/index?id=1&title="+encodeURIComponent('新闻动态')+""

})

uni-app常用api

uni-app的 js API 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

          标准 ECMAScript 的 js 仅是最基础的 js。浏览器基于它扩展了 window、document、navigator 等对象。小程序也基于标准 js 扩展了各种 wx.xx、my.xx、swan.xx 的 API。node 也扩展了 fs 等模块。

 uni-app 基于 ECMAScript 扩展了 uni 对象，并且 API 命名与小程序保持兼容。

 uni.request发起网络请求相当于之前vue里面的axios用于获取服务器端接口数据。

文档地址：uni.request(OBJECT) | uni-app官网

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。

如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

参考文档：uni.uploadFile(OBJECT) | uni-app官网