微信小程序基础

微信小程序相关及一些小坑

1.页面滑动

小程序内容超出父盒子，或者页面超出屏幕都不会出现滚动条滑动，如需要滑动，要使用scroll-view组件包裹着要滑动的区域
scroll-view相关配置属性

scroll-view相关

scroll-view生效需要设置高度，如果没有设置高度，滑动效果不生效
去除scroll-view默认滚动条

::-webkit-scrollbar{

width: 0;

height: 0;

color: transparent;

}

2.闭包问题

请求后台api中的success函数实际是一个闭包，无法直接通过this来设置setData;
解决方案：
1.将当前对象赋给一个新对象：let that = this
2.使用箭头函数

  onLoad: function (options) {
    console.log(options.uselogid)
    wx.request({
      url: util.Api.getUserPrizeInfo,
      method: 'get',
      data: {
        openid: app.globalData.openid,
        user_log_id: options.uselogid
      },
      success: (res) => {
        // console.log(res.data)
        this.setData({
          cardData: res.data.data,
          qrCode: res.data.data.qrCodeUrl,
          uselogid: options.uselogid,
          status: res.data.data.status
        })
        console.log(this.data.status)
      }
    })
  }

3.背景图片问题

小程序中的背景图片写在wxss预览时无法显现
解决方案：
1.将图片转为base64格式，才能在wxss内设置
2.写行内样式，图片用网络图片，本地图片无法预览

4.路由

1.使用navigator标签导航，注意url地址不能带文件后缀
2.在js文件内注册事件跳转
wx.navigateTo跳转保留当前页面，也就是说会有返回箭头

 wx.navigateTo({
       url: '/pages/cardDetial/cardDetial?uselogid=' + e.currentTarget.dataset.uselogid,
     })

wx.redirectTo跳转关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.redirectTo({
      url: '/pages/superGift/superGift',
    })

5.页面间传值

传值:和web页面差不多，也是在url地址后面拼接参数

wx.navigateTo({
        url: '/pages/cardDetial/cardDetial?uselogid=' + e.currentTarget.dataset.uselogid,
      })

接收：直接在生命周期onLoad里用参数接收

  onLoad: function (options) {
    console.log(options.uselogid)
  },

6.无法使用外部字体图标

大部分情况下直接下载iconfont的压缩包，将其内的iconfont.css文件复制到一个新的wxss文件内，然后在app.wxss文件内全局引入@import "/lib/style/iconfont.wxss";就可以在任意文件中使用了
如果出现无法使用的情况，试试下面方法：
1，下载font-awesome字体包

2，打开Transfonter网站，上传字体iconfont.ttf，选择base64编码

3，convert完毕后点击下载，下载得到的包中有stylesheet.css文件，打开并对照font-awesome.css中的内容进行合并base64部分，加入到微信小程序的xxx.wxss文件中进行使用

7.setData修改数组或对象

setData无法直接修改引用类型的数据，需要字符串拼接的方式保存到变量中

 var closeShow = "redPacket.myClosePackect"
 self.setData({
             
              [closeShow]: false,
              
            })

8.textarea注意事项

1.bug: 微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。
2.tip: textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit。
3.tip: 不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
4.tip: textarea 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
5.tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。
6.tip: css 动画对 textarea 组件无效。

9.原生组件无法被覆盖的问题

map、video、canvas、camera 等原生组件上不可被标签覆盖，如果需要覆盖，要使用cover-view标签且只支持嵌套cover-view、cover-image