小程序——微信小程序初學踩過的坑

微信小程序初學踩過的坑

一、前言

    最近因為某些需要和個人興趣打算開發一下微信小程序，經過在官方網站上的基本了解，我大體知道了微信小程序開發的大致過程，其實最本質的就是MVVM，借用了很多模式上的HTML+CSS+JS來進行開發和呈現，其中HTML主要是負責靜態內容的表示，通過DOM樹狀結構來維護，CSS主要是對這些描述對象的一種解釋，提取出來可以復用，JS則是實現試視圖和邏輯的交互，通過用戶等各種動作來執行相應的操作，而微信就高度的使用了這些東西，分別變成了WXML,WXSS,JS，知道了這些基本的概念之后就是微信的整個工程文件結構的組織問題了，微信在這一塊也做得不錯，基本上將一些主要的東西抽取出來，比如app.js在加載的時候實現初始化的作用，對一些全局變量抽取出來直接初始化，這些操作只執行一次，很類似於Android上面的結構，其次就是對一些相關的設置進行了規范，把這些東西放到了app.json中。同樣的出現了js文件基本上都會有wxss文件來進行描述，還有一些工程的基本配置信息放在了project.config.json之中。之后又規范了一些基本的頁面和文件夾分類來存儲不同的東西，比如pages頁面之下就是我們的頁面信息、相應數據的提取json、頁面描述和頁面的操作，這樣我們的業務就比較清晰了。可是微信之中也有一些坑，在這里我需要記錄下來供大家和我來參考。

二、微信小程序目錄的組織

 2.1、創建一個小程序

2.2、開發工具的了解

   我們可以看到有三個選擇的按鈕（1,2,3）主要是用來進行模擬和編輯視圖的切換、編輯和調試的切換、調試模式的切換而存在的，通歐這些簡單的設置，我們可以容易的進行代碼的編寫，調試和檢查錯誤。而在我們編譯的時候（4），最好使用普通編譯，不然會出現一些自己不認識的文件夾，對自己造成很大的困擾，然后就是編譯和預覽了（5,6），編譯的時候最好打開模擬器這樣就能看到程序運行的過程了。預覽的時候系統會生成二維碼，可以在一定時間之內供我們使用手機來進行測試，這樣非常方便。而有的時候我們在模擬器上不小心點了某個按鈕出現了后台列表，這個時候我們可以使用切后台（7）按鈕來進行轉換，而清緩存按鈕可以讓我們釋放一些空間，除去一些錯誤的東西。

2.3、文件結構分析

    我們可以看到系統默認為給我們分了一些目錄，在這些目錄中，我們可以進行相應的編輯，首先是我剛剛說過的那些全局目錄，我們可以在官網上進行學習。其次就是pages這個最重要的開發目錄了，我們的所有邏輯都要放在里面，里面默認分了index首頁目錄和logs日志目錄。另外還有一個工具目錄，這也是常識了，可以方便的進行訪問。根據我們的需要我們還可能在外面在創造資源目錄，比如images等等，並且在pages里面我們還可以創造自己目錄來完成相應的操作。

三、微信小程序常見問題

  在這一部分我會經常更新的，主要記錄一些容易出錯的地方。

  3.1、文件路徑在某個文件中找不到

   在開發中我們可能在一個文件（films.wxml）中引用其他文件（film-grid-template.wxml）的內容，這是合法的，是高內聚低耦合的必然結果，可是有的時候當我們使用下面的語句的時候，我們的路徑和其他的內容都是完全合法的，可是一直提示出錯了，這點讓我百思不得其解，在網上搜到的都是一些很簡單的東西，根本沒有用，於是我費了好長時間才發現將提示的文件刪除了之后再重新創建就可以了，這應該是微信開發者工具中的一個bug了，在某個特定的場合中出現了，非常的讓人惱火。

   可是隨之而來的又出現了另一個問題，我打算在更上層次的目錄中去引用這兩個模板，於是我使用了和上面類似的引用，各個方面都是沒有問題的，可是就是一直提示引用失敗，沒有從我引用的wxml文件中找到被引用的模板文件，最后浪費了我幾個小時的時間，實在是差不出問題之所在，后來我一氣之下，又新建了一個工程，重新測試一下，這次無論我怎么測試，無論我在哪個文件夾中因為模板文件，只要路徑是正確的都沒有問題，我覺得這是微信小程序的一個重大的bug，造成的原因可能是我創建出了類似文件名或者相同文件名的文件，然后因為某種原因被我刪除了，之后我再次這樣創建，就會產生問題了，因為被我們刪除的文件其實不是真刪除，而是保留了一份副本放在了某個地方，我們還可以恢復的，這樣就不知道出現了這個問題了。

  下面的是我對於第一個問題做的嘗試：

<import src="films-list/films-list-template.wxml" />
<import src="films-grid/films-grid-template.wxml" />

 具體的內容如下：

  films.wxml：

<import src="films-list/films-list-template.wxml" />
<import src="films-grid/films-grid-template.wxml" />
<view class="search">
  <icon type="search" class="search-img" size="13" color="#405f80"></icon>
  <input type="text" placeholder="輸入演員或片名" 
  placeholder-class="placeholder" bindfocus="onBindFocus"
  bindblur="onBindBlur" value='{{searchText}}'/>
  <image wx:if="{{searchPanelShow}}" src="/images/icon/film_search.png" class="film_search_img"  bindtap="onCancelImgTap"></image>
</view>
<view class="container" wx:if="{{containerShow}}">
  <view class="films-template">
    <template is="filmListTemplate" data="{{...inTheaters}}" />
  </view>
  <view class="films-template">
    <template is="filmListTemplate" data="{{...comingSoon}}" />
  </view>
  <view class="films-template">
    <template is="filmListTemplate" data="{{...top250}}"/>
  </view>
</view>
<!-- 點搜索框時顯示，使用grid模板存放搜索結果 -->
<view class="search-panel" wx:if="{{searchPanelShow}}">
    <template is="filmGridTemplate" data="{{...searchResult}}"/>
</view>

  film-grid-template.wxml:

<import src="../film/film-template.wxml" />
<template name="filmGridTemplate">
  <view class="grid-container">
    <block wx:for="{{films}}" wx:for-item="film" wx:key="index">
      <view class="single-view-container">
        <template is="filmTemplate" data="{{...film}}" />
      </view>
    </block>
  </view>
</template>

  film-list-template.wxml:

<import src="../film/film-template.wxml" />
<template name="filmListTemplate">
  <view class="film-list-container">
    <view class="inner-container">
      <view class="film-head">
        <text class="slogan">{{categoryTitle}}</text>
        <view catchtap="onMoreTap" class="more" data-category="{{categoryTitle}}">
          <text class="more-text">更多</text>
          <image class="more-img" src="/images/icon/arrow-right.png"></image>
        </view>
      </view>

      <view class="films-container">
        <scroll-view scroll-x style="width: 100%">
          <block wx:for="{{films}}" wx:for-item="film" wx:key="key">
            <template is="filmTemplate" data="{{...film}}" />
          </block>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

     3.2、使用微信自己封裝的wx.request()方法的時候不能聯網

    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function (res) {
        wx.showToast({
          title: '成功',
          icon: 'success',
          duration: 1000,
          mask: true
        })
        that.processDoubanData(res.data, settedKey, categoryTitle)
      },
      fail: function (error) {
        wx.showToast({
          title: '失敗',
          icon: 'loading',
          duration: 10000,
          mask: true
        })
        console.log(error)
      }
    })

       這個問題困擾了很長時間，經過一步步的排錯總算是定位到了這個問題，這個問題的本質是調用豆瓣官方API中給的數據來進行處理，於是訪問了相關的鏈接，為了測試鏈接是否可行，我還在火狐瀏覽器中進行了實驗，一點問題都沒有，完全可以訪問到相應的數據，可是在該函數中就是沒有一點反應，想了很多辦法，通過上面程序的toast，我看到程序走向了fail方法體中，我就知道肯定沒有獲得數據，可是沒有道理呀！！！

   於是我打開了監視器，我看到程序執行到這里根本就沒有發送任何請求，感情真的是沒有發送請求呀，那又怎么會成功呢？！於是我在網上搜了很多原因，最后總算是定位到了，在使用微信提供的這個方法的時候一定要注意注冊並配置域名服務器，其實這個設定是合理的，因為我們的小程序發布了，肯定是需要服務器資源的，可是我現在還在開發階段呀，只是想測試一下程序是不是可行的，於是我又搜了很多的東西，最后總算發現，原來在微信開發者工具中我們可以設定在運行wx.request()方法的時候是不是需要進行域名的審查和一些其他的操作，到了這里我總算豁然開朗了，於是進行了設置，果然可以成功訪問網頁了。

 

  免域名測試實驗：

  我們在微信開發者工具中，點擊“詳情”就可以看到在最下面有一個項目設置，在這里我們將最后一個選項勾起來，“不校驗合法域名、web-view業務域名、TLS版本以及HTTPS證書”，這樣我們就可以正常訪問外部服務器了，這點是微信最坑爹的地方，特別是對於初學者，這是非常打擊人的，為了讓大家購買騰訊雲的域名吧，才會出此下策，按理說應該替我們勾選起來的！！！！！！

   下面是正常的狀態：

 

    3.3、wx.request()方法訪問豆瓣API的時候出現403錯誤

    這個錯誤是隨着時間變遷的，在以前豆瓣開放了https://api.douban.com這個接口，可以讓我們訪問電影數據，可是因為訪問的人數非常多，豆瓣做了一定的限制，我們通過瀏覽器還是可以繼續訪問的，可是如果使用微信的wx.request()方法卻無能為力了，會報403錯誤，一種方法是我們使用代理服務器，模擬成瀏覽器（人）去訪問，另一種辦法就是我們只能另尋他途了，不過好在我在網上找到了兩個這樣的代理或者數據源吧，通過這兩個數據源，我們可以通過相應的參數去訪問豆瓣的資源，非常的方便，但是也是有使用的次數的，只能供我們學習的時候使用吧。

http://t.yushu.im 2 https://douban.uieee.com

   上面就是這兩個珍貴的數據源，親測在（2018/5/9）還可以使用的，以后怎么樣就不知道了。我們在這兩個網址后面加入一定的參數就可以訪問了等於是完全替代了以前豆瓣的網址，不過數據的格式可能有所不同。

http://t.yushu.im/v2/movie/in_theaters?start=0&count=6 2 https://douban.uieee.com/v2/movie/in_theaters?start=0&count=6

  截圖如下：

四、總結

    通過對小程序的認識和實踐，我發現開發工具在某種程度上還是有待進步的，比如說斷點調試、那些莫名的找不到文件而實際文件卻存在錯誤、智能提示等等，當然了作為微信自己開發的工具總體來說還是不錯的，這種創新，這種造輪子本來就是值得佩服的！這個解耦方法