目录
5、v-on：(可省略为@)事件绑定和绑定style(即:style)案例：每次点击，随机出现颜色的变换。
7、绑定class(即:class)的案例：点击导航栏中的某个导航有高亮效果。
9、父向子传值，props来接收父组件传过来的值，父组件动态赋值。
②props中的type和default的使用：传不同类型默认的格式
10、子向父传值，emit。子组件通过自定义事件来向父组件传值，父组件来引入这个事件，再接收事件传送过来的值。
13、onLoad和vueroute的传参(获取参数)的差异
1、tabBar之小程序不支持iconfont，小程序支持iconPath。
2、uni-app的API中请求数据request，data属性为参数。
3、uni-app中methods中的方法，要在onLoad中调用才成效。
②常用uni.setStorageSync('storage_key', 'hello')设置数据缓存到本地
③uni.getStorageSync("key")获取缓存数据
⑤常用uni.removeStorageSync('storage_key')清除一个。
⑤浏览历史时，用onShow，不用onLoad(第一次...)，每次最新看的会在最上面
一、uni-app简单介绍
uni-app中的页面组件与小程序中的类似。
1、uni-app工程：一个uni-app工程就是一个vue项目。
2、vue文件：一个vue文件就是一个页面。
3、vue2文件<template>内的书写规则：vue2文件中的<template></template>中间必须有唯一一个盒子(<div>或者<view>)，即唯一一个根标签(<div>或者<view>)。
4、uni-app使用工具：HBuilder。
5、HBuilder预览方法：
HBuilder中想要预览：①浏览器预览；②小程序预览。
HBuilder中想要运行小程序预览：需要先配置路径，然后打开微信开发者工具->设置->安全设置中把服务端口号打开，才能在HBuilder中运行小程序预览。
6、scss(加强版css)：
scss(加强版css)：可以在样式内部继续写样式如下：
7、h5标签与组件：
在uni-app的vue文件中，只有h5页面可使用html标签，效果会显示；但是其他，例如小程序页面是不可以使用html标签的，效果不会显示，所以要采用组件来代替h5标签。
8、page.json(配置文件-页面配置和全局配置)---包括导航栏样式
页面配置比全面配置权限更高。
9、rpx(响应式单位)
手机宽：750rpx
二、uni-app中的vue
uni-app中的vue与vue类似。
1、vue和js的差异化：
2、data属性
注意：return返回的是对象，vue2要用的时候对象.属性或者this.属性。如下：
3、v-bind：(可省略为：) 动态绑定属性
4、vue中写函数时，普通情况的函数写法与es6函数的写法
5、v-on：(可省略为@)事件绑定和绑定style(即:style)案例：每次点击，随机出现颜色的变换。
6、绑定class(即:class)的案例：点击把该样式变成另一个样式(自定义类名中的样式)
data中state：false
methods中
style中自定义类名写想要变成的样式
两种方法：
7、绑定class(即:class)的案例：点击导航栏中的某个导航有高亮效果。
3.8.小案例点击导航高亮显示_哔哩哔哩_bilibili 参考讲解
8、uni-app自定义组件与传统vue2自定义组件：
传统vue2自定义组件：
<!-- 在index.vue引入 uni-badge(自定义组件) 组件-->
<template>
<view>
// 3.使用组件
<uni-badge text="1"></uni-badge>
</view>
</template>
<script>
//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
import uniBadge from '@/components/uni-badge/uni-badge.vue';
export default {
//2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
components:{uniBadge }
}
</script>uni-app自定义组件：
通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用自定义组件。
<uni-badge text="1"></uni-badge>//直接使用组件(自定义组件)9、父向子传值，props来接收父组件传过来的值，父组件动态赋值。
props 可以是数组或对象，用于接收来自父组件的数据。
①props使用方法：
子组件：
父组件：
通过 v-bind 动态赋值
②props中的type和default的使用：传不同类型默认的格式
10、子向父传值，emit。子组件通过自定义事件来向父组件传值，父组件来引入这个事件，再接收事件传送过来的值。
11、native，在自定义组件中想要用原生事件，加native修饰符才可以。
12、生命周期函数
13、onLoad和vueroute的传参(获取参数)的差异
①vue的route路由获取参数：this.$route.query.参数名，但是不适用于小程序。
②用onLoad生命周期函数获取参数，既适用于h5又适用于小程序。
vue中可通过getCurrentPages()获取当前的页面栈(啥东西都有)，决定需要返回几层。
三、uni-app的API之界面
1、tabBar之小程序不支持iconfont，小程序支持iconPath。
2、uni-app的API中请求数据request，data属性为参数。
3、uni-app中methods中的方法，要在onLoad中调用才成效。
4、请求数据时的url：接口地址的写法
5、数据缓存Storage
sync同步，没有异步，常用sync的。
①uni.setStorage，异步。
②常用uni.setStorageSync('storage_key', 'hello')设置数据缓存到本地
③uni.getStorageSync("key")获取缓存数据
注意：set、get缓存数据时，要一致：同步都同步，异步都异步。
④原生与uni-app中数据缓存的存储格式的差异：
⑤常用uni.removeStorageSync('storage_key')清除一个。
⑥少用uni.clearStorage()全部清除。
6、打包
6.2.配置发行H5_微信小程序_apk应用打包_哔哩哔哩_bilibili
四、新闻案例：
1、导航栏
①让其在一行，不换行显示。
white-space：nowrap；//父
②uni-app取消横向滚动条（搜百度）//父
2.新闻块
图片mode：aspectFill；//自动适配
flex：1；//自动分配左右宽度
CSS两行省略号：(百度)，如下：
3、uni-app页面的生命周期包含：
| onPullDownRefresh | 监听用户下拉动作，一般用于下拉刷新，参考示例 | ||
| onReachBottom | 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项 |
4、加载新闻列表+切换导航时加载新闻列表的案例：
es6语法：原有数据基础上拼接新内容。[...原数组，...新数组]，其中...表示解构数组。
5、没有数据时，显示没有数据的图片
6、数据加载中或没有更多了的提示。
函数遇到return，表示下面代码不会再执行了：
7、uni-app中组件之富文本<rich-text>显示内容
8、用正则来查找并替换详情页中图片的样式：
9、设置详情页中的导航条内容为标题内容
10、数据缓存 浏览历史
①设置数据缓存
②获取数据缓存(浏览记录)
③浏览历史的详情页也要能点进去看：传参
④浏览历史的去重：
⑤浏览历史时，用onShow，不用onLoad(第一次...)，每次最新看的会在最上面
⑥截取前十条数据：
11、打包(H5/小程序/App)
①打包统一步骤(H5/小程序/App)：
打包之前需要点击项目目录的manifest.json进行配置，进行各个的配置方式。
然后点击发行，点击各个的打包方式。
最后，打包完在项目目录中自动生成unpackage的目录：
②H5打包：
h5配置：
③小程序打包：
点击HBuilder中的小程序打包，需要一个小程序APPid(到小程序后台中找到小程序APPid，之后复制)，然后点击发行，跳转到开发小程序工具中，需要配置域名(到去小程序后台中找到配置域名，然后进行配置)，可以在开发小程序工具中看到域名显示出来了，把合法校验域名取消选择，最后点击上传，可以在小程序后台中的版本管理中看到上传的内容。
④App打包：
在HBuilder中点击发行，点击云打包
五、补充知识：
1、css样式，white-space：nowrap；//合并空白格，不换行。
2、css样式：flex弹性盒模型，两端对齐：
资源：
1、uView组件库，配套uni-app。
2、iconfont：图标库，还可以复制代码。
3、青年帮设计导航:(寻找资源)
4、ApiPost6：测试接口工具软件。
4、接口网址：
扫一扫
2232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
