初試微信小程式遇到問題總結

木風622發表於2019-08-08
微信小程式

這段時間通過官方文件，學了下微信小程式相關開發，整體感覺和vue還是比較像的，如果有vue相關經驗，做小程式還是相對輕鬆點的，但是小程式也有很個性和需要注意的地方，寫了個簡單的demo遇到了一些比較基礎和常見的問題，自己總結下。

1、backgroundColor設定顏色無效

當我們在小程式的json檔案裡設定backgroundColor時，回到頁面看效果，發現頁面並沒有變化，是因為這個backgroundColor設定的是“上拉重新整理”和“下拉載入更多”時露出的背景顏色，而不是通常意義上的頁面背景色，如果要設定頁面背景色，可以通過wxss設定。

2、元件template模板相關問題

（1）template模板引用

開發中我們肯定會用到父子元件巢狀問題，即將一個子元件引用到父元件中，通常可以這樣寫

//子元件ChildOne
<template name='childOne'>
  <text>我是子元件</text>
</template>

//子元件ChildTwo
<template name='childTwo'>
  <text>我是另一個子元件</text>
</template>

//父元件Parent
<import src="./childOne.wxml">
<import src="./childTwo.wxml">

<template is="childOne"></template>
<template is="childTwo"></template>複製程式碼

(2)模板樣式的引用

樣式的引用和模板類似，也是使用import方法

@import './childOne.wxss'複製程式碼

(3)資料和事件的傳遞

資料可以像vue一樣，在引用位置傳遞data即可，可以同時傳遞多個值；

事件和方法可以直接在子元件呼叫（前提是模板引用按照上面方式引用）

資料傳遞：

//子元件ChildOne
<template name='childOne'>
  <text>{{childOne}}</text>
</template>

//子元件ChildTwo
<template name='childTwo'>
  <text>{{childTwo}}</text>
  <text>{{}childText}</text>
</template>

//父元件Parent
<import src="./childOne.wxml">
<import src="./childTwo.wxml">

<template is="childOne" data="{{childOne}}"></template>
<template is="childTwo" data="{{childTwo, childText}}"></template>複製程式碼

事件傳遞

//子元件ChildOne
<template name='childOne'>
  <text bindtap="changeTap">我是子元件</text>
</template>

//父元件Parent.wxml
<import src="./childOne.wxml">
<template is="childOne"></template>

//父元件parent.js
Page({
  changeTap(){
    console.log('click')
  }
})

複製程式碼

(4)多層巢狀迴圈資料

開發過程中基本都會遇到陣列迴圈遍歷展示的問題，通過wx:for可以進行遍歷。多層陣列巢狀迴圈時也是這個原理，只是寫法會有所不同，看程式碼~

<view wx:for="{{listArr}}" wx:for-index="idx" wx:key="item.id">
    <text>{{item.title}}</text>
    <view wx:for="{{listArr[idx].goods}}" wx:for-index="itemIdx" wx:for-item="good" wx:key="good.id">
        <text>{{good.text}}</text> 
    </view>
</view>複製程式碼

(5)template模板的小坑

這個坑我遇到是在template模板引用的時候出現的，這個坑跟個人平時書寫有關係，看問題

...省略引入模板程式碼
<template is=" childOne"></template>複製程式碼

造成問題的原因很簡單，就是在引入的模板名字前面習慣性的打了個空格，造成控制檯警告或者報錯，只要去掉空格就好了，這個問題可以修改程式碼書寫習慣，或者更好方法使用程式碼格式化工具，比如prettier等，可以有效避免此類問題

3、呼叫介面出現地址錯誤問題

通常我們開發的時候肯定會呼叫相關介面獲取資料，小程式也封裝了統一的方法，和jq的方法很類似，具體可以檢視文件。此處要說的是，在呼叫介面的時候出現了地址錯誤問題，仔細檢查路徑、書寫都沒有問題，小程式專案設定裡也勾選了“不校驗域名和https”的選項，問題就很詭異了~~

比如我們請求介面： “data.abc.com”

通常我們開發的時候不會寫死協議內容，讓介面自動獲取是http還是https，使兩者都可訪問，但是在小程式裡，即使本地開發也要加上協議，修改成  “http://data.abc.com”就可以了，當然大前提是要在小程式開發裡配置好伺服器域名。

4、scroll-view橫向滾動

練習中遇到了頂部導航欄，需要橫向滾動，自然可以使用scroll-view，但是寫完之後發現效果完全不對。經過查閱文章發現，橫向滾動需要注意這幾點：

（1）容器盒子一定要有寬度，並且要設定white-space:nowrap

（2）盒子裡的每一項要設定display:inline-block

（3）scroll-view需要設定scroll-x='true'

（4）動態繫結類名和選中狀態： class="{{navCur==id ? 'activeNav' : 'navItem'}}"

（5）獲取點選的index或者id，e.currentTarget.dataset.id

5、上拉載入更多導致資料過多頁面卡頓問題

這個問題可以說在平時開發中很少遇到的問題，普通頁面開發中，我們上拉載入更多資料就是對陣列進行新增就可以，但是小程式裡直接新增，資料過多的話會造成頁面卡頓甚至直接卡死，相關方法網上也有很多了，直接貼兩個地址供大家參考

小程式暗黑技巧徹底解決長列表頁setData超過1M時報錯和嚴重卡頓問題

微信小程式上拉載入更多資料


以上就是遇到的一些簡單的問題，自己做個總結，也希望對有需要的人有所幫助~


相關文章