自定义组件命名:驼峰法。例如:keChengXingqing
微信小程序:设置-安全设置-服务器端口要打开
scss:
内边框:(外边框会导致页面超出屏幕)box-sizing: border-box;
宽度:(全屏)width: 750rpx;
下边三个常一起用:
a. 弹性布局:display: flex;
b. 水平居中(与弹性布局常一起使用,呈现下图效果):justify-content: center
![](https://i-blog.csdnimg.cn/blog_migrate/7a82253023751491e4edf8ee59f5230a.png)
c. 居中对齐弹性盒的各项 元素:align-items: center;
平均分布:flex:1
强制元素不换行(一般给父级元素加):white-space: nowrap;
swiper(banner图常用)
常用属性:indicator-dots:是否轮播; autoplay:自动播放; interval:间隔时间; duration:动画执行周期; indicator-dots 轮播图下的点
swiper下的每一个swiper-item都是一个滑块
v-for循环输出bannner图。
![](https://i-blog.csdnimg.cn/blog_migrate/54204f6d54d00d4f8233a1528328a9f5.png)
image 本身自带默认宽高,使用时一般需要设置。
<image mode="aspectFit"></image>:保持纵横比缩放图片,可以将图片完整显示出来
(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": "分类"
![](https://i-blog.csdnimg.cn/blog_migrate/b9a5f090de668b0237eb27f56c3ed6c4.png)
b. iconfont优先级大于iconPath
与iconfont配合使用。
iconfontSrc:将下载下来的图标库,引入文件
text:图标(字库 Unicode 码,在iconfont中复制{在iconfont中将加入购物车的图标添加进项目中即可看到})
![](https://i-blog.csdnimg.cn/blog_migrate/ab6655fc4929b47b3577ad6ca5e0bcb0.png)
 将码变为\ue669 &#x去掉后加\u
selectedText:选中后的图标(选中后字库 Unicode 码)
color:颜色
selectedcolor:选中后的颜色
![](https://i-blog.csdnimg.cn/blog_migrate/9765f43957352623d3956c82e2cc7f1e.png)
(2)uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容
uni.setTabBarStyle(OBJECT)
动态设置 tabBar 的整体样式
uni.hideTabBar(OBJECT)
隐藏 tabBar
uni.showTabBar(OBJECT)
显示 tabBar
uni.setTabBarBadge(OBJECT)
为 tabBar 某一项的右上角添加文本。
![](https://i-blog.csdnimg.cn/blog_migrate/f8878d07dde0203aab1081d391fc5679.png)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/485011b2ca08cfacd926e1316e324dd6.png)
b. uni.navigateTo (API)
![](https://i-blog.csdnimg.cn/blog_migrate/6f6fdef20d501e30cc8a48cffdfeaa13.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1fc54a7ffb5c9ca9968ec4d5e0c4afcd.png)
success注意要用箭头函数。
![](https://i-blog.csdnimg.cn/blog_migrate/4294f642799af55d374f6c1a2bc34912.png)
注意:
页面跳转路径有层级限制,不能无限制跳转新页面
跳转到 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"
例如:循环输出轮播图数组中的图片
![](https://i-blog.csdnimg.cn/blog_migrate/21d12978510ede554f0d4a73421d0ac6.png)
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 事件
![](https://i-blog.csdnimg.cn/blog_migrate/45792d2424b825c20ecd755aad8d48ca.png)
![](https://i-blog.csdnimg.cn/blog_migrate/498a926d9a7533e7ee642774fcc8aa6a.png)
e中为表单中传过来的值。
b. radio-group
单项选择器,内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。
c. picker
从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
属性:range。 mode为 selector 或 multiSelector 时,range 有效
value。 value 的值表示选择了 range 中的第几个(下标从 0 开始)
@change value 改变时触发 change 事件
![](https://i-blog.csdnimg.cn/blog_migrate/45242223b8df1058cca8f7277fc7a6d3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/834c5649dbfbbf980215191166461322.png)
普通选择器
mode = selector
多列选择器
mode = multiSelector
时间选择器
mode = time
日期选择器
mode = date
省市区选择器
mode = region
18. input标签
@input 当键盘输入时,触发input事件
![](https://i-blog.csdnimg.cn/blog_migrate/1a0f1a1e71980edb9a698e993708ab6e.png)
18. easycom自动导入自定义组件。
![](https://i-blog.csdnimg.cn/blog_migrate/71e997caf57d5931089c6296a3f2027c.png)
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目根目录或uni_modules的components目录下,并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。(不用再向下列传统步骤引入)
![](https://i-blog.csdnimg.cn/blog_migrate/f33052fa87c0a32c58ff403e0c6226d4.png)
第三步:模板应用组件
19. props与emit与data同级。
a. props
父组件传递数据,子组件通过props接收父组件传过来的数据。
父组件传给子组件的值,不允许修改(单向下行绑定),如果要修改父的值,需要子组件将获得的值传给父组件,然后在父组件进行修改。
父组件:
![](https://i-blog.csdnimg.cn/blog_migrate/50c7391771f526ba84ba301f7d420030.png)
![](https://i-blog.csdnimg.cn/blog_migrate/a8ba5c393a48e985943b4766e3645ded.png)
子组件:注明接收到的数据类型 type
数组一定要定义function函数
![](https://i-blog.csdnimg.cn/blog_migrate/598d559a0f645ed1cd024e00d49ce9f8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/99f67f7d68f7a5557fb1a51e8f6d5bfd.png)
b. emit
子组件一般不处理数据,所以当子组件拿到数据时,将数据传回父组件。
弹窗用子传父很重要。
(1)子组件myevent在方法中拿到值后:
this.$emit(“自定义事件名”,需要传给父组件的值)
例:this.$emit(“myenv”,123123123)
![](https://i-blog.csdnimg.cn/blog_migrate/aee765cff9460babcaa10669f352b2c3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/449cd81c755c43ac03f9d8e6398d34d8.png)
也可传对象和时间戳等等
(2)父接收值
第一种方法:
引入子组件并接收值
<myevent @myenv="onmyenv"></myevent>
触发子组件myenv事件,onmyenv是在组件内自定义的方法名。
![](https://i-blog.csdnimg.cn/blog_migrate/fdd1f826ed07d1cfbcc28685b8446cee.png)
第二种方法:
详见sync修饰符的使用。
20. 修饰符
.native
以上19知识点为例,在父组件中引入子组件,可以直接调用自定义事件,但不可直接引入原生事件。
想要在一个组件的根元素上直接监听一个原生事件。可以使用 @事件的 .native 修饰符:
![](https://i-blog.csdnimg.cn/blog_migrate/248fe065f3b4f30355af5eefa225c65d.png)
.synv(响应式)
当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。
注意:$emit中的update必须写。
![](https://i-blog.csdnimg.cn/blog_migrate/f411c36a03fe0de4f8a436adeeb105c7.png)
21.生命周期函数
![](https://i-blog.csdnimg.cn/blog_migrate/38418d0b72db9f46449c93fad84c3d16.png)
执行顺序:creatde onLaunth onshow mounted (小程序用onLoad)
注意:如果页面需要传参,就必须用onLoad
uni.navigateBack与vueroute类似
返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
![](https://i-blog.csdnimg.cn/blog_migrate/891c98f4f78d08ec537f964fab92781c.png)
22.交互反馈
uni.showToast(OBJECT)
显示消息提示框。
![](https://i-blog.csdnimg.cn/blog_migrate/c1aeef2da99587ccaa20de14b6dbd37f.png)
![](https://i-blog.csdnimg.cn/blog_migrate/367f648898472fa79c1de51638ddca74.png)
uni.hideToast()
隐藏消息提示框。
uni.showLoading
显示 loading 提示框。
uni.hideLoading()
隐藏 loading 提示框。
uni.showModal
显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm。
![](https://i-blog.csdnimg.cn/blog_migrate/b7259bce09d8cecd996ae74bf2f8ed46.png)
uni.showActionSheet
从底部向上弹出操作菜单
![](https://i-blog.csdnimg.cn/blog_migrate/3aa466c83a29d3dcc84a643143555468.png)
![](https://i-blog.csdnimg.cn/blog_migrate/0128f88cba33c0865c395f45a7a72b19.png)
23. 设置导航条(当前页面设置)
uni.setNavigationBarTitle
动态设置当前页面的标题。
uni.setNavigationBarColor
文字颜色只能是白色和黑色#ffffff和#000000
设置页面导航条颜色。如果需要进入页面就设置颜色,请延迟执行,防止被框架内设置颜色逻辑覆盖
uni.showNavigationBarLoading
在当前页面显示导航条加载动画。
ni.hideNavigationBarLoading
在当前页面隐藏导航条加载动画。
24. 网络请求 API接口与获取数据
uni.request 向服务器发送请求(通过端口)
success 接收服务器返回的数据(注意要用箭头函数)
return 获取返回数据类型(必须)
![](https://i-blog.csdnimg.cn/blog_migrate/439cc15d5b1609bf60c6e0723a8d311e.png)
为了方便,可以写到方法中,这样可以被多次调用。
请求接口等待时间长时,可以加入uni.showloading,请求返回数据后隐藏(uni.hideloading)
![](https://i-blog.csdnimg.cn/blog_migrate/ffdb4552f63393e7e63cc381c19f2a2a.png)
例子:
![](https://i-blog.csdnimg.cn/blog_migrate/33648b07239fb425ab0f9d48559b6d50.png)
两种带参数变量的方法,第二种是ES6写法
![](https://i-blog.csdnimg.cn/blog_migrate/8ac266976546966a79657a8913163567.png)
25. 数据缓存
异步接口:
![](https://i-blog.csdnimg.cn/blog_migrate/44d2cf794fe87af4ae319a1522d3ead1.png)
uni.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口
uni.getStorage(OBJECT)
从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageInfo(OBJECT)
异步获取当前 storage 的相关信息。
uni.removeStorage(OBJECT)
从本地缓存中异步移除指定 key。
uni.clearStorage()
清理本地数据缓存。
同步接口:
![](https://i-blog.csdnimg.cn/blog_migrate/47f8ae46cca247dab77cc807546ed105.png)
** uni.setStorageSync(KEY,DATA)
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
** uni.getStorageSync(KEY)
从本地缓存中同步获取指定 key 对应的内容。
存,取
![](https://i-blog.csdnimg.cn/blog_migrate/eb5795988333f44dffb3e5c7c8d2b7fd.png)
uni.getStorageInfoSync()
同步获取当前 storage 的相关信息。
** uni.removeStorageSync(KEY)
从本地缓存中同步移除指定 key。
uni.clearStorageSync()
同步清理本地数据缓存。