微信开发知识梳理

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

用localhos调试

微信小程序使用localhos调试

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

## 小程序调试进入页面场景配置 - 每次进入对应的页面的场景都不同，我们可以通过配置工具从而进行已不同场景进入不同的页面 

小程序获取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值）