1. 自定义组件命名：驼峰法。例如：keChengXingqing

2. 微信小程序：设置-安全设置-服务器端口要打开

3. scss：

内边框：（外边框会导致页面超出屏幕）box-sizing: border-box;

宽度：（全屏）width: 750rpx;

下边三个常一起用：

a. 弹性布局：display: flex;

b. 水平居中（与弹性布局常一起使用，呈现下图效果）：justify-content: center

c. 居中对齐弹性盒的各项 元素：align-items: center;

平均分布：flex：1

强制元素不换行（一般给父级元素加）：white-space: nowrap;

4. swiper（banner图常用）

常用属性：indicator-dots:是否轮播； autoplay：自动播放； interval：间隔时间； duration：动画执行周期； indicator-dots 轮播图下的点

swiper下的每一个swiper-item都是一个滑块

v-for循环输出bannner图。

5. image 本身自带默认宽高，使用时一般需要设置。

<image mode="aspectFit"></image>：保持纵横比缩放图片，可以将图片完整显示出来

6. （1）tabBar（原生）

通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页，在 pages.json 中提供 tabBar 配置。

tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

对应页面："pagePath": "pages/tabbar/classly/classly",

图标：

a. "iconPath": "static/image/fenlei.png",

选中后图标："selectedIconPath": "static/image/fenleion.png",

文字："text": "分类"

b. iconfont优先级大于iconPath

与iconfont配合使用。

iconfontSrc:将下载下来的图标库，引入文件

text：图标（字库 Unicode 码，在iconfont中复制{在iconfont中将加入购物车的图标添加进项目中即可看到}）

&#xe669; 将码变为\ue669 &#x去掉后加\u

selectedText：选中后的图标（选中后字库 Unicode 码）

color：颜色

selectedcolor：选中后的颜色

（2）uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

uni.setTabBarStyle(OBJECT)

动态设置 tabBar 的整体样式

uni.hideTabBar(OBJECT)

隐藏 tabBar

uni.showTabBar(OBJECT)

显示 tabBar

uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。

uni.removeTabBarBadge

移除 tabBar 某一项右上角的文本。

uni.showTabBarRedDot(OBJECT)

显示 tabBar 某一项的右上角的红点。

uni.hideTabBarRedDot(OBJECT)

隐藏 tabBar 某一项的右上角的红点。

uni.onTabBarMidButtonTap(CALLBACK)

监听中间按钮的点击事件

Tip

• tabbar是原生的，层级高于前端元素

• uni-app插件市场有封装的前端tabbar，但性能不如原生tabbar

• 如果想要一个中间带+号的tabbar，在HBuilderX中新建uni-app项目、选择 底部选项卡 模板

• 以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用，避免在 tabbar 未初始化前使用

7. 页面跳转

a. navigator

页面跳转。只能跳转本地页面。目标页面必须在pages.json中注册。

注意：只能跳转非tabBar页面

如需跳转页面则可设置属性：open-type="reLaunch"。

注意：reLaunch可携带参数，如果跳转页面为tabBar页面，则不可携带参数。

<script>
export default{
	onLoad:function(option){  //option为object类型，会序列化上个页面传递的参数
		console.log(option.id);  //打印出上个页面传递的参数。
		console.log(option.name);  //打印出上个页面传递的参数。
	}}
</script>

b. uni.navigateTo （API）

success注意要用箭头函数。

注意：

• 页面跳转路径有层级限制，不能无限制跳转新页面

• 跳转到 tabBar 页面只能使用 switchTab 跳转

• 路由API的目标页面必须是在pages.json里注册的vue页面。

uni.switchTab

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

8. data必须为函数类型，return中可以返回：数组，字符串，对象，数字，布尔值等。

export default {

data() {

return {

topBanner:[],

index_banner:{},

}

}

}

9. v-if ，v-else-if ，v-else 必须紧挨着写。

v-else后面不用加判断。

v-show与v-if区别：

v-if判断为false的内容在页面与代码都不显示

v-show判断为false的内容在页面不显示，代码中显示，只是以css形式添加了display=“none”

用法：<v-if="判断"><v-else>；

用法：<v-show="判断"><v-show="！判断">；

10. v-for

a. 循环输出数组：

item:作为每个元素；

index:其下标（0 1 2 3 4 ..........）；

topbanner:哪个数组的名字；

key：作为每一个元素的索引（唯一标识符）

v-for="(item,index) in teaList" :key="index"

例如：循环输出轮播图数组中的图片

b. 循环输出对象：

value:值；

index:其下标（0 1 2 3 4 ..........）；

name:名称；

obj：对象名字（自定义）；

key：作为每一个元素的索引（唯一标识符）

v-for="(value,name,index) in obj" :key="index"

{ {index}}-{name}}-{ {value}}

11. v-html 可以渲染html标签。

小程序不支持直接写html标签

使用方法：v-html="code" （code是带html标签的变量，例return中：code=“<h1>我是内容</h1>”）

12. v-bind：动态绑定标签属性。简写为 ：

13. v-on：事件指令。简写为 @

用法a：v-on:click="触发的点击事件名称，自定义abc"

用法b：@click="触发的点击事件名称，自定义abc"

methods：{

abc（）{

}

}

14. 标签内写动态style时，冒号后边的内容要加单引号

:style="'color: black;"

15. let color（自定义）="#"+String（Mach.random()）.substr(3,6);

//自定义颜色名称=随机random（）,substr(3,6)第三位开始，截取六位随机数，String类型才可截取。此方法截取的颜色都偏暗，因为没有abcdef。

16. 动态绑定class类。myactive：自定义类名； state：判断true false

a. ：class=“{myactive：state}”

b. ：class=“state？‘myactive’：‘’”

为真执行myactive，为假执行空‘’或者其他，看情况而定

17. 表单：form

a. 表单提交

@submit

携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId。

@reset

表单重置时会触发 reset 事件

e中为表单中传过来的值。

b. radio-group

单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。

c. picker

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

属性：range。 mode为 selector 或 multiSelector 时，range 有效

value。 value 的值表示选择了 range 中的第几个（下标从 0 开始）

@change value 改变时触发 change 事件

普通选择器

mode = selector

多列选择器

mode = multiSelector

时间选择器

mode = time

日期选择器

mode = date

省市区选择器

mode = region

18. input标签

@input 当键盘输入时，触发input事件

18. easycom自动导入自定义组件。

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目根目录或uni_modules的components目录下，并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。（不用再向下列传统步骤引入）

第三步：模板应用组件

19. props与emit与data同级。

a. props

父组件传递数据，子组件通过props接收父组件传过来的数据。

父组件传给子组件的值，不允许修改（单向下行绑定），如果要修改父的值，需要子组件将获得的值传给父组件，然后在父组件进行修改。

父组件：

子组件：注明接收到的数据类型 type

数组一定要定义function函数

b. emit

子组件一般不处理数据，所以当子组件拿到数据时，将数据传回父组件。

弹窗用子传父很重要。

（1）子组件myevent在方法中拿到值后：

this.$emit(“自定义事件名”，需要传给父组件的值)

例：this.$emit(“myenv”，123123123)

也可传对象和时间戳等等

（2）父接收值

第一种方法：

引入子组件并接收值

<myevent @myenv="onmyenv"></myevent>

触发子组件myenv事件，onmyenv是在组件内自定义的方法名。

第二种方法：

详见sync修饰符的使用。

20. 修饰符

.native

以上19知识点为例，在父组件中引入子组件，可以直接调用自定义事件，但不可直接引入原生事件。

想要在一个组件的根元素上直接监听一个原生事件。可以使用 @事件的 .native 修饰符：

.synv（响应式）

当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。

注意：$emit中的update必须写。

21.生命周期函数

执行顺序：creatde onLaunth onshow mounted （小程序用onLoad）

注意：如果页面需要传参，就必须用onLoad

uni.navigateBack与vueroute类似

返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

22.交互反馈

uni.showToast(OBJECT)

显示消息提示框。

uni.hideToast()

隐藏消息提示框。

uni.showLoading

显示 loading 提示框。

uni.hideLoading()

隐藏 loading 提示框。

uni.showModal

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

uni.showActionSheet

从底部向上弹出操作菜单

23. 设置导航条（当前页面设置）

uni.setNavigationBarTitle

动态设置当前页面的标题。

uni.setNavigationBarColor

文字颜色只能是白色和黑色#ffffff和#000000

设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖

uni.showNavigationBarLoading

在当前页面显示导航条加载动画。

ni.hideNavigationBarLoading

在当前页面隐藏导航条加载动画。

24. 网络请求 API接口与获取数据

uni.request 向服务器发送请求（通过端口）

success 接收服务器返回的数据（注意要用箭头函数）

return 获取返回数据类型（必须）

为了方便，可以写到方法中，这样可以被多次调用。

请求接口等待时间长时，可以加入uni.showloading，请求返回数据后隐藏（uni.hideloading）

例子：

两种带参数变量的方法，第二种是ES6写法

25. 数据缓存

异步接口：

uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口

uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

uni.getStorageInfo(OBJECT)

异步获取当前 storage 的相关信息。

uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

uni.clearStorage()

清理本地数据缓存。

同步接口：

** uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

** uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

存，取

uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。

** uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

uni.clearStorageSync()

同步清理本地数据缓存。