swiper 组件高度不能被子元素撑开
- 解决方案
- 隐藏scroll-view的滚动条
小程序 formId 收集和登录授权表单最终解决方案（感觉并不好）
- 小程序授权：必须由用户点击 button 唤起授权
- 小程序formId：formId的收集
对于小程序防盗链问题
小程序的优化问题
- 存在网络图片资源未开启 HTTP 缓存控制
小程序跳转参数问题

# 微信小程序的坑

# `swiper` 组件高度不能被子元素撑开

小程序中swiper组件被底层框架加了css，限制死了高度为150px，换算成小程序单位就是300rpx，用wxss是修改不了高度的，所以是无法根据swiper内容高度自动撑开swiper的

# 解决方案

在swiper-item中添加scroll-view组件，并通过wxss给scroll-view一个固定高度不过这样的话有一个弊端就是下拉刷新就不能用了，只能用scroll-view提供的对应的触底（bindscrolltolower）和触顶（bindscrolltoupper）来解决；

# 隐藏scroll-view的滚动条

::-webkit-scrollbar{
  width: 0px;
  height: 0px;
  color: transparent;
}

# 小程序 `formId` 收集和登录授权表单最终解决方案（感觉并不好）

# 小程序授权：必须由用户点击 `button` 唤起授权

授权改为点击<button open-type='getUserInfo'><button/>组件时才能唤起授权

# 小程序formId：formId的收集

TIP

小程序中formId收集也必须由用户点击button，外层要套一层 form report-submit:true表单(此属性为了点击button的时候返回formId)，在点击<button formType=submit<button/>会返回 formId

解决方案

为了同时兼顾收集formId和用户授权用一个button，即在最外层套一个form，在form内部套一个button,然后在button中添加内容，但是优缺点如下

优点：用户点击屏幕的任何地方都可以收集到formId，而且会提示授权。

缺点：如果用户第一次没授权的话，点击任何地方都会提示用户授权，而且事件的写法也需要修改，不能用bindtap 而需要改为在标签上写data-action的形式。

<form class="login" report-submit="true" bindsubmit="formSubmit">
 <button class="loginBtn" formType="submit" bindtap="handleEvent" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
  <view>内容</view>
 </button>
</form>

/* 上报formId */
formSubmit(e) {
  console.log('收集到formId', e.detail.formId)
  this.setData({
    formId: e.detail.formId
  })
},
/* 点击事件统一处理函数 */
handleEvent(e) {
  let action = e.target.dataset.action || "";
  console.log('action', action)
  if (!app.isLogin) { //需要授权的
    // getUserInfo中e.target永远都是绑定的该事件的button 
    // 所以要记录授权之前的action
    app.action = action
    app.e = e
    return;
  }
  if (action === 'cur') {
    this.refreshData(true)
    return;
  }
  action !== '' ? this[action](e) : null;
},
/* 获取授权后获取信息回调 */
getUserInfo(e) {
  if (app.isLogin) return;
  console.log('未登录', e)
  if (e.detail.errMsg === 'getUserInfo:ok') {
    let { detail: { errMsg, ...res } } = e
    app.res = res
    app.globalData.userInfo = res.userInfo
    autoAuth().then(res => {
      let action = app.action
      action !== '' ? this[action](app.e) : null;
    }).catch(err => {
      console.log(err)
      loginfail()
    })
  } else {
    console.log('用户拒绝授权')
  }
}

# 对于小程序防盗链问题

对于加了防盗链的域名，需要在白名单中添加如下小程序refer https://servicewechat.com ;不然会访问不到图片

# 小程序的优化问题

# 存在网络图片资源未开启 `HTTP` 缓存控制

需要后端服务器返回 Cache-control 响应头来开启HTTP缓存控制

# 小程序跳转参数问题

TIP

在小程序中，跳转的时候，添加的参数中如果有等号，跳转过后会自动解析成字符串

解决方案：在跳转之前，如果参数中含有等号，则需要使用encodeURIComponent()进行转码，跳转之后还需要使用decodeURIComponent()进行解码

微信小程序之canvas →