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

小程序

news 2026/5/11 23:08:28

微信小程序

在 pages.json 设置 tabbar，globalStyle（参考全局文件）
配置网络请求。（安装@escook/request-miniprogram 第三方包）
发请求 uni.$http.get(地址)
分包 subpkg
封装 uni.$showMsg()方法
跳转 tabbar,uni.switchTab()

组件

swiper(轮播图)
navigator
scroll-view(滚动 view)
page-head(页头)
<page-head :title="title"></page-head>
u-link
picker(选择器)

接口及效果

uni.setNavigationBarTitle({})设置标题栏文字
uni.setNavigationBarColor({})改变标题栏颜色

<template><view><view ><page-head :title='title'></page-head><button type="warn" @click='setText'>改变标题栏文字</button><button type="primary" @click='setColor'>改变标题栏颜色</button></view></view>
</template><script>export default {data() {return {flag:false,title:'便宜房子'};},methods:{setText(){this.flag=!this.flaguni.setNavigationBarTitle({title:this.flag?'便宜房子':'心仪的房子'})},setColor(){this.flag=!this.flaguni.setNavigationBarColor({frontColor:this.flag ? "#000000" : "#ffffff",backgroundColor:this.flag?"#F8F8F8":"#007AFF"})}}}
</script>

uni.navigateTo({url:''})跳转新页面，并传递数据，onLoad(option){}的option 包含参数。用option.xxx获取
uni.redirectTo({url:''})关闭当前页面，跳转到xxx
uni.switchTab({url:''})跳转tabbar
uni.reLaunch({url:''})关闭所有页面，跳转到xxx
uni.navigateBack 可以返回到原页面。

<template><view><page-head :title="title"></page-head><button @tap="navigateTo">跳转新页面，并传递数据</button><button @tap="redirectTo">在当前页面打开</button><button @tap="switchTab">切换到模板选项卡</button><button @tap="reLaunch">关闭所有页面，打开首页</button></view>
</template><script>export default {data() {return {flag: false,title: 'hello'};},methods: {navigateTo() {uni.navigateTo({url: '/pages/newpage/newpage?data=Hello',fail: function(err) {console.log(err, 'err')}})},redirectTo() {uni.redirectTo({url: '/pages/newpage/newpage'})},switchTab() {uni.switchTab({url: '/pages/tabbar/template/template'});},reLaunch() {uni.reLaunch({url: '/pages/tabbar/component/component'})}},}
</script>

uni.uploadFile({})上传文件，先选择uni.chooseImage
uni.downloadFile({})下载文件

<template><view><button type="primary" @click='chooseImage'>上传文件</button><image :src="src" mode=""></image></view>
</template><script>export default {data() {return {src: ''}},methods: {chooseImage() {uni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album'],success: (res) => {console.log('chooseImage success, temp path is', res.tempFilePaths[0])var imageSrc = res.tempFilePaths[0]uni.uploadFile({url: 'https://unidemo.dcloud.net.cn/upload',filePath: imageSrc,fileType: 'image',name: 'data',success: (res) => {console.log('uploadImage success, res is:', res)uni.showToast({title: '上传成功',icon: 'success',duration: 1000})this.src = imageSrc},fail: (err) => {console.log('uploadImage fail', err);uni.showModal({content: err.errMsg,showCancel: false});}});}})}}}
</script>