微信开发 设置页面背景图片页面_android开发怎么根据微信id跳转到微信聊天页面页面 - CSDN
  • 二、样式及背景图片显示问题 1、修改单个页面背景色: 在页面的wxss里面加上这句代码: page{ background-color: lightcyan; } 2、小程序中的颜色设置 //颜色不要加引号,也可以直接是英文 border-top:1...

    ##一、背景

    下面这些都是在开发的过程中,记录下来的笔记。

    ##二、样式及背景图片显示问题

    1、修改单个页面的背景色:
    在页面的wxss里面加上这句代码:

    page{
      background-color: lightcyan;
    }
    

    2、小程序中的颜色设置

    //颜色不要加引号,也可以直接是英文
    border-top:1rpx solid  #e5e5e5;
    

    3、小程序中的rpx和px的区别

          rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0

    4、关于背景图片

    本地资源无法通过 WXSS 获取
    background-image:可以使用网络图片,或者 base64,或者使用标签

    但是可以在wxml中,通过style设置

    <view class='bg' style="background-image: url('../../img/bg.png');">
    

    也可以访问网络图片,比如把图片上传到阿里的OSS,直接使用阿里返回的路径也可以

    5、关于小程序中的flex布局,可以参考阮一峰的文章:

    http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    6、关于本地背景图片在手机上无法显示的问题

          这个问题在网上百度了一下,大多数人都建议,不要用本地资源。最好是用网络资源,也就是把图片上传到OSS上,访问。

    我这边是把图片上传到阿里云的OSS,返回图片的网络路径,直接使用即可。

      <view class='bg' style="background-image: url('http://pzsh.oss-cn-shanghai.aliyuncs.com/xxx/xx.png');background-size: cover">
    

    这里的background-size: cover是为了让图片等比例缩放,铺满整个屏幕。

    end

    展开全文
  • 我们知道,在PC端,想在一个页面插入一张背景图,只需要如下属性即可。 background-image: url("../images/photo.png"); 在小程序里面,如此做法就行不通了,图片不但不会显示而且还会报错了 pages...

    我们知道,在PC端,想在一个页面插入一张背景图,只需要如下属性即可。

    background-image: url("../images/photo.png"); 
    

    在小程序里面,如此做法就行不通了,图片不但不会显示而且还会报错了

    pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。

     


    很多人都会有这样的一种感受,在一边学习一遍做项目的过程中,总会遇到很多坑,今天给大家填坑,如何给小程序页面插入一张背景图。
    参考了一下小程序的参考手册:https://www.w3cschool.cn/weixinapp/weixinapp-qa.html

    在网上浏览了一遍,找到了几个比较靠谱的解决方案,简单方便。

    解决方案:

    解决方法一:

    在使用背景图片的时候用网络图片,就是用外链的形式,比如你将这张图片放到你的服务器,如:https://xxxx/xxx.jpg

    1:用工具连接服务器

     

    2:将桌面的图片拖入指定服务器文件夹底下

    3:得到图片网络连接,添加到代码中,则可以显示背景图片

     

    解决方法二:

    将背景图片使用编码base64进行转换,可以在这个网址进行http://tool.css-js.com/base64.html 转换,如:background-image: url("转换后得到的编码文本"),如果多次使用的话可以将该值设置为全局变量,再在js文件进行引用即可;

    1:打开在线图片转换平台

     

    2:将桌面的图片导入,生成base64编码

     

    3:将第三方平台编译过后的base64编码复制到wxss里面

    
     
    1. // Base64 在wxss中的使用

    2. page{

    3. background-image: url(""data:image/jpg;base64,/9j/4AAQSkZJRgABAQEA....");

    4. }

    5.  

    4:效果如下:

     

    缺点就是,这一大串编码太占用我们的代码空间了,鼠标要拖动许久许久,难免产生视觉疲劳。

    展开全文
  • 开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错:“本地资源拓扑无法通过WXSS获取,可以使用网络图片,或者base64,或者使用&amp;amp;amp;amp;lt;image/&amp;amp;amp;amp;gt;标签。” ...

    开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错:“本地资源图片无法通过WXSS获取,可以使用网络图片,或者 base64,或者使用<image/>标签。

    这里主要介绍使用<image/>标签的方法

    网上有很多方法,笔者也尝试了不少,期间也遇到一些问题。最后总结一下,只需2步:

    1、在wxml文件中添加一个<image/>标签:

    <!--页面根标签-->
    <view class="content">
    	<!--pics文件夹下的background.jpg文件-->
    	<image class='background' src="../../pics/background.jpg" mode="aspectFill"></image>
    	<!--页面其它部分-->
    </view>
    

    2、在wxss文件中添加:

    page{
      height:100%;
    }
    .background {
      width: 100%;
      height: 100%;
      position:fixed; 
      background-size:100% 100%;
      z-index: -1;
    }
    

    要说明的是z-index: -1,可以让图片置于最底层,不会影响其它部分。


    2020.02.10更新:
    看到有评论说此方法不可行,不知道是什么原因造成的。
    可以参考我在实际项目中的应用:利用百度地图天气API开发微信小程序
    或者GitHub上的代码:weather_forecast


    欢迎关注我的微信公众号:
    在这里插入图片描述

    展开全文
  • 微信小程序中,我们...首先先说怎么设置页面背景图片: 这是博主准备的照片。 下面是在wxml中的代码 <!--pages/test.wxml--> <view class='test'> <view class="temp">随便写一下</view...

    在微信小程序中,我们不免的要设置背景图片和字体颜色。
    那怎么样才能做到简单的设置背景图片和字体颜色呢?
    话不多说,直接开讲
    首先先说怎么设置页面背景图片:
    在这里插入图片描述
    这是博主准备的照片。
    下面是在wxml中的代码

    <!--pages/test.wxml-->
    <view class='test'>
      <view class="temp">随便写一下</view>
     <view class="tmp">这里也算是</view>
      <image class='mytest'  src='/images/804451430.jpeg'></image>
    </view>
    
    

    在微信开发文档中,定义image组件的src属性后跟着的是图片资源地址,在博主的代码中**“/images/804451430.jpeg”**是图片资源地址。
    在这里插入图片描述
    然后在wxss中设置背景图片的布局。

    .mytest{
       position: absolute;
       top:40rpx;
       left:40rpx;
       width:100%;
       height:100%;
       z-index:-1;
    }
    

    这就是怎么设置页面背景图的方法。

    接下来讲一下怎么设置字体的颜色。
    在wxss中讲你要设置的字体的布局中加上color属性

    .temp{
      text-align: center;
      font-size: 50rpx;
      line-height:2;
      opacity: 0.8;
      color: brown;
    }
    .tmp{
      text-align:center;
      font-size:50rpx;
      line-height:2;
      opacity:0.65;
      color: brown;
    }
    

    在这里博主设置的颜色为brown。

    下面就是效果图
    在这里插入图片描述
    如果博主写的地方有错误了,欢迎评论区的大佬指出来。
    如果觉得写的还行的话,来个三连(点赞,收藏,关注)啊,大佬们
    在这里插入图片描述

    展开全文
  • 在网上查了下面的方法 ,然而并不能行.... 经测试使用绝对定位是可以完成的 ...这样就可以做到平铺填充整个view,做到背景图的效果! 转载于:https://juejin.im/post/5b4f087e5188251aa14bfa44...
  • 微信小程序开发笔记(三)–关于背景图片设置 一个菜鸟的学习笔记 如有错误请指点一下(QQ:2529354857) 谢谢! 关于微信小程序开发背景图片的使用 一、使用背景图设置一个页面背景图片时,发现在wxcs...
  • 我们都知道,用css给网页设置背景图片,可以导入网络图片和本地图片。 1. 网络图片: 元素定位{ background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=...
  • 在对应的json里面写入{ "navigationBarBackgroundColor": "#b3d4db"} app.json里不要写
  • 微信开发API文档是必看的在api文档里面我们可以看到很多内容,然后需要我们去理解点击进微信硬件平台api[http://iot.weixin.qq.com/wiki/new/index.html?page=4-7. 页面代码块代码块语法遵循标准markd
  • 最近做项目需要在微信播放视频,设置播放的背景图,折腾了好久 <div class="video-back" :style="{backgroundImage: 'url(' + info.thumbnail_url + ')', }"> <video :src="info.video_url" class=...
  • 遇到这个问题的时候,我第一时间去微信公众平台上面查页面配置,我发现这样的描述: 当我看到这个的时候我觉得找到了,就是你了。我在单页面的xx.json 中配置backgroundColor 就可以了。但是当你配置完你就会发现...
  • 这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示。经过查资料发现,background-image 只能用网络url或者base64图片编码 , 本地...
  • 关于微信小程序的背景图片问题,1、微信小程序不能使用本地的图片设置背景图片,即&lt;view class="backImg" style="background-image: url('../images/1.jpg')"&gt; &lt;/view&...
  • 微信小程序默认了page属性,只需要设置page{ min-height: 100%; background-color: black; }就是全屏黑色了
  • 关于在微信小程序中插入背景图片,是不能将本地文件直接作为background-image的,要么使用网址链接,要么使用base64,这,考虑到小程序的大小问题,毕竟大小限制为2M的小程序是不可能有多余的空间留给background-...
  • 修改这个页面背景只需要在相应页面的wxss页面中添加如下代码: page { display: block; min-height: 100%; background-color: red; } 其中red即为你想要的颜色,你可以将red替换会为你自己的颜色
  • 改变整个页面背景颜色 在该wxss中添加 page { background: #F3F3F3; }
  • app.wxss中的样式属于全局样式,可以在app.wxss中添加如下代码来统一设置所有page的样式。 page { background-color: rgba(250,250,250,0.90); }
  • 背景颜色是灰色的,于是我给最外层的view设置了样式 .order-home { background: #F3F3F3; } 结果发现只有最外层view内的元素背景颜色才为灰色,下面空余的地方都是白色的。 于是我修改了页面的.json文件 ,”...
1 2 3 4 5 ... 20
收藏数 19,854
精华内容 7,941
关键字:

微信开发 设置页面背景图片页面