微信小程序自学过程中遇到的问题 转

• view标签下hover必须为true时，设置hover-class才有效，hover-start-time和hover-stay-time的形式如下：

 

1. < view class="v1" hover="true" hover-class="v1_changed" hover-start-time="1000" hover-stay-time="500">1< /view>

• 关于Flex属性的总结：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

• 完成scroll-x例子的过程中，用flex-warp元素没办法在一排，用white-space能得到想要的效果；

 

1. /* pages/index/scroll_view.wxss*/
2. .scroll-x{
3. flex-direction: row;
4. display: -webkit-flex;
5. display: block;
6. white-space: nowrap;
7. /*flex-wrap: nowrap;*/
8. width: 500rpx;
9. }

• white-space属性 
  normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行； 
  pre: 保持HTML源代码的空格与换行,等同与pre标签； 
  nowrap: 强制文本在一行,除非遇到br换行标签；

• ===和==的区别：==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase；简而言之就是 "==" 只要求值相等; "===" 要求值和类型都相等；

• scroll-into-view 
  值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部;此属性只对纵向排列的元素生效

• 小程序下拉刷新上拉加载的两种实现方法 
  1.直接在js文件里写入onPullDownRefresh:function(){}和onReachBottom:function(){}; 
  2.在scroll-view里设定bindscrolltoupper和bindscrolltolower，然后在js里写好触发事件；

• swiper滑块视图容器 
  其中swiper-item仅可以放在swiper组件中，且宽高自动被设置为100%；

 

1. < swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='1' interval="1000" duration="10a00" circular="{{cicular}}">
2. < swiper-item>
4. < view style=" height: 300rpx"></view>
5. < swiper-item>
6. < swiper-item>
8. <view style="background-color: red; height: 300rpx"></view>
9. < swiper-item>
10. < swiper-item>
12. < view style=" height: 300rpx"></view>
13. < swiper-item>
14. < swiper>

• 元素展示技巧

 

1. <block wx:for="{{type}}">
2. <icon type="{{item}}" size="40" color="red"></icon>
3. < block>

• function(e) 
  e是event，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 
  事件通常与函数结合使用，函数不会在事件发生前被执行！

• 常见写法

 

1. var textnow = "这是一个关于text的例子"
2. var textdata = [];
3. Page({
4. data:{
6. tex:textnow
7. },
8. add:function(e){
10. textdata.push('push')
11. this.setData({
12. tex:textnow+textdata[0]
13. })
14. },
15. remove:function(){
17. textdata.pop()
18. this.setData({
19. tex:textnow
20. })
21. }
22. })

• progress的属性放在wxss里没有作用，只能放在wxml中；
• button中size只有两个属性default和mini，其它参数设置不起作用；
• primary和warn属性的button，在hover-class的情况下，设置background-color不起作用，即只有default在设置background-color时会发生改变；
• rgba里的a是透明度；

• indexOf 
  indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置;

  stringObject.indexOf(searchvalue,fromindex) 
  该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。

注：indexOf() 方法对大小写敏感！ 
注：如果要检索的字符串值没有出现，则该方法返回 -1；

应用：前端的表单情况怎么传递和记录

 

1. radioChange: function(e) {
2. var checked = e.detail.value
3. var changed = {}
4. for (var i = 0; i < this.data.radioItems.length; i ++) {
5. if (checked.indexOf(this.data.radioItems[i].name) !== -1) {
6. changed['radioItems['+i+'].checked'] = true
7. } else {
8. changed['radioItems['+i+'].checked'] = false
9. }
10. }
11. this.setData(changed)
12. }

• const 
  const修饰的数据类型是指常类型，常类型的变量或对象的值是不能被更新的（静态变量）；

• label标签的for属性 
  label有两个属性，一个是for，一个是accesskey。 
  for的意思是，让这个label为哪个控件服务； 
  accesskey则定义了访问这个控件的热键； 
  单选钮、复选框都要点击控件才能选中控件，而如果使用标识就可以实现点击文字选取。

 

1. <form>
2. <label for="male">Male</label>
3. <input type="radio" name="sex" id="male" />
4. <br />
5. <label for="female">Female</label>
6. <input type="radio" name="sex" id="female" />
7. </form>

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

 

附录：说说微信小程序开发的那些坑

作者：F_ck_null，原文地址

 

坑一：Content-type问题

坑指数：★★★★★

官网里面的示例代码中content-type是设置为'application/json'的，然而……！！！

无限黑人问号，怀疑过豆瓣的接口的问题，怀疑过网络问题，怀疑过人生......

但是原来是微信开发工具升级后（目前是0.12），请求的header的Content-type写法变了，要改成:

header: { 
content-type: 'json' 
}

这样就可以请求成功了！ 
p.s：这个问题在交流群遇到最多的提问，微信的文档害人不浅啊...

 

坑二：Promise库问题

坑指数：★★

相信很多前端开发人员都喜欢使用Promise，然而目前微信开发工具版本（0.12）不支持Promise，需要自己引用，Bluebird作为最受欢迎的Promise库之一，很多人都会使用它。

引入后本地开发没问题，十分顺利，iOS运行也可以，但是Android一打开就会显示‘发生未知错误’

如果是引入了Bluebird，安卓又提示这样的错误，那你需要做的就是换掉Bluebird，比较多人建议是的使用https://github.com/stefanpenner/es6-promise ，es6-promise-min只有6kb，下载后把原来的Bluebird替换即可。

 

坑二：Object.assign问题

坑指数：★★★

此坑一般在开发工具开发的时候不会展现，但是Android真机调试的时候问题就来了...

具体症状看你在哪里运用了，小的开发是在request的地方使用了，导致在Android机上数据显示不了（微信开发工具和iOS都正常），最后把Object.assign处理好就ok了

另外根据一些前辈谈及，使用es6会在Android上遇到各种奇奇怪怪的问题，如果遇上只在Android上的问题，可以怀疑是不是使用了什么es6特性。

tips：微信小程序最后的页面大部分都web页，所以一些Android在web上不支持的es6特性，在小程序里面也是有问题的，不过我们还是可以使用强大的babel进行转换。