距離微信小程序內(nei) 測版發布已經有十幾天的時間了，網上對微信小程序的討論也異常火爆，從(cong) 發布到現在微信小程序一直占領著各種技術論壇的頭條，當然各種平台也對微信小程序有新聞報道，畢竟騰訊在國內(nei) 影響力還是很大的。我們(men) 都知道微信小程序第一天發布內(nei) 測版，並沒有公開官方開發文檔和開發工具，但是這阻止不了技術人的好奇心。
因為(wei) 自己對小程序也是很有興(xing) 趣的，感覺是很有意思的一個(ge) 東(dong) 西，所以立馬做了一下小demo，水平有限，所以做的過程也就是一個(ge) 學習(xi) 的過程，一個(ge) 提高的過程。
這篇文章主要寫(xie) 我在寫(xie) demo的過程中遇到的一些問題。如果閱讀此文的你有一定幫助，很是欣慰。
微信小程序項目結構主要有四個(ge) 文件類型,如下
WXML （WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件係統，可以構建出頁麵的結構。內(nei) 部主要是微信自己定義(yi) 的一套組件。
WXSS (WeiXin Style Sheets)是一套樣式語言，用於(yu) 描述 WXML 的組件樣式，
js 邏輯處理，網絡請求
json 小程序設置，如頁麵注冊(ce) ，頁麵標題及tabBar。
注意：為(wei) 了方便開發者減少配置項，規定描述頁麵的這四個(ge) 文件必須具有相同的路徑與(yu) 文件名。
在根目錄下用app來命名的這四中類型的文件，就是程序入口文件。
app.json
必須要有這個(ge) 文件，如果沒有這個(ge) 文件，項目無法運行，因為(wei) 微信框架把這個(ge) 作為(wei) 配置文件入口，整個(ge) 小程序的全局配置。包括頁麵注冊(ce) ，網絡設置，以及小程序的window背景色，配置導航條樣式，配置默認標題。
app.js
必須要有這個(ge) 文件，沒有也是會(hui) 報錯！但是這個(ge) 文件創建一下就行 什麽(me) 都不需要寫(xie)
以後我們(men) 可以在這個(ge) 文件中監聽並處理小程序的生命周期函數、聲明全局變量。
app.wxss
全局配置的樣式文件，項目非必須。
知道小程序基本文件結構，就可以開始研究官方demo了，研究過程中如果有不明白的地方可以去官方文檔尋求答案，如果找不到答案或者有疑問，可再此博客留言，相互交流。下麵介紹下出現概率較高的幾個(ge) 問題。
微信小程序新定義(yi) 了一個(ge) 尺寸單位，可以適配不同分辨率的屏幕，它規定屏幕寬為(wei) 750rpx，如在 iphoness6 上，屏幕寬度為(wei) 375px，共有750個(ge) 物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
這個(ge) 項目我用的都是rpx尺寸單位，期間遇到一個(ge) 很奇葩的問題。在相鄰的兩(liang) 條信息直接都會(hui) 有一個(ge) 分割線，我將線的高度都設置成1rpx,但是不有個(ge) 別分割線是不顯示的，如下圖
看到沒在第一條和第二條直接並沒有現實這條線，但是其他的都展示了，分割線的屬性是一樣的，而且在不同的手機上（分辨率不同）不顯示的分割線也是不同的，有的分辨率好幾條分割線都不顯示，不知道這是模擬器的bug還是rpx的bug。最後分割線的高度尺寸單位使用了px,解決(jue) 了這個(ge) 問題。
在微信小程序剛出來的時候如果輸入AppID提示這個(ge) 信息就表示沒有破解，但是現在官方軟件更新可以選擇無AppID開發，如下圖，我們(men) 之間選擇無AppID，即可解決(jue) 此錯誤。建議安裝官方開發工具。可去此處找下載鏈接。
微信小程序創建項目時選擇無AppID，創建項目時會(hui) 生成app.json，app.josn是程序啟動最重要的文件，程序的頁麵注冊(ce) ，窗口設置，tab設置及網絡請求時間設置都是在此文件下的。如果你創建的項目目錄下沒有app.json文件就會(hui) 報下麵的錯誤。
我們(men) 看到上麵的錯誤信息中有個(ge) 數字-4058，這應該是初入微信小程序遇到最多的錯誤了，這種一般都是文件缺失，後麵有個(ge) path，可以對著該路徑看看是否存在這個(ge) 文件。造成這種錯誤的原因一般都是創建項目選擇的目錄不正確，或者在app.json注冊(ce) 了一個(ge) 不存在的頁麵。
當然還有一種情況就是在app.json文件的pages注冊(ce) 的頁麵是沒有創建的，或者你刪除了某個(ge) 頁麵，但是沒有取消注冊(ce) 也會(hui) 是-4058錯誤。
這個(ge) 錯誤可能很容易理解，頁麵注冊(ce) 錯誤。頁麵是通過Page對象來渲染的，每個(ge) 頁麵對應的js文件必須要創建page，最簡單的方式就是在js文件下寫(xie) 入Page({})，在page中有管理頁麵渲染的生命周期，以及數據處理，事件都在這完成。這個(ge) 錯誤引起的原因一般都是剛創建頁麵，js文件還有有處理或者忘了處理。所以要養(yang) 成創建頁麵的同時在js文件先創建Page的習(xi) 慣.
字麵意思就是頁麵路由錯誤，在微信中有兩(liang) 種路由方式一種是在wxml文件使用
如下代碼：
wxml文件：
js文件事件處理函數：
bindtap:function(event){
wx.navigateTo({
url: “search/search”
})
}
如果你這樣寫(xie) 的話，恭喜你，你就會(hui) 看到上麵提示的錯誤，這是因為(wei) 重複調用路由引起的，處理方法就是刪除一個(ge) 路由，刪除
<navigator url="search/search">
<navigator url="search/search">
<view class="serach_view_show" bindtap="bindtap"> 搜索</view>
</navigator>
</navigator>
這種也是不允許的，也就是說
大概意思就是當前頁麵沒有此處理，讓確定是否已經定義(yi) ，還指出了錯誤出現的可能位置pages/message/message,其實這種問題出現一般就是我們(men) 在wxml定義(yi) 了一些處理事件，但是在js文件中沒有實現這個(ge) 時事件的處理方法，就會(hui) 出現這個(ge) 錯誤。那麽(me) 我們(men) 按提示在js文件加上事件處理，如下代碼，加上後就不會(hui) 再有此錯誤提示。
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
},
對於(yu) tabBar不顯示，原因有很多，查找這個(ge) 錯誤直接去app.json這個(ge) 文件，最常見的也是剛學習(xi) 微信小程序最容易犯的錯誤無外乎下麵幾種
注冊(ce) 頁麵即將頁麵寫(xie) 到app.json的pages字段中，如
"pages":[
"pages/message/message",
"pages/contact/contact",
"pages/dynamic/dynamic",
"pages/dynamic/music/music",
"pages/index/index",
"pages/logs/logs"
]
tabBar寫(xie) 法錯誤導致的不顯示，將其中的大寫(xie) 字母B寫(xie) 成小寫(xie) ，導致tabBar不顯示。
tabBar的list中沒有寫(xie) pagePath字段，或者pagePath中的頁麵沒有注冊(ce)
tabBar的list的pagePath指定的頁麵沒有寫(xie) 在注冊(ce) 頁麵第一個(ge) 。微信小程序的邏輯是”pages”中的第一個(ge) 頁麵是首頁，也就是程序啟動後第一個(ge) 顯示的頁麵，如果tabBar的list的pagePath指定的頁麵都不是pages的第一個(ge) ，當然也就不會(hui) 電視tabBar了。
tabBar的數量低於(yu) 兩(liang) 項或者高於(yu) 五項，微信官方中明確規定tabBar的至少兩(liang) 項最多五項。超過或者少於(yu) 都不會(hui) 顯示tabBar。
通過這個(ge) 動態圖你應該發現問題了，當點擊音樂(le) 進入音樂(le) 界麵時，title先顯示了WeChatForQQ然後顯示的音樂(le) ，這個(ge) 體(ti) 驗肯定是難以接受的，原因是音樂(le) 界麵的title是在js文件中page的生命周期方法中設置的。
若你不了解生命周期，可以點擊查看
Page({
data:{
// text:”這是一個(ge) 頁麵”
},
onLoad:function(options){
// 頁麵初始化 options為(wei) 頁麵跳轉所帶來的參數
},
onReady:function(){
// 頁麵渲染完成
//NavigationBarTitle如果此處和json文件都設置，最後展示此處的標題欄
wx.setNavigationBarTitle({
title: '音樂(le) '
})
},
onShow:function(){
// 頁麵顯示
},
onHide:function(){
// 頁麵隱藏
},
onUnload:function(){
// 頁麵關(guan) 閉
}
})
通過注釋你應該明白了，設置標題寫(xie) 在了onReady方法中，也就是頁麵已經渲染完成了，在onReady之前顯示的title就是json文件（覆蓋關(guan) 係，如果在子頁麵json文件設置title會(hui) 覆蓋app.json全局設置）中的title。可能你會(hui) 說將wx.setNavigationBarTitle寫(xie) 在onLoad函數中，不過如果這樣設置是不對的，因為(wei) onLoad執行過後才渲染頁麵，在渲染頁麵時title會(hui) 從(cong) json文件中讀取，導致onLoad設置的title會(hui) 隻在頁麵渲染之前展示，之後就顯示json文件的tile，所以現在你應該明白ttle設置最優(you) 的地方就是給子文件寫(xie) 一個(ge) json文件，在文件中寫(xie) 入，如果想改變顏色直接在文件中添加就可以，該文件所寫(xie) 的屬性值會(hui) 覆蓋app.json中設置的值。
{
“navigationBarTitleText”: “音樂(le) ”
}
一個(ge) 應用同時隻能打開5個(ge) 頁麵，當已經打開了5個(ge) 頁麵之後，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生命周期有一個(ge) onLoad函數，它就是做一些初始化數據的工作，onLoad函數有一個(ge) 參數options，我們(men) 就可以通過key將數據獲取，如下
/** 作者：dushao
* 新浪微博：https://weibo.com/dushaoxiaoxiao
* 博客 : https://www.takozhang.cn
* */
*
Page({
data:{
// text:"這是一個(ge) 頁麵"
isHiddenToast:true
}
onLoad:function(options){
// 頁麵初始化 options為(wei) 頁麵跳轉所帶來的參數
console.log(options.title)
console.log(options.message) },
onReady:function(){
// 頁麵渲染完成
},
onShow:function(){
// 頁麵顯示
},
onHide:function(){
// 頁麵隱藏
},
onUnload:function(){
// 頁麵關(guan) 閉
},
bindtap:function(event){
wx.navigateTo({
url: "/pages/message/search/search"
})
},
})
這樣就實現了頁麵間數據傳(chuan) 遞功能。
服務項目
網站首頁
TEL：021-61554458
立即谘詢