高仿QQ小程式，我趟過的坑

碼個蛋發表於2016-10-10

/** 作者：Code4Android

距離微信小程式內測版釋出已經有十天的時間了，網上對微信小程式的討論也異常火爆，從釋出到現在微信小程式一直佔領著各種技術論壇的頭條，當然各種平臺也對微信小程式有新聞報導，畢竟騰訊在國內影響力還是很大的。我們都知道微信小程式第一天釋出內測版，並沒有公開官方開發文件和開發工具，但是這阻止不了技術人的好奇心，通過破解以及先安裝舊版本再用新版本覆蓋安裝一系列流程，即可體驗微信小程式的魅力，當時為了使更少的人少走彎路，於是自己就寫了微信小程式開發環境搭建一文。不過在文章釋出第二天微信官方正式釋出了官方文件，並且更新了開發工具，無·appid也可以體驗小程式的開發。
因為自己對小程式也是很有興趣的，感覺是很有意思的一個東西，所以以QQ練手，做一個高仿QQ的微信小程式，由於本人是Android開發者，平時很少接觸前端的一些東西，水平有限，所以程式碼很多地方是不規範的，做的過程也就是一個學習的過程，一個提高的過程。

這篇文章主要寫我在SmallAppForQQ這個專案進展的過程中遇到的一些問題。如果閱讀此文的你有一定幫助，很是欣慰，歡迎star專案。

SmallAppForQQ原始碼

開發工具

官方demo

專案結構

文章開頭，先簡單介紹下專案結構，若沒有安裝開發工具，可去GitHub:github.com/xiehui999/S… 下載。微信小程式專案結構主要有四個檔案型別,如下

  • WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎元件、事件系統，可以構建出頁面的結構。內部主要是微信自己定義的一套元件。

  • WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的元件樣式，

  • js 邏輯處理，網路請求

  • json 小程式設定，如頁面註冊，頁面標題及tabBar。

注意：為了方便開發者減少配置項，規定描述頁面的這四個檔案必須具有相同的路徑與檔名。

在根目錄下用app來命名的這四中型別的檔案，就是程式入口檔案。

  • app.json
    必須要有這個檔案，如果沒有這個檔案，專案無法執行，因為微信框架把這個作為配置檔案入口，整個小程式的全域性配置。包括頁面註冊，網路設定，以及小程式的window背景色，配置導航條樣式，配置預設標題。

  • app.js
    必須要有這個檔案，沒有也是會報錯！但是這個檔案建立一下就行 什麼都不需要寫
    以後我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。

  • app.wxss
    全域性配置的樣式檔案，專案非必須。

知道小程式基本檔案結構，就可以開始研究官方demo了，研究過程中如果有不明白的地方可以去官方文件尋求答案，如果找不到答案或者有疑問，可再此部落格留言，相互交流。下面介紹下出現概率較高的幾個問題。

常見問題

rpx（responsive pixel）

微信小程式新定義了一個尺寸單位，可以適配不同解析度的螢幕，它規定螢幕寬為750rpx，如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。

高仿QQ小程式，我趟過的坑

這個專案我用的都是rpx尺寸單位，期間遇到一個很奇葩的問題。在相鄰的兩條資訊直接都會有一個分割線，我將線的高度都設定成1rpx,但是不有個別分割線是不顯示的，如下圖

高仿QQ小程式，我趟過的坑

看到沒在第一條和第二條直接並沒有現實這條線，但是其他的都展示了，分割線的屬性是一樣的，而且在不同的手機上（解析度不同）不顯示的分割線也是不同的，有的解析度好幾條分割線都不顯示，不知道這是模擬器的bug還是rpx的bug。最後分割線的高度尺寸單位使用了px,解決了這個問題。

40013錯誤

高仿QQ小程式，我趟過的坑

在微信小程式剛出來的時候如果輸入AppID提示這個資訊就表示沒有破解，但是現在官方軟體更新可以選擇無AppID開發，如下圖，我們之間選擇無AppID，即可解決此錯誤。建議安裝官方開發工具。可去此處找下載連結。

高仿QQ小程式，我趟過的坑

-4058錯誤

微信小程式建立專案時選擇無AppID，建立專案時會生成app.json，app.josn是程式啟動最重要的檔案，程式的頁面註冊，視窗設定，tab設定及網路請求時間設定都是在此檔案下的。如果你建立的專案目錄下沒有app.json檔案就會報下面的錯誤。

高仿QQ小程式，我趟過的坑

我們看到上面的錯誤資訊中有個數字-4058，這應該是初入微信小程式遇到最多的錯誤了，這種一般都是檔案缺失，後面有個path，可以對著該路徑看看是否存在這個檔案。造成這種錯誤的原因一般都是建立專案選擇的目錄不正確，或者在app.json註冊了一個不存在的頁面。
當然還有一種情況就是在app.json檔案的pages註冊的頁面是沒有建立的，或者你刪除了某個頁面，但是沒有取消註冊也會是-4058錯誤。

Page註冊錯誤

高仿QQ小程式，我趟過的坑

這個錯誤可能很容易理解，頁面註冊錯誤。頁面是通過Page物件來渲染的，每個頁面對應的js檔案必須要建立page，最簡單的方式就是在js檔案下寫入Page({})，在page中有管理頁面渲染的生命週期，以及資料處理，事件都在這完成。這個錯誤引起的原因一般都是剛建立頁面，js檔案還有有處理或者忘了處理。所以要養成建立頁面的同時在js檔案先建立Page的習慣.

Page route錯誤

高仿QQ小程式，我趟過的坑

字面意思就是頁面路由錯誤，在微信中有兩種路由方式一種是在wxml檔案使用元件，一種是呼叫wx.navigateTo。
如下程式碼：

wxml檔案：

<navigator url="search/search">
<view class="serach_view_show" bindtap="bindtap"> 搜尋</view>
</navigator>複製程式碼

js檔案事件處理函式：

  bindtap:function(event){
wx.navigateTo({
  url: "search/search"
})
  }複製程式碼

如果你這樣寫的話，恭喜你，你就會看到上面提示的錯誤，這是因為重複呼叫路由引起的，處理方法就是刪除一個路由，刪除元件或者刪除wx.navigateTo。除了上面說的可能導致路由錯誤外，還有一種情況，類似於下面的程式碼

<navigator url="search/search">
<navigator url="search/search">
<view class="serach_view_show" bindtap="bindtap"> 搜尋</view>
</navigator>
</navigator>複製程式碼

這種也是不允許的，也就是說元件內部不能再巢狀元件。它只能是單層存在的。

Do not have * handler in current page.

高仿QQ小程式，我趟過的坑

大概意思就是當前頁面沒有此處理，讓確定是否已經定義，還指出了錯誤出現的可能位置pages/message/message,其實這種問題出現一般就是我們在wxml定義了一些處理事件，但是在js檔案中沒有實現這個時事件的處理方法，就會出現這個錯誤。那麼我們按提示在js檔案加上事件處理，如下程式碼，加上後就不會再有此錯誤提示。

  bindtap:function(event){
wx.navigateTo({
  url: "search/search"
})
  },複製程式碼

tabBar設定不顯示

對於tabBar不顯示，原因有很多，查詢這個錯誤直接去app.json這個檔案，最常見的也是剛學習微信小程式最容易犯的錯誤無外乎下面幾種

註冊頁面即將頁面寫到app.json的pages欄位中，如

 "pages":[

    "pages/message/message",
    "pages/contact/contact",
    "pages/dynamic/dynamic",
     "pages/dynamic/music/music",
    "pages/index/index",
    "pages/logs/logs"
  ]複製程式碼

  • tabBar寫法錯誤導致的不顯示，將其中的大寫字母B寫成小寫，導致tabBar不顯示。

  • tabBar的list中沒有寫pagePath欄位，或者pagePath中的頁面沒有註冊

  • tabBar的list的pagePath指定的頁面沒有寫在註冊頁面第一個。微信小程式的邏輯是"pages"中的第一個頁面是首頁，也就是程式啟動後第一個顯示的頁面，如果tabBar的list的pagePath指定的頁面都不是pages的第一個，當然也就不會電視tabBar了。

  • tabBar的數量低於兩項或者高於五項，微信官方中明確規定tabBar的至少兩項最多五項。超過或者少於都不會顯示tabBar。

navigationBarTitle顯示問題

高仿QQ小程式，我趟過的坑
這裡寫圖片描述

通過這個動態圖你應該發現問題了，當點選音樂進入音樂介面時，title先顯示了WeChatForQQ然後顯示的音樂，這個體驗肯定是難以接受的，原因是音樂介面的title是在js檔案中page的生命週期方法中設定的。
若你不瞭解生命週期，可以點選檢視

Page({
  data:{
    // text:"這是一個頁面"
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的引數

  },
  onReady:function(){
    // 頁面渲染完成
    //NavigationBarTitle如果此處和json檔案都設定，最後展示此處的標題欄
wx.setNavigationBarTitle({
  title: '音樂'
})
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})複製程式碼

通過註釋你應該明白了，設定標題寫在了onReady方法中，也就是頁面已經渲染完成了，在onReady之前顯示的title就是json檔案（覆蓋關係，如果在子頁面json檔案設定title會覆蓋app.json全域性設定）中的title。可能你會說將wx.setNavigationBarTitle寫在onLoad函式中，不過如果這樣設定是不對的，因為onLoad執行過後才渲染頁面，在渲染頁面時title會從json檔案中讀取，導致onLoad設定的title會只在頁面渲染之前展示，之後就顯示json檔案的tile，所以現在你應該明白ttle設定最優的地方就是給子檔案寫一個json檔案，在檔案中寫入，如果想改變顏色直接在檔案中新增就可以，該檔案所寫的屬性值會覆蓋app.json中設定的值。

{
    "navigationBarTitleText": "音樂"
}複製程式碼

wx.navigateTo無法開啟頁面

一個應用同時只能開啟5個頁面，當已經開啟了5個頁面之後，wx.navigateTo不能正常開啟新頁面。請避免多層級的互動方式，或者使用wx.redirectTo

本地資源無法通過 css 獲取

background-image：可以使用網路圖片，或者 base64，或者使用標籤

頁面間資料傳遞

微信小程式路由（頁面跳轉）是通過API wx.navigateTo或者wxml中元件實現的，不管哪種實現都會有一個重要的引數就是url，它指定了要跳轉的頁面，並且頁面之間資料傳遞也是通過url來實現的，這個資料傳遞有點類似於我們使用的get網路請求，把引數都拼接在要跳轉介面地址的後面並以“？”連線。然後將要傳入的資料以鍵和值的形式追加在"?"後面，多個引數直接用"&"符合。如我們點選訊息聊天記錄，將列表上的資料傳到下一個頁面，可以這樣寫。

 <navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
          <view class="item" >
             <view class="item-left">
                  <image src="{{item.url}}" class="image"/>
             </view>
             <view class="item-middle">
                  <view>
                       <text class="title">{{item.title}}</text>
                  </view>
                  <view>
                      <text class="message">{{item.message}}</text>
                  </view>
            </view>
            <view class="item_right">
                <view><text class="time">{{item.time}}</text></view>
                <view class="mark" wx:if="{{item.count>0}}"><text class="text">{{item.count}}</text></view>
            </view>
         </view>
         <view  class="line"></view>
       </navigator>複製程式碼

而資料接收是在js檔案的page裡接收的，page生命週期有一個onLoad函式，它就是做一些初始化資料的工作，onLoad函式有一個引數options，我們就可以通過key將資料獲取，如下

/**  作者：Code4Android
 *   專案地址：https://github.com/xiehui999/SmallAppForQQ
 *   新浪微博：http://weibo.com/745687294
 *   CSDN  :    http://blog.csdn.net/xiehuimx?viewmode=contents
 *   簡書   :   http://www.jianshu.com/users/d5b531888b2b/latest_articles
 * */
Page({
  data:{
    // text:"這是一個頁面"
    isHiddenToast:true
  }
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的引數
    console.log(options.title)
     console.log(options.message)

  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  },
  bindtap:function(event){
wx.navigateTo({
  url: "/pages/message/search/search"
})
  },
})複製程式碼

這樣就實現了頁面間資料傳遞功能。

好了，今天就寫到這了後期若遇到微信小程式其它一些問題，我會追加到此文，若你在開發過程中遇到比較坑的問題已經解決方案，可在本文評論，方便大家。謝謝支援。

相關文章