近段时间以来，主要使用的uniapp开发小程序，app等，期间遇到很多问题和常用的小功能以及自定义组件，在此做一个记录，后续会陆续补充
一、遇到的问题
1、关于在ios手机上打开webview显示无法打开该页面的问题
代码如下：
<template>
<view class="common-page">
<view class="common-body">
<web-view :src="url"></web-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
url:'https://www.dcloud.io/'
}
},
onLoad(options){
this.url=options.url?decodeURIComponent(options.url):''
}
}
</script>
<style>
.common-page{
background: #fff;
}
</style>发现在安卓手机上并没有任何问题，但是ios就是不行，最后去掉了默认url的地址，发现可以了，应该是加载页面时候先加载了默认地址，但是默认地址小程序后台未设置白名单，导致无法访问，所以发布的时间一定要去掉默认地址
2、关于使用scroll-view的scroll滚动事件拿到的值不准确和使用scroll-top绑定值恢复初始位置卡顿的问题
出现情况：在容器内快速滚动时候会拿不到正确的值，出现偏差，例我获取元素距离父级顶部的高度对接滚动的高度，两者比较不一致，因为scroll时间默认做了节流，在合适的范围内，去掉节流，滚动太远会占用内存，在scroll-view标签上加上:throttle="false"即刻拿到正确的值，下面的代码可以作为在页面滚动时候，tab浮动到顶部，同时列表占用剩余位置进行滚动
<template>
<view>
//...这里是固定在头部的容器
<scroll-view scroll-y="true" class="scroll_body" @scroll="scrolls" :throttle="false">
<up-sticky offset-top="0" :bgColor="'#F7F8FA'" >
<view class="tab_warp" id="cate_tab">
<up-tabs
:list="cateList"
@click="tabChange"
lineColor="linear-gradient( 90deg, #FFA38F 0%, #F9EBE8 100%)"
:activeStyle="{
color: '#000',
fontWeight: 'bold',
transform: 'scale(1.05)',
}"
:inactiveStyle="{
color: '#000',
transform: 'scale(1)',
}"
itemStyle="padding:0 15px; height: 34px;fontSize:28rpx"
></up-tabs>
</view>
<view style="{height:nowHeight}">
<scroll-view :scroll-y="isScroll" class="scroll-Y" @scrolltolower="lower" @scroll="scroll" :scroll-top="scrollTop">
//这里放的是我的列表数据
</scroll-view>
</view>
</up-sticky>
</scroll-view>
</view>
</template>
<script>
data(){
return{
tabTop:0,
isScroll:false,
nowHeight:'auto',
scrollTop:0,
oldScrollTop:0,
pageList:[],
cate_id:'',
pageForm:{
page:1,
limit:10
},
}
}
onLoad(){
//这里是获取元素外层元素距离顶部的距离和tab距离顶部的距离
this.$nextTick(()=>{
const query = uni.createSelectorQuery()
query.in(this).select('.scroll_body').boundingClientRect()
query.in(this).select('#cate_tab').boundingClientRect()
query.exec(res => {
this.tabTop= res[1].top-res[0].top
this.nowHeight=this.listHeight+'px'
})
})
},
methods:{
//外层容器滚动
scrolls(e){
this.$nextTick(()=>{
if(e.detail.scrollTop>=this.tabTop){
this.isScroll=true
}else{
this.isScroll=false
}
})
},
//这里存储列表滚动容器滚动的高度，如果存在tab切换，需要将滚动恢复到顶部，如果直接将绑定的scrollTop赋值，滚动会有卡顿问题，所以这里单独存滚动的值
scroll(e) {
this.oldScrollTop= e.detail.scrollTop
},
//滚动到底部，触底加载
lower(){
},
//tab切换
tabChange(e){
this.cate_id=e.id
this.pageForm.page=1
this.scrollTop=this.oldScrollTop
//this.pageList=[]
this.$nextTick(function() {
this.scrollTop = 0
});
///this.status='loadmore'
//this.getPageList()
},
}
</script>二、 日常的小功能
1、打开其他的微信小程序
uni.navigateToMiniProgram({
appId:'',//目标小程序appid
path:'',//需要打开的目标路径
extraData: {
'data1': 'test'
},
envVersion:'release',//小程序版本：develop（开发版），trial（体验版），release（正式版）
success(res) {
// 打开成功
}
})三、自定义组件
1、自定义封装的顶部导航栏
<template>
<view class="prohibition" :class="isFix?'prohibition-fix':''" :style="{background:bgColor}">
<view :style="[{height},{paddingTop:paddingTop}]" class="warp">
<view class="demo" :style="{paddingBottom:'10rpx'}">
<!-- 左侧 -->
<view class="returnback" >
<image src="@/static/images/backIcon.png" mode="scaleToFill" class="left-icon" v-if="isBack" @click="back"></image>
</view>
<!-- 中间标题文字 -->
<view class="title" v-if="type==0">
<text>{{title}}</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'head',
data() {
return {
height: 0,
paddingTop: 0,
}
},
props: {
//标题
title:{
type: String,
default:''
},
//类型 ，可自定义增加
type:{
type: Number,
default:0
},
//背景颜色，默认透明
bgColor:{
type: String,
default:'transparent'
},
//是否存在返回按钮
isBack:{
type: Boolean,
default:false
},
//是否采用固定定位
isFix:{
type: Boolean,
default:false
}
},
created() {
// #ifdef MP
const demo = uni.getMenuButtonBoundingClientRect()
this.height = (demo.height+5) + "px"
this.paddingTop = demo.top + "px"
// #endif
// #ifdef H5
this.height = "64rpx"
this.paddingTop = "10rpx"
// #endif
},
methods: {
back(){
var pages = getCurrentPages();
// 有上一个页面则返回上一个页面，或则调转到首页
if(pages && pages.length>1){
uni.navigateBack()
}else{
uni.switchTab({
url:'/pages/home/index'
})
}
}
}
}
</script>
<style lang="less" scoped>
.prohibition{
position: relative;
top: 0;
z-index: 11;
width: 100%;
}
.prohibition-fix{
position: fixed;
}
.warp{
box-sizing: content-box;
}
image{
vertical-align: middle;
}
.demo {
position: relative;
//注意，建议使用相对定位，因为固定定位会脱离文档流，然后你还要去设置marginTop值
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
padding-bottom: 10rpx;
height: 100% ;
box-sizing: border-box;
margin: 0 32rpx;
.returnback{
position: absolute;
left: 0;
display: flex;
align-items: center;
.left-icon{
width: 20rpx;
height: 34rpx;
}
}
.title {
display: flex;
justify-content: center;
width: 100%;
font-size: 32rpx;
color: #000;
letter-spacing: 10rpx;
}
}
</style>
2、下载保存图片到相册以及权限验证
// 保存图片
saveImage () {
//这里的type的值 1=本地资源，例本地上传的和生成canvas海报图片地址 2=网络资源
//shareImgUrl 为图片地址
if(this.type==2){
uni.downloadFile({
url: this.shareImgUrl,
success: function (res) {
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success: () => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
}
})
}else{
uni.saveImageToPhotosAlbum({
filePath:this.shareImgUrl,
success: () => {
uni.showToast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
uni.showToast({
title: '保存失败',
icon: 'none'
});
}
});
}
},
//授权提示弹窗
showAuthFailModal() {
uni.showModal({
title: '授权失败',
content: '请前往设置页手动授权该权限',
showCancel: false,
confirmText: '去设置',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: () => {
// 设置页打开成功后的操作
uni.hideLoading();
this.saveImage();
},
fail:()=>{
uni.showToast({ title: '授权失败', icon: 'none'});
}
});
}
}
});
},
upload () {
// 先检查是否已经获取了授权
uni.getSetting({
success: (res) => {
if (!res.authSetting[`scope.writePhotosAlbum`]) {
// 如果没有授权，则请求授权
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
// 在授权成功后执行保存图片的操作
this.saveImage();
},
fail: () => {
// 授权失败，提示用户去设置页授权
this.showAuthFailModal();
}
});
} else {
// 已经授权，直接保存图片
this.saveImage();
}
}
});
},还有很多还未写上，后续空了会陆续加上
以上有不足之处，恳请各位大佬批评指正，谢谢！！！
扫一扫
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
