微信小程序開發時的常見問題

微信小程序開發常見問題？

一：項目結構

微信小程序項目結構主要有四個文件類型,以下

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物理像素。

這個項目我用的都是rpx尺寸單位，期間遇到一個很奇葩的問題。在相鄰的兩條信息直接都會有一個分割線，我將線的高度都設置成1rpx,可是不有個別分割線是不顯示的

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

40013錯誤

在微信小程序剛出來的時候若是輸入AppID提示這個信息就表示沒有破解，可是如今官方軟件更新能夠選擇無AppID開發，以下圖，咱們之間選擇無AppID，便可解決此錯誤。建議安裝官方開發工具。可去此處找下載連接。

4058錯誤

微信小程序建立項目時選擇無AppID，建立項目時會生成app.json，app.josn是程序啓動最重要的文件，程序的頁面註冊，窗口設置，tab設置及網絡請求時間設置都是在此文件下的。若是你建立的項目目錄下沒有app.json文件就會報下面的錯誤。

咱們看到上面的錯誤信息中有個數字-4058，這應該是初入微信小程序遇到最多的錯誤了，這種通常都是文件缺失，後面有個path，能夠對着該路徑看看是否存在這個文件。形成這種錯誤的緣由通常都是建立項目選擇的目錄不正確，或者在app.json註冊了一個不存在的頁面。
固然還有一種狀況就是在app.json文件的pages註冊的頁面是沒有建立的，或者你刪除了某個頁面，可是沒有取消註冊也會是-4058錯誤。

Page註冊錯誤

這個錯誤可能很容易理解，頁面註冊錯誤。頁面是經過Page對象來渲染的，每一個頁面對應的js文件必需要建立page，最簡單的方式就是在js文件下寫入Page({})，在page中有管理頁面渲染的生命週期，以及數據處理，事件都在這完成。這個錯誤引發的緣由通常都是剛建立頁面，js文件還有有處理或者忘了處理。因此要養成建立頁面的同時在js文件先建立Page的習慣.

Page route錯誤

字面意思就是頁面路由錯誤，在微信中有兩種路由方式一種是在wxml文件使用

以下代碼：
wxml文件：

js文件事件處理函數：

bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}
若是你這樣寫的話，恭喜你，你就會看到上面提示的錯誤，這是由於重複調用路由引發的，處理方法就是刪除一個路由，刪除

<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.

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

bind:function(event){
wx.navigateTo({
url: "
pages/logs/logs
"
})
},
tabBar設置不顯示

對於tabBar不顯示，緣由有不少，查找這個錯誤直接去app.json這個文件，最多見的也是剛學習微信小程序最容易犯的錯誤無外乎下面幾種
註冊頁面即將頁面寫到app.json的pages字段中，如

"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/account/account",
"pages/more/more"
],
tabBar寫法錯誤致使的不顯示，將其中的大寫字母B寫成小寫，致使tabBar不顯示。
tabBar的list中沒有寫pagePath字段，或者pagePath中的頁面沒有註冊
tabBar的list的pagePath指定的頁面沒有寫在註冊頁面第一個。微信小程序的邏輯是"pages"中的第一個頁面是首頁，也就是程序啓動後第一個顯示的頁面，若是tabBar的list的pagePath指定的頁面都不是pages的第一個，固然也就不會電視tabBar了。
tabBar的數量低於兩項或者高於五項，微信官方中明確規定tabBar的至少兩項最多五項。超過或者少於都不會顯示tabBar。

navigationBarTitle顯示問題

經過這個動態圖你應該發現問題了，當點擊音樂進入音樂界面時，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中

<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將數據獲取，以下

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(){
// 頁面關閉
},
bind:function(event){
wx.navigateTo({
url: "
pages/logs/logs
"
})
},
})

本文來源：成都多享科技小程序