微信小程式開發（四）小程式開發實作指南

找到建立的 demo 資料夾，把專案匯入到你的編輯器，這裡使用的是Sublime Text編輯器。

這個時候需要根據自己的專案需求結構進行更改了，專案根目錄下面是首頁渲染的幾個tabBar 頁面，以及app 的一些配置文件，如名片盒項目的tabBar 是3 個切換菜單

我們先找到app.json 檔案打開配置好這幾個選單，設定好tabBar，這個直接把設定檔改成你自己設計的即可。

App.json 裡面有幾個設定項：

• Pages：這個是寫好的js文件，後綴.js這裡不需要使用，配置好正確路徑即可正常呼叫（若呼叫不到，在重啟微信開發者工具會直接報page 錯誤）。 Window：配置頂部的一些樣式，文件介紹比較詳細。 tabBar：底部的幾項配置，請參閱名知意。 networkTimeout：暫時沒發現用處，建議看文件。根據實際專案需求進行新增與變更。 iconPath和selectedIconPath：底部選單按鈕圖片與得到切換點擊高亮。 * text：可以去掉，全部去掉會發現底部 tabar 高度會減少很多。

Json 檔案配置好後，根據專案進行檔案建立。 Demo：存放的是假數據，這一期的開發工具支援require，假數據使用的是.js 檔案形式，裡面的資料結構json 一致，把data 暴露出去即可

#然後取資料require 進來即可，這一點使用很方便；Images：圖片路徑；Page：除tabar 以外的頁面；Servise：服務交付層（與後台聯調真實數據時使用）； Wxss：一些公共的css 文件；看到這裡大家發現每個頁面都被連帶好三個不同的後綴。分別頁面，css，js 目前只能依照這樣，是微信應用程式號碼的規範吧。

Wxss 文件是引入你寫的樣式文件，也可以直接在裡面寫樣式。

Js 檔案需全部配置到 pages 裡面才能生效。

下一章：微信小程式首頁開發。

第四章 微信小程式首頁開發

進行了各種準備與設定後，來到首頁開發。首先需要實作首頁效果圖如下：

##Template 名片很多，需要用模板、 這裡需要微信提供的基礎元件大致是input（搜尋框）、action-sheet（右邊是底部下拉選單，需要下拉選單）、 Scroll-view (右邊ABC跳轉)、（這個目前實現還有點問題，正在攻克中）。

View是塊元素，整個搜尋框的一個樣式。

• 名片夾：由於專案主打名片功能，故很多地方使用，所以需要把名片以 template 分離出來。 Template：定義一個模板，name 模板的名字其實是個作用域。 Block：循環控制，名片很多，必須用循環出來，跟很多操作數據的前端框架循環差不多。

  支援自訂屬性 data，這裡用作判斷線上名片以及線下名片。
View 裡面是一些資料引入，裡面是支援三目運算子。

引入 template 時非常方便，is 和name 一樣，data 是 nameData 傳遞過來的資料填充。

###一切都綁定資料為中心點。 ###

取到資料具體操作根據你資料結構：

這裡的資料結構和json 數據結構一樣，

這裡如要傳到頁面的話即是

this.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data({nameData:card_list_name.data.cards,timeData:card_list_time .data.cards});

因為頁面遍歷的是nameData,timeData

可以看下列印出來的資料結構，根據你的結構進行解析與傳遞。

也可以看下這裡對資料的一些操作。 （這裡須根據定義的json 資料格式來操作的）

#名片的樣式由於很多頁面需要使用放在common.css 裡面，這個common.css是所有頁面都需要用到，一些初始化設定。它是在 app.wxss 裡面引用之後才能被映射到全域 APP。

搜尋方塊：其中 bindChange 會改變輸入框

#。微信提供的 bindchange 在支援方面還有小問題，目前是失去焦點才能觸發到此事件的發生，待後續完善吧，先實現功能再說。

在index.js 裡面寫事件

bindInputChange:function(e){ //发生搜索事情var self = this; //this绑定，这个this指向微信的提供window var Text = e.detail.value.toUpperCase(); //取到输入的内容if(Text==""){ //如果输入为空 一些东西需要显示 否则不显示show_letter = "block"; }else{show_letter = "none";}this.setData({show_letter:show_letter, showSheet:true});var res = nameData; 获取到传递的数据if(data_type=="name"){}else if(data_type=="time"){res = timeData; };for(var k in res){ //for-in循环取到data里面的cardsvar data = res[k].cards; for(var i = 0;iIf(data[i].userName!=null && data[i].userName.indexOf(Text)!=-1){ data[i]["display"] = "block"; //存在就是赋值显示}else{data[i]["display"] = "none"; // 不存在赋值不显示}}}}

選單列：做到選單欄，使用微信提供的下拉選單元件action-sheet，它被觸發的條件在這裡。

一切以綁定事件為起點：

还是得先布好局才能被调动

![](http://upload-images.jianshu.io/upload_images/3113151-700fe4381ecb70c1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Js 配置：

![](http://upload-images.jianshu.io/upload_images/3113151-a29c120dbfb3e6ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Data 初始化数据：

![](http://upload-images.jianshu.io/upload_images/3113151-7ac34cbc72e90e98.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里得取非，直接设置 false 调不出来: 调用事件。

![](http://upload-images.jianshu.io/upload_images/3113151-bfdd0f2e6ce40a96.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

调出来还得去掉它啊：如下相同即可

![](http://upload-images.jianshu.io/upload_images/3113151-e2536f3cad3ab6d0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

取消直接上事件即可。（分为菜单栏外部与底部）

![](http://upload-images.jianshu.io/upload_images/3113151-07ae959331529a76.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3113151-5ea6156d3a6cf559.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

//好了，就是这么简单。实现效果简单，体验效果确实非常不错。

![](http://upload-images.jianshu.io/upload_images/3113151-31724704aa72189e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

还需要个 loading 效果（暂时没做动画，后期再考虑。）Loading 布局

![](http://upload-images.jianshu.io/upload_images/3113151-6b9e098615e2a5ce.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

首页的最外层 view

![](http://upload-images.jianshu.io/upload_images/3113151-ca2127936d0fa74b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

根据微信的生命周期

"Onload:function(e){this.setData({toastDisplay:”block”,htmlWrapDisplay:”none”})}, onShow:function(e){this.setData({toastDisplay:”none”,htmlWrapDisplay:”block”})}

載入條完成。

掃一掃，直接呼叫拍照功能，從這裡看到微信提供的拍照

api

使用起來非常快速，只需根據需求配置即可。

點擊掃一掃之後，在開發者工具即可看到如下效果。

做到這裡說明下，dom 長度有限制，頁面的結構太長，也是無法渲染的，暫且把公司排序暫時先去掉了。 ##################左邊的 ABC 跳轉（還在繼續完善中）。這裡還有個左滑刪除名片功能，微信沒有提供這個在行動端很實用的功能真的比較遺憾，後面得花點時間自己寫下（後續完善）。 ######好了，今天更新的內容就先到這裡。 #########【相關推薦】######1. ###微信小程式完整原始碼下載#########2. ###微信小程式demo:卡卡汽車#########3. ###簡單的左滑操作和瀑布流佈局#######

以上是微信小程式開發（四）小程式開發實作指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！