精华内容
参与话题
问答
  • 二、样式及背景图片显示问题 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

    展开全文
  • 首先先说怎么设置页面背景图片: 这是博主准备的照片。 下面是在wxml中的代码 随便写一下 这里也算是 在微信开发文档中,定义image组件的src属性后跟着的是图片资源地址,在博主的代码中**“/images/804451430....
  • 微信小程序开发笔记(三)–关于背景图片设置 一个菜鸟的学习笔记 如有错误请指点一下(QQ:2529354857) 谢谢! 关于微信小程序开发背景图片的使用 一、使用背景图 在设置一个页面背景图片时,发现在wxcs...

    微信小程序开发笔记(三)–关于背景图片的设置

    一个菜鸟的学习笔记 如有错误请指点一下(QQ:2529354857) 谢谢!

    关于微信小程序开发时背景图片的使用

    一、使用背景图

    在设置一个页面的背景图片时,发现在wxss里backgroud-image无法使用本地图片,需要使用网络图片或者转换格式为base64 还有就是使用image标签
    在这里插入图片描述
    1.使用网图:直接在网上找到图片然后把网址复制就可以使用。

    2.转换格式为base64:[http://imgbase64.duoshitong.com/] 在这里选择图片然后转换为base64格式 但是 这个转换之后很大一坨字母 不想用…。
    在这里插入图片描述

    3.使用image标签:就是加入一张图片假装当做背景图片 但是要注意图片会占位置 所以页面布局的时候有些烦
    在这里插入图片描述

    二、 背景图片的大小设置

    在设置背景图片时,图片的大小可能会与屏幕大小不一致,这时就需要设置图片的大小来适应屏幕

    1.通过 wx.getSystemInfo获取屏幕的长宽 然后通过js里的data设置背景图片大小
    在这里插入图片描述
    但是使用这个方法有一点小瑕疵
    在这里插入图片描述
    获取的高包括上面这一栏 设置背景图时会因为这一栏从而实际高度减少

    2.微信提供了新的单位: vh vw 直接在wxss里面使用即可
    100vh代表屏幕宽高 100vw代表屏幕宽
    在这里插入图片描述

    展开全文
  • 微信小程序开发过程中,为了增加界面的美观程度,可以尝试将一张图片设置背景。在网上最主要的方法为: index.wxml <view class="content"> <!--pics文件夹下的background.jpg文件--> <image ...

    错误示例

    微信小程序开发过程中,为了增加界面的美观程度,可以尝试将一张图片设置为背景。在网上最主要的方法为:
    index.wxml

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

    index.wxss

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

    但是问题出现了,在导航栏和图片的交界处出现了一条白线,十分影响美观。
    在这里插入图片描述

    正确示例

    所以需要再加上如下两段代码,以便于隐藏这一条白条:
    index.wxml(注:此条代码必须放在最后,否则可能会把这段代码之后的view组件遮盖)

    <view class='main'>
      <image src="{{url}}" mode='widthFix' >
      </image>
    </view>
    

    index.wxss

    .main{
      width: 100%;
      height: 100%;
    }
    image{
      width:100%;
      height: 100%;
      position: absolute;
      top:0px;
      bottom:0px;
    }
    
    

    效果如下:
    在这里插入图片描述

    正确代码段

    为方便摘用,整合为一下内容:
    index.wxml

    <view class="content">
      <!--pics文件夹下的background.jpg文件-->
      <image class='background' src="/images/beijing.jpg" mode="aspectFill"></image>
      <!--页面其它部分-->
    </view>
    
    //*************此处添加代码*************//
    
    <view class='main'>
      <image src="{{url}}" mode='widthFix' >
      </image>
    </view>
    

    index.wxss

    page{
      height:100%;
      }
    .background {
      width: 100%;
      height: 100%;
      position:fixed; 
      background-size:100% 100%;
      z-index: -1;
      }
    image{
      width:100%;
      height: 100%;
      position: absolute;
      top:0px;
      bottom:0px;
    }
    .main{
      width: 100%;
      height: 100%;
    }
    
    展开全文
  • 微信开发知识梳理

    2019-01-30 15:40:48
    微信开发微信小程序使用localhos调试小程序获取for的item对象小程序取值方式小程序动态的设置属性小程序setData小程序跳转方式小程序阻止事件冒泡小程序跳转url参数丢失微信小程序——button添加背景图片小程序页面...

    总结碰到的微信开发问题,持续更新

    用localhos调试

    微信小程序使用localhos调试

    • 使工具不校验合法域名,从而可以调用本地localhos调试接口数据读取

    在这里插入图片描述
    在这里插入图片描述





    ## 小程序调试进入页面场景配置 - 每次进入对应的页面的场景都不同,我们可以通过配置工具从而进行已不同场景进入不同的页面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190130144908151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQ2ODUw,size_16,color_FFFFFF,t_70)

    在这里插入图片描述





    小程序获取for的item对象

    • data-自定义名称 为view绑定数据,后台通过 e.currentTarget.dataset.自定义获取
    //tap事件会冒泡到父<view>被其捕获
    <view wx:if="{{item.isNeedBuy}}" data-zidingyi="{{item}}" data-index="{{item}}" bindtap='goBuy'>购买</view>购买</view>
    
    
      goBuy: function goBuy(e) {
        var aaa = e.currentTarget.dataset.zidingyi;
        var bbb = e.currentTarget.dataset.index;
    }
    




    小程序取值方式

    1. 获取自定义的值

      page.data里面定义变量或对象 通过{{变量}}或者{{对象.属性}}调用

    2. 通过form方式获取input输入值,设置form控件bindsubmit事件,并将控件formType属性设置为submit
      在这里插入图片描述
      通过e.datail.value.name(form表单中input控件的name属性)
      在这里插入图片描述

    3. 通过输入事件bindinput
      在这里插入图片描述
      只要输入就会触发传入值
      在这里插入图片描述

    4. 通过点击事件bindtap 将想要的值通过控件的data-自定义 属性绑定





    小程序动态的设置属性

    • 我只想改变数组里面的某一个对象的某个属性的值
    var strCardItem=`cardInfos[${index}].surplusCount`; // 数组里面动态的
    var data={};// 需要更新页面的data
    data[strCardItem]=cardItem.surplusCount; // 我只需要改变数组里面某个对象的的某一个属性
    this.setData(data);
    




    小程序setData

    • setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
    • Object 以 key: value 的形式表示,将 this.data 中的 key 对应的值改变成 value。
    • 其中 key 可以以数据路径的形式给出,支持改变数组中的某一项或对象的某个属性,如 array2.message,a.b.c.d,并且不需要在 this.data 中预先定义。
    • 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
        // 对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好
        this.setData({
          'array[0].text': 'changed data'
        })
        this.setData({
          'object.text': 'changed data'
        })
    




    小程序跳转方式

     WXML页面中可以通过navigator控件跳转
    <navigator url='/pages/bookingInfo/bookingInfo?orderId=123' ></navigator >
    
    Js页面中可以通过点击事件实现跳转
    wx.navigateTo({//保留当前页面,跳转到应用内的某个页面
    url: '/pages/cancelOrder/cancelOrder?id=' + this.data.orderId,
    })
    
    wx.redirectTo({//关闭当前页面,跳转到应用内的某个页面
    url: '/pages/cancelOrder/cancelOrder?id=' + this.data.orderId,
    })
    
    wx.reLaunch({//关闭所有页面,打开到应用内的某个页面
    url: '/pages/cancelOrder/cancelOrder?id=' + this.data.orderId,
    })
    
    wx.navigateBack({
    delta: 1//默认值是1,返回的页面数,如果 delta 大于现有页面数,则返回到首页。
    })
    
    wx.switchTab({//tabBar导航跳转(只能挑tabBar页面)
    url: '/pages/cancelOrder/cancelOrder?id=' + this.data.orderId,
    })
    
    
    




    小程序阻止事件冒泡

    • bind事件不会阻止事件冒泡,catch事件才会阻止事件冒泡
    //tap事件会冒泡到父<view>被其捕获
    <view bindtap="goSubmit1" class="weui-btn-area">
        <button bindtap="goSubmit">找他预定</button>
    </view>
    
    //tap事件则不会会冒泡到父<view>被其捕获
    <view  class="weui-btn-area" bindtap="goSubmit"1>
        <button catchtap="goSubmit">找他预定</button>
    </view>
    




    小程序跳转url参数丢失

    • 小程序跳转页面的时候经常会在URL后面以 ?参数&?参数 的方式传递
    • 但是当我们将URL以参数的形式传递的时候 => URL1?URL1的参数=URL2?URL2的参数 此时会造成参数丢失问题
    //页面A  -->使用encodeURIComponent进行编码
    let resultUrl= encodeURIComponent(`../goBooking/goBooking?id=${option.storeID || option.id}&salesID=${option.salesID}`);
    wx.navigateTo({
      url: '/pages/index/index?resultUrl'+resultUrl,
    });
    
    //页面B(index)   -->使用decodeURIComponent进行解码
    //此时接收到的就是带参数的完整url
    let hasParUrl=decodeURIComponent(options.resultUrl);
    




    微信小程序——button添加背景图片

    • 微信小程序——button添加背景图片
    button::after{
    border: none;
    border-radius: 0;
    }
    
    button[plain]{
    padding:0;
    border:0;
    }
    
    <button  open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo"class='setCarStyle' plain='true' > 
    <image src='{{goImg}}' mode="aspectFit"  animation="{{animationCloudData}}"></image>
    </button >
    




    小程序页面背景图片加载

    • 本地背景图片资源无法通过 WXSS 获取
      1. 可以使用网络图片
      2. 或者 base64,转码详情




    小程序自动获取授权目前无效

    • 在微信小程序里,使用一些接口的时候需要得到用户的授权,用户同意以后我们就可以得到相应的权限,去做一些事情。比如获取用户微信帐号相关信息,得到用户的位置,保存到相册等等。 比如我想知道用户微信帐号相关的信息。先用 wx.getSetting 检查一下用户当前对我们的小程序的授权状态,如果发现用户还没有授权小程序查看他的用户信息,就去调用 wx.authorize 弹出对话窗提醒用户是否要授权小程序得到他的用户信息。用户如果按了同意,接下来我们就可以使用 wx.getUserInfo 这个接口去得到用户相关的信息了,比如他的头像,名字等等。
    1. 之前获取授权的代码(小程序目前版本不会自动弹出)
      在这里插入图片描述
      解决方案:

      1. wxml中新建一个button控件,设置其open-type属性
        在这里插入图片描述

      2. 通过事件对授权弹框信息做操作
        在这里插入图片描述





    微信小程序——二维码分享

    • 二维码分享详情功能参考二维码分享

    • 这里简单介绍一下小程序做不限制数量的二维码分享时要注意的一些地方

    • 图片无法显示的几种情况

      1. scene 的长度超过32位或者有特殊字符       -->(最大32个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&’()*+,/:;=?@-._~,其它字符请自行编码为合法字符(因不支持%,中文无法使用 urlencode 处理,请使用其他编码方式))
      2. page参数的路径不存在       -->(必须是已经发布的小程序存在的页面(否则报错),例如 pages/index/index, 根路径前不要填加 /,不能携带参数(参数请放在scene字段里),如果不填写这个字段,默认跳主页面)
      3. eg:在这里插入图片描述
    • 获取 scene 值

      1. scene 字段的值会作为 query 参数传递给小程序/小游戏。用户扫描该码进入小程序/小游戏后,开发者可以获取到二维码中的 scene 值,再做处理逻辑。

      2. 调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟,开发工具模拟时的 scene 的参数值需要进行 encodeURIComponent

      3. eg:在这里插入图片描述

    • 获取 scene 值

      1. 只能审核发布过后才能看到对应的效果!!!

      2. 如果scene需要多个参数传递–> 传入id,通过id得到对应的数据(多个id值)

    
    
    展开全文
  • 2019.3.29 微信搜索再次升级,部分微信公众平台小程序后台收到了如下官方通知消息:小程序管理后台-设置-基本设置-页面收录设置,可对你的小程序帐号进行收录的开关设置。开启后,你的小程序页面将可能展示在微信...
  • 最近在弄微信小程序,把开发过程中遇到的问题和细碎知识点记录下来,方便查询 一、有关Tabbar和导航栏的知识 在所有页面让顶部导航栏消失:在app.json中添加 “navigationStyle”:“custom” 自定义某个页面A让导航...
  • 问题背景微信开发是目前程序开发领域一个比较火热的板块,基于公众号、微信支付等开发层出不穷,纷繁多彩,今天这里就基于微信开发的另外一个小版块,微信网页内分享到朋友圈等平台灵活设置链接和小图标(见下图)...
  • 导语:我们知道在开发微信小程序时,是不能直接在wxss文件里引用本地图片的,否则在运行时会出现如下错误:(学习视频分享:编程视频)“本地资源图片无法通过WXSS获取,可以使用网络图片,或者 base64,或者使用<...
  • 适合小白入门的生日惊喜小程序效果图展示确认整体框架封面设计点击图标实现页面跳转背景图的设置答题环节消息提示框弹出图片展示音乐播放音频播放暂停图片转动总结 效果图展示 这个程序是本人开发的一个简单微信小...
  • 小程序顶部标题栏的背景图片设置

    千次阅读 2019-12-03 10:08:06
    实际运行结果为: 实现步骤 知识点讲解: 修改 navigationStyle 字段,关于这个属性,以下是官方解释: 在uniapp中 使用微信小程序开发工具开发小程序时:官方解释 ...修改需要配背景图片页面路由的属性值,此...
  • 背景微信中打开h5页面,获取用户信息,分享(利用微信jdk,支持分享图片与title的设置)到微信朋友圈与...登录微信公众平台官网后,在公众平台官网的开发-基本设置页面,勾选协议成为开发者,点击“修改配置”按...
  • 此功能分两部分,第一部分定时器每天定点推送一条URL+图片+文字,第二部分点击URL进入页面,能看到生日祝福文字、背景图片、音乐。 第一部分定时器每天定点推送一条URL+图片+文字 ApplicationContext-elasticJob....
  • 开发工具的基本设置3. 小程序的基本单位-Page页面二、小程序的基本目录1. 页面的4种基本文件类型2. 全局配置文件、全局样式和应用程序级别js文件三、rpx响应式单位与flex布局1. 小程序默认显示第一位的页面索引或`...
  • 9、微信投票系统还可以自定义添加背景音乐。 10、投票方式有两种:可以设置在公众号回复选手编号进行投票、也可以在活动页面搜索选手编号或姓名查找进行投票。 11、可以对每个选手作品详情页增加评论功能,可开启...
  • 微信小程序个人中心-我的界面

    千次阅读 2020-04-24 17:14:51
    我们在开发微信小程序的时候,基本上都会有一个个人中心的界面,简称我的界面,里面有保存每个用户的个人信息,个人设置,个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面,下面来看看效果图: ...
  • 增加 个人空间模块空间可上传背景图片 重构 微信模块所有代码以支持多用户绑定 改进 Modoer框架代码使用PHP5.3新特性 改进 微信模块内置指令管理 改进 文件(图片)上传功能 改进 后台模板添加模式 增加 后台内容...
  • 微信开发是目前程序开发领域一个比较火热的板块,基于公众号、微信支付等开发层出不穷,纷繁多彩,今天这里就基于微信开发的另外一个小版块,微信网页内分享到朋友圈等平台灵活设置链接和小图标(见下图)的功能来...
  • 小程序开发(flex详解)

    千次阅读 2018-06-07 15:38:04
    ?遇到的问题 1、tabBar切换,改变导航条的标题 在页面的.json里面编写,注意在根节点写,不要画蛇添足加windows节点!...2、无法直接用本地图片设置为View标签背景图片 微信报错提示:本地资...
  • 页面中所有的行情数据都来自互联网或测试假数据, 不能确保数据的正确性, 仅供开发调试使用. 任何行情数据问题都与本项目无关. 请自行去交易所购买正版行情。 HQChart 3.0 分网页版本 及 微信小程序版本 ...
  • 鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作...
  • 图片高宽设置为物理像素的1/2既可。 另一种情形就是最常见的背景图,将<code>background-size设置为物理像素的1/2。比如图片物理像素为200*200,代码如下: <pre><code> <style> #b1 { ...
  • APP中有几个页面的头部设计跟微信朋友圈的头部相似,状态栏和标题栏是透明的,能清楚看到下面的图片,这里需要用到状态栏和标题栏的沉浸式设置。 要让状态栏透明该怎么办呢?首先我就想到了将背景设置成t...
  • 1.3.1 制作邀请函的页面背景 015 1.3.2 调整邀请函的内容区域位置 018 1.3.3 调整邀请函的文字字体与字号 020 1.3.4 制作邀请函的按钮 021 1.3.5 创建一个外部CSS文件 022 1.4 为页面创建交互 024 ...
  • 公司年会大屏幕抽奖

    2018-09-25 15:06:14
    更新:上墙消息增加了显示方式、循环播放设置、循环信息条数、放大显示图片消息开关、放大显示图片消息时间设置 更新:后台关闭上墙、摇一摇、投票后,手机端的菜单也会相应的消失,并且如果不小心连接放错了,可以...
  • 1.3.1 制作邀请函的页面背景 015 1.3.2 调整邀请函的内容区域位置 018 1.3.3 调整邀请函的文字字体与字号 020 1.3.4 制作邀请函的按钮 021 1.3.5 创建一个外部CSS文件 022 1.4 为页面创建交互 024 ...
  • 微信公众平台中,开发——开发设置——服务器域名中添加request、uploadFile、downloadFile合法域名。将上述ApiBaseUrl域名添加到request合法域名,例如www.geekera.com。 3.高级功能配置(非必须) 海报分享...
  • 修正 pc页面设置缓存后,移动端访问pc域名无法自动跳转问题;修正 在线升级展现升级内容url过长问题;修正 完善企业资料奖励积分提示;修正 职位联系方式保存不成功;修正 修改审核未通过职位的地区保存无效;修正 ...
  • 3、用户可设置网站模板总体风格,如整体色调、背景、字体、文字颜色等; 4、多语言网站可以使用同一套模板,也可以为每种语言设置不同的模板; 5、支持自定义模板,懂WEB前端技术(CSS3\HTML5\Javascript)即可自行...
  • 记事狗微博系统采用php mysql开发并开源发布,可承载千万级用户,其支持Wap、3G、Android客户端、iphone客户端、短信、微信等多种方式发布内容,并可选择同步到主流的微博平台(也支持微博帐户登录),内置的插件和...

空空如也

1 2 3
收藏数 45
精华内容 18
关键字:

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