uniapp的学习

1.介绍

uniapp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到ios,Android,H5,以及各种小程序（微信、支付宝、百度）等多个平台。

2.踩坑点。

第一次通过hbuildx运行微信小程序，需要将微信开发者工具里面安全中的服务端口打开。

通过运行hbuildx，会自动运行到对应的软件中。

3.目录结构

4.开发规范

页面文件遵循Vue单文件组件规范

组件标签靠近小程序规范

接口能力（JS API）靠近微信小程序规范，需要将前缀wx替换为uni

数据绑定及事件处理同Vue.js规范，同时补充了App及页面的生命周期

为兼容多端运行，建议使用FLEX布局进行开发

5.全局配置和页面配置

（1）全局配置

在pages.json中的globalStyle中进行配置。

（2）页面配置

首先在pages中新建目录。新建对应文件类型。

在文件中写入内容。

要想自己独有样式，则在pages.json中找到自己的path,然后添加style

tableBar是与globalStyle,pages是同级的，因此放在同一级别下。

步骤：1.新建页面

2.在pages中进行写入path

3.在tabBar中通过pagePath中写入。

微信小程序中，将普通编译换为详情页即可。就可看到对应页面

在浏览器中可以通过修改路由参数来看到页面

9.组件的使用

注意点：

（1）text文本组件的使用

有三个属性：selectable：长按文本是否可被选中，默认false。与user-select一个意思

space：显示连续空格 。将文本中的空格也显示出来不加它，会默认将连续空格只显示一个。

ensp:中文字符空格一半大小

emsp:中文字符空格大小

nbsp:根据字体设置的空格大小

（2）view组件

mode:属性值

8.在uniapp中使用字体图标

注意点：使用方式与普通web项目相同，字体文件小于40kb,uniapp会自动将其转化为base64格式

字体文件大于等于40kb，需要开发者自己转换，否则不生效。

字体文件的应用路径推荐使用~@开头的绝对路径

使用：1.将下载好的字体图标文件中的.css .eot. .svg.ttf.woff.woff2文件放入static中的font文件中（需要创建）

2.要想在全局可以使用，则需要放在App.vue中引入css文件

使用~@修改后的内容

（3）scss的使用安装

在hbuildx中找到工具-》插件安装-》scss。安装完成即可直接使用。

(4)uni.scss文件

在这个文件中包含了对一些样式进行变量的申明，使用的话直接使用变量民即可。

10.基本的数据绑定

和vue中的数据绑定一毛一样的

（1）插值表达式

（3）如何注册事件和传递参数（v-on）

还是和vue中的一毛一样。$event获取事件参数

页面的生命周期：放在自己的页面里面

触发下拉更新方式2.（通过绑定事件实现下拉刷新startPullDownRefresh）

onReachBottomDistance 页面上拉触底事件触发时距页面底部距离，单位只支持px。

15.数据存储

(1)设置（uni.setStorage）

uni.setSrorage({})异步接口

同步：let value = uni.getStorage(key) value就是最后获取的值

（3）uni.removeStorage 异步

移除数据

同步为uni.removeStorageSync(key)

上传：只需要uni.chooseImage就可以对图片进行上传操作。

然后将其选择的图片渲染到页面中。

current参数。代表要显示那个。

17.条件注释实现跨段兼容

css中的条件注释：

（2）编程式导航跳转

uni.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用uni.navigateTo

uni.redirectTo:关闭当前页面，跳转到应用内的某个页面

uni.reLaunch:关闭所有页面，打开应用内的某个页面

uni.switchTab:跳转到tabBar页面，并关闭其他所有非tabBar页面。

uni.navigateBack:关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈，绝对需要返回几层。

（3）实现跳转传参

19.组件的创建

和vue中创建组件是一样的。

（1）在components中新建组件目录，然后创建组件文件。

（2）在pages.json中，将页面添加配置好

（3）在要使用的页面中，script标签中：import 组件名称 from “组件路径（一般是这样…/…/）”

与methods同一级别添加components:{要使用的组件名：组件名} 这两个一般用es6语法直接写为组件民

（4）使用：直接在对应地方<组件名></组件名>

20.组件的声明周期

子组件：

（2）父组件给子组件传递数据

2.父组件中通过子组件$emit传递的名称来接受。使用@来接受。@子组件传递的名称=“写一个函数”

test2中：

如图：直接引用。

css

用到请求数据。首先把请求函数在onLoad中执行（项目初始化完成）。

通过接口中的status来判断是否请求成功，请求成功后将请求的数据赋值给data中的东西。当请求失败，使用uni.showToast来弹出一个窗口，来提示请求失败。样式大致为：一个黑色框中显示一个对号。
来源：快乐的二进制鸭