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

缺乏、安全感 2021-10-24 00:42 381阅读 0赞

> 小程序中的常用坑：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. 去掉`<scroll-view>`标签的滚动轴： ######

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

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

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

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

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

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

① 头像：`<open-data type="userAvatarUrl"></opendata>`  
② 昵称：`<open-data type="userNickName" lang="zh_CN"></open-data>`

###### 12. 几种弹窗提示： ######

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

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

![在这里插入图片描述][20190830184207601.PNG]  
② `wx.showToast({})`:提示你想提示的信息。不带确定和取消，当icon为none时，只提示title,没有提示图片

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

![在这里插入图片描述][20190830184240654.PNG]  
③ 当icon为loading时无限加载（可取消）

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

![在这里插入图片描述][20190830184258294.PNG]

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

###### 14. `object-fit`:图片自适应 ######

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

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

###### 16. 在用`<scroll-view></scroll-view>`标签的`<scroll-into-view></scroll-into-view>`属性时，需要动态赋值才可起作用，不可写成固定值。在下面这种情况，需要重新赋值。 ######

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"转换成日期格式。 ######

[20190830184207601.PNG]: /images/20211023/c18649e3eeb94422b66291928ad660e7.png
[20190830184240654.PNG]: /images/20211023/3a2a9fb9cd4742acb16ad7d1e13e6d70.png
[20190830184258294.PNG]: /images/20211023/d17b913a11a642689a3bc8e2baa02940.png