微信小程序自學過程中遇到的問題 轉

• 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進行轉換。