1.如何引入全局样式，或者单独引入样式
1.1单独引入样式
//在该页面的style中单独引入
<style>
@import url("./a.css");
</style>
1.2全局引入
//在app.vue中引入
<style>
@import url("./static/css/iconfont.css");
/*每个页面公共css */
/* 在这里定义的样式,全局都能生效 */
</style>
2.设置页面底部的tabber
2.1.在pages.json中增加tabbar
"tabBar":{
//这是设置默认的颜色
"color":"#ff1030",
//这是选中时候的颜色
"selectedColor":"#F0AD4E",
//这是list的列表，里面设置每个页面
"list":[
{ //页面的名字
"text":"首页",
//页面的路径
"pagePath":"pages/index/index",
//页面未选中时候的图片
"iconPath":"static/tabs/home.png",
//页面选中时候的图片
"selectedIconPath":"static/tabs/home-active.png"
},
{
"text":"信息",
"pagePath":"pages/messages/messages",
"iconPath":"static/tabs/message.png",
"selectedIconPath":"static/tabs/message-active.png"
},
{
"text":"聊天",
"pagePath":"pages/news/news",
"iconPath":"static/tabs/contact.png",
"selectedIconPath":"static/tabs/contact-active.png"
}
]
},
3.在pages里面设置一系列的信息
{
"path" : "pages/messages/messages",
"style" :
{
//头部信息
"navigationBarTitleText": "信息页面",
//开启下拉刷新
"enablePullDownRefresh": true,
//头部的背景颜色
"navigationBarBackgroundColor":"#007AFF",
//为h5页面设置的下拉颜色
"h5":{
"pullToRefresh":{
"color":"#4CD964"
}
}
}
}
4.开启下拉刷新的方法
//1.onPullDownRefresh开启下拉刷新
onPullDownRefresh() {
console.log('触发了下拉');
setTimeout(()=> {
this.list.push('666')
//停止刷新
uni.stopPullDownRefresh()
},500)
},
//2.在pages里面用"enablePullDownRefresh": true开启下拉刷新
//3.通过定义方法的点击事件 methods
<button @click="refresh">刷新</button>
refresh() {
uni.startPullDownRefresh()
}
5.触底请求数据
onReachBottom() {
console.log('触底了');
this.list = [...this.list,...['前端','后端','ui','测试','前端']]
},
6.uniapp请求数据的办法
<button @click="getLunbo">获取轮播图</button>
getLunbo() {
uni.request({
url: "http://localhost:8082/api/getlunbo",
success (res) {
console.log(res);
}
})
},
7.存储以及获取、移除数据到Storage中
setSrorage() {
// uni.setStorage({
// key: 'id',
// data: 66,
// success() {
// console.log('存储成功');
// }
// })
uni.setStorageSync('id',1000)
},
getInfo() {
// uni.getStorage({
// key: "id",
// success(res) {
// console.log(res.data);
// }
// })
const res = uni.getStorageSync('id')
console.log(res);
}
claer() {
// uni.removeStorage({
// key: 'storage_key',
// success(res) {
// console.log('success');
// }
// });
uni.removeStorageSync('storage_key');
}
8.条件编译跨段兼容详讲
**写法：**以 #ifdef 或
#ifndef 加 %PLATFORM% 开头，以
#endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称
8.1写法示例
#ifdef APP-PLUS
需条件编译的代码
#endif
//仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif
//除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif
//在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）
8.2**%PLATFORM%** 可取值如下：
#APP-PLUS App
#APP-PLUS-NVUE或APP-NVUE App nvue
#H5 H5
#MP-WEIXIN 微信小程序
#MP-ALIPAY 支付宝小程序
#MP-BAIDU 百度小程序
#MP-TOUTIAO 字节跳动小程序
#MP-LARK 飞书小程序
#MP-QQ QQ小程序
#MP-KUAISHOU 快手小程序
#MP-JD 京东小程序
#MP-360 360小程序
#MP 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
#QUICKAPP-WEBVIEW 快应用通用(包含联盟、华为)
#QUICKAPP-WEBVIEW-UNION 快应用联盟
#QUICKAPP-WEBVIEW-HUAWEI 快应用华为
8.3写法示例
<!-- #ifdef H5 -->
<view>我只要在H5里面看见</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>我只要在小程序看见</view>
<!-- #endif -->
提供