uniapp常用代码

www.jswusn.com Other 2025-07-01 10:25:24 4次浏览

uniapp长图适应


<image mode="widthFix" :src="imageUrl" style="width:100%" />


当view或者text标签文本过长不能换行


<text style="width:60%;display:inline-block;white-space: pre-wrap; word-wrap: break-word;height: auto;">
这是一段很长的文本内容</text>


小程序页面传参过长报错


//当前页 url是要传递的参数
// 将对象转成JSON字符串 再编码
let item = encodeURIComponent(JSON.stringify(url))
uni.navigateTo({
  url:'/pages/otherPage/otherPage?item=${item}'
})

//接参数的页面 通常在onLoad里面对参数解码
let data=decodeURIComponent(options.item);
//将JSON字符串转成对象
let obj=JSON.parse(data)


css画弧线


<template>
  <view>
    <view class="bg">
    </view>
</view>
</template>
<style>
.bg{
 background-color: black;
}
.bg::after{
content: '';
position: absolute;
width: 160%;
height: 100px;
background: skyblue;
left: -30%;
border-radius: 0 0 50% 50%;
}
</style>


uniapp中scroll-view加flex不生效


white-space: nowrap;

scroll-view包裹内容样式加: display:inline-block;


js实现获取当前日期后几天的某天日期



function GetDateStr(AddDayCount) { 
   var dd = new Date(); 
   dd.setDate(dd.getDate()+AddDayCount); 
   var y = dd.getFullYear(); 
   var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期
   var d = dd.getDate()<10?"0"+dd.getDate():dd.getDate();//获取当前几号
   console.log(y+"-"+m+"-"+d)
   return y+"-"+m+"-"+d; 
};
GetDateStr(5);//后5天

盒子底部文字加黑色阴影


background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);


uniapp保存图片到相册


saveImage(url) {
        uni.showLoading({
          title:'下载中...'
        })
        uni.downloadFile({
          url: url,
          success(res) {
            if (res) {
              console.log('下载成功', res)
              uni.hideLoading();
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  console.log(res);
                },
                fail(res) {
                  console.log(res);
                },
              });
            }
          },
          fail: (err) => {
            if (err) {
              console.log('下载失败', err)
              uni.hideLoading();
            }
          }
        });
      }


uniapp 微信小程序之分享


以下方法与onload钩子同级,实现三个点点击分享给朋友和朋友圈

//发送给朋友
onShareAppMessage(){
  return {
    title: '',//分享标题
    path: ''//分享页面路径
    imageUrl: '',//分享图标
    desc:'',//自定义分享描述
  }
}
//分享朋友圈
onShareTimeline() {},


uniapp之webview


<template>
  <view>
    <web-view :webview-styles="webviewStyles" src="https://www.baidu.com"></web-view>
  </view>
</template>


uniapp 复制功能


<view  @click="Copy()">复制</view>

Copy() {
   uni.setClipboardData({
       data: '复制内容', //这里换成需要拷贝的数据 如data的数据
         success: function() {
            console.log('复制成功');
         }
    });
}


上一篇:没有了!

Other

下一篇:webpack 如何配置@ 为 src根目录

技术分享

苏南名片

  • 联系人:吴经理
  • 电话:152-1887-1916
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2025 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号