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

微信小程序初學踩過的坑

1、前言

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

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

 2.一、建立一個小程序

2.二、開發工具的瞭解

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

2.三、文件結構分析

    咱們能夠看到系統默認爲給咱們分了一些目錄，在這些目錄中，咱們能夠進行相應的編輯，首先是我剛剛說過的那些全局目錄，咱們能夠在官網上進行學習。其次就是pages這個最重要的開發目錄了，咱們的全部邏輯都要放在裏面，裏面默認分了index首頁目錄和logs日誌目錄。另外還有一個工具目錄，這也是常識了，能夠方便的進行訪問。根據咱們的須要咱們還可能在外面在創造資源目錄，好比images等等，而且在pages裏面咱們還能夠創造本身目錄來完成相應的操做。

3、微信小程序常見問題

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

  3.一、文件路徑在某個文件中找不到

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

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

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

1 <import src="films-list/films-list-template.wxml" />
2 <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:

 1 <import src="../film/film-template.wxml" />
 2 <template name="filmListTemplate">
 3   <view class="film-list-container">
 4     <view class="inner-container">
 5       <view class="film-head">
 6         <text class="slogan">{{categoryTitle}}</text>
 7         <view catchtap="onMoreTap" class="more" data-category="{{categoryTitle}}">
 8           <text class="more-text">更多</text>
 9           <image class="more-img" src="/images/icon/arrow-right.png"></image>
10         </view>
11       </view>
12 
13       <view class="films-container">
14         <scroll-view scroll-x style="width: 100%">
15           <block wx:for="{{films}}" wx:for-item="film" wx:key="key">
16             <template is="filmTemplate" data="{{...film}}" />
17           </block>
18         </scroll-view>
19       </view>
20     </view>
21   </view>
22 </template>

     3.二、使用微信本身封裝的wx.request()方法的時候不能聯網

 1     wx.request({
 2       url: url,
 3       method: 'GET',
 4       header: {
 5         "Content-Type": "json"
 6       },
 7       success: function (res) {
 8         wx.showToast({
 9           title: '成功',
10           icon: 'success',
11           duration: 1000,
12           mask: true
13         })
14         that.processDoubanData(res.data, settedKey, categoryTitle)
15       },
16       fail: function (error) {
17         wx.showToast({
18           title: '失敗',
19           icon: 'loading',
20           duration: 10000,
21           mask: true
22         })
23         console.log(error)
24       }
25     })

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

   因而我打開了監視器，我看到程序執行到這裏根本就沒有發送任何請求，感情真的是沒有發送請求呀，那又怎麼會成功呢？！因而我在網上搜了不少緣由，最後總算是定位到了，在使用微信提供的這個方法的時候必定要注意註冊並配置域名服務器，其實這個設定是合理的，由於咱們的小程序發佈了，確定是須要服務器資源的，但是我如今還在開發階段呀，只是想測試一下程序是否是可行的，因而我又搜了不少的東西，最後總算髮現，原來在微信開發者工具中咱們能夠設定在運行wx.request()方法的時候是否是須要進行域名的審查和一些其餘的操做，到了這裏我總算豁然開朗了，因而進行了設置，果真能夠成功訪問網頁了。

 

  免域名測試實驗：

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

   下面是正常的狀態：

 

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

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

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

   上面就是這兩個珍貴的數據源，親測在（2018/5/9）還可使用的，之後怎麼樣就不知道了。咱們在這兩個網址後面加入必定的參數就能夠訪問了等因而徹底替代了之前豆瓣的網址，不過數據的格式可能有所不一樣。

1 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

  截圖以下：

4、總結

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