微信小程序之课程表项目记录

小程序中的常用坑：https://www.jianshu.com/p/10cb1eb890ca
参考文章：https://blog.csdn.net/user_3011/article/details/80551809
https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

1. 用flex布局时不能用text-align属性

2. wxs中不能用定时器

3. 在wxml里面可以直接通过{{idnex}}取得当前正被遍历的索引值

4. catchfocu=""：获取焦点事件

5. bindblur=""：失去焦点事件

6. 去掉标签的滚动轴：

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

7. 写transition:translate()时：① wxss文件中正常使用rpx单位 ② wxml中的style属性 必须在前面加空格 比如view>

8. 在用时，必须要给该标签设置高/宽（如果横轴滚动，则要设置宽，如果纵轴滚动，需要设置高）

9. picker和input的标签的禁用都是disabled="true"

10. 在wxml中属性和字符串拼接和js中写法相同

11. 最新获取用户头像和昵称的方法(直接添加到wxml里面即可)：

① 头像：
② 昵称：

12. 几种弹窗提示：

① wx.showModal({}):带确定与取消的弹窗

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.showModal({
      title: '提示',
      content: '这是一个模态窗口',
      success:function(res){
            if(res.confirm){
              console.log('弹框后点确定')
            }else{
                console.log('弹框后点取消')
            }
      }
    })
  },

② wx.showToast({}):提示你想提示的信息。不带确定和取消，当icon为none时，只提示title,没有提示图片

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
   wx.showToast({
     title:'成功',
     icon:'success',
     duration:2000
   })
  },

③ 当icon为loading时无限加载（可取消）

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   wx.showToast({
     title: '加载中',
     icon:'loading',
     duration:10000
 })
  setTimeout(function(){
   wx.hideToast()
   },2000)
 
  },

13. 当要设置获取到的用户头像为圆形时，不仅要设置border-radius:50%,还要设置overflow:hidden。

14. object-fit:图片自适应

取值	解释
fill	被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
contain	被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
cover	被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
none	被替换的内容将保持其原有的尺寸。
scale-down	内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

15. 将less文件转换成css文件：① 安装全局的less:npm install -g less ② 然后执行下命令，就是将less文件夹下test.less的内容 翻译到css文件夹下的test.css中：lessc less/test.less css/test.css

16. 在用标签的属性时，需要动态赋值才可起作用，不可写成固定值。在下面这种情况，需要重新赋值。

  backNow(e) {
    if (e.currentTarget.dataset.index !== this.data.chooseIndex) {
      this.choose(e)
    }
/*若不写该语句，则不会起作用（虽然赋值前和后的值相同，但是若不赋值，则不会滚动到目标位置）*/
    this.setData({
      nowId: this.data.nowId
    })
  },

17. 在微信小程序接入一个吐槽区：navigator（ target="miniProgram" ）=wx.navigateToMiniProgram(Object object)：打开另一个小程序/当前小程序的另一个页面

 appId: "wx8abaf00ee8c3202e",//吐槽区的appId(所有都一致)
        extraData: {
            // 把1221数字换成你的产品ID，否则会跳到别的产品
            id : "1221",//当申请一个吐槽区后会有一个自己的产品id，该id为产品id
            // 自定义参数，具体参考文档
            customData : {
                clientInfo: `iPhone OS 10.3.1 / 3.2.0.43 / 0`,
                imei: '7280BECE2FC29544172A2B858E9E90D0'
            }

/*在app.json中进行配置*/
"navigateToMiniProgramAppIdList": [
      "wx8abaf00ee8c3202e"//吐槽app的appId
    ]

18. 若想禁止页面向下滚动事件，可设置:page{overflow:hidden}

19. 当想要实现横纵轴滚动相互不影响，可不使用scroll-view,可设置内容和横纵轴的left/top，让内容与顶部与左部一同变换

20. IOS无法将"2019-12-20 11:11:11"转换成日期格式，为了能够让所有系统正确转换，需要将时间字符串分割，分割成年、月、日、小时、分钟、秒分别作为参数传入获取真正的时间。所有系统可以将字符串"2019-12-20"转换成日期格式。