##一、背景
下面这些都是在开发的过程中，记录下来的笔记。
##二、样式及背景图片显示问题
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

微信小程序开发笔记（三）–关于背景图片的设置
一个菜鸟的学习笔记 如有错误请指点一下（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 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%;
}

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

微信开发
微信小程序使用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;
}









小程序取值方式


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


通过form方式获取input输入值，设置form控件bindsubmit事件，并将控件formType属性设置为submit



通过e.datail.value.name（form表单中input控件的name属性）




通过输入事件bindinput



只要输入就会触发传入值




通过点击事件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 这个接口去得到用户相关的信息了，比如他的头像，名字等等。



之前获取授权的代码（小程序目前版本不会自动弹出）



解决方案：


wxml中新建一个button控件，设置其open-type属性




通过事件对授权弹框信息做操作














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


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


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


图片无法显示的几种情况

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



获取 scene 值


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


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


eg:




获取 scene 值


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


如果scene需要多个参数传递–>  传入id，通过id得到对应的数据（多个id值）