uniapp开发微信小程序
1、上拉加载 下拉刷新
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
配置允许下拉刷新：
{"path" : "pages/pet/pet","style" : {"navigationBarTitleText" : "",// 设置允许下拉刷新"enablePullDownRefresh": true,// 设置触底加载更多操作"onReachBottomDistance": 100,// 页面标题"navigationBarTitleText": "萌宠案例"}
}
下拉加载结束后，停止刷新
uni.stopPullDownRefresh()
2、设置加载更多
需要集成模块
<uni-load-more status="loading"></uni-load-more>
3、图片大图预览
current: 当前第几张， urls:图片地址
uni.previewImage({// 当前图片为第几张current: index,// 图片地址urls: petList.value.map(item => item.url)
})
4、一键回顶部
一键回顶部
uni.pageScrollTo({duration: 200,scrollTop: 0
})
5、获取用户头像
<button open-type="chooseAvatar" @chooseavatar="getUserAvatar">获取用户头像</button>// 获取用户头像
getUserAvatar(e) {this.avatarUrl = e.detail.avatarUrl
}
6、获取用户昵称
<input v-model="wechatNickname" placeholder- style="color:#A1AABF;" class="passInput" type="nickname":border="false" @change="getName" placeholder="获取微信昵称" :clearable="false" />getName(e) {this.wechatNickname = e.detail.value;
},
7、获取用户手机号
(测试号和企业账户可以直接获取,个人号无法使用)
<button open-type="getPhoneNumber" @getphonenumber="ongetphonenumber">一键获取手机号</button>async ongetphonenumber({detail}) {console.log('获取手机号')// 判断是否授权成功if (detail.iv) {let params = { }// 去后端请求获取真正的号码console.log(params)}
}
8、动态修改顶部导航文字
// 动态修改顶部导航
uni.setNavigationBarTitle({title: name
})
9、获取页面的url参数
import { onLoad } from '@dcloudio/uni-app'onLoad(options => {console.log(options)
})
10、不同平台下，使用不同的代码 #ifdef
在css和js和template中都可以进行使用
// #ifdef MP-TOUTIAOconsole.log('这里是抖音的逻辑')
// #endif// #ifndef MP-TOUTIAOconsole.log('这里是除了抖音以外的逻辑')
// #endnif
11、不同平台情况下，获取安全区域以及胶囊按钮高度
let SYSTEM_INFO = uni.getSystemInfoSync()
// 安全区域
export let getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 10// 胶囊按钮export let getTitleBarHeight = () => {if (uni.getMenuButtonBoundingClientRect) {let {top,height} = uni.getMenuButtonBoundingClientRect()return (top - getStatusBarHeight()) * 2 + height}return 50
}export const getNavBarHeight = () => {return getStatusBarHeight() + getTitleBarHeight()
}export const getIconLeft = () => {// #ifdef MP-TOUTIAOreturn tt.getCustomButtonBoundingClientRect().leftIcon.width// #endif// #ifndef MP-TOUTIAOreturn 0// #endif
}
12、开启朋友圈分享|分享给好友
需要在组件中实现两个方法onShareAppMessage, onShareTimeline
注意: 分享到朋友圈,未认证的账号无法使用,需要测试号或者认证后的账号
import {onShareAppMessage,onShareTimeline
} from '@dcloudio/uni-app'// 分享给朋友
onShareAppMessage(e => {return {title: '~咸虾米壁纸~'}
})// 朋友圈
onShareTimeline(() => {return {title: '~咸虾米壁纸~',imageUrl: '/static/xxmLogo.png'}
})
13、设置通屏
在pages.json中设置页面的navigationStyle属性为custom
{"path": "pages/index/index","style": {"navigationBarTitleText": "推荐","navigationStyle": "custom"}
},
14、图片保存到本地
// #ifdef H5
uni.showModal({content: '请长按图片进行保存',showCancel: false
})
// #endif// #ifndef H5
let filePath = 'https://cdn.qingnian8.com/public/xxmBizhi/20240914/1726307754431_8.jpg'
uni.getImageInfo({src: filePath,success: (res) => {uni.saveImageToPhotosAlbum({filePath: res.path,success: () => {uni.showToast({title: '保存成功',icon: 'none'})}})}
})
// #endif
15、request请求工具类
const baseURL = 'https://tea.qingnian8.com'const httpInterceptor = {invoke(options) {let token = uni.getStorageSync('token')options.header = {['access-key']: '488957',Authorization: token,...options.header}options.header['acess-key'] = '488957'options.timeout = 10 * 1000options.url = baseURL + options.urlconsole.log(options)}
}// 请求拦截器
uni.addInterceptor('request', httpInterceptor)const request = (options) => {// uni.showLoading({// mask: true,// title: "数据加载中...",// });uni.showNavigationBarLoading()return new Promise((resolve, reject) => {uni.request({...options,// 响应拦截器success(res) {// 获取当前页面的栈const pages = getCurrentPages();console.log(pages, '==============')// 获取当前页面const currentPage = pages[pages.length - 1];// 获取当前页面的路由const currentRoute = currentPage.route;// 定义401不需要登录的路由数组const routes = ["pages/index/index"]if (res.statusCode === 200) {if (res.data.errCode == 0) {resolve(res.data);} else if (res.data.errCode === 401 && !routes.includes(currentRoute)) {uni.showModal({title: "温馨提示",content: "您还没有登录，是否去登录",success(res) {if (res.confirm) {uni.navigateTo({url: "/pages/login/login",});} else {uni.navigateBack({delta: 1,});}},});} else if (res.data.errCode === 400) {uni.showToast({title: res.data.errMsg,icon: 'none'})} else {resolve(res.data);}} else {reject(res.data);}},// 响应失败fail(err) {console.log(err)uni.showToast({icon: "none",title: "网络错误, 换个网络试试",});reject(err.errMsg);},complete() {uni.hideNavigationBarLoading()},});});
};export default request
)