当前位置：首页 > news >正文

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

news 来源：原创 2025/6/19 12:15:00

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-TOUTIAO
   console.log('这里是抖音的逻辑')
// #endif


// #ifndef MP-TOUTIAO
   console.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-TOUTIAO
	return tt.getCustomButtonBoundingClientRect().leftIcon.width
	//  #endif

	// #ifndef MP-TOUTIAO
	return 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 * 1000
		options.url = baseURL + options.url
		console.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