【微信小程序】uniapp开发微信小程序

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