|
導讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一... 微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用，也是一項門檻非常高的創新，經過將近兩年的發展，已經構造了新的小程序開發環境和開發者生態。 找到創建的 demo 文件夾，把項目導入到你的編輯器，這里使用的是Sublime Text編輯器。
這個時候需要根據自己的項目需求結構進行更改了，項目根目錄下面是首頁渲染的幾個 tabBar 頁面，以及 app 的一些配置文件，如名片盒項目的 tabBar 是 3 個切換菜單
我們先找到 app.json 文件打開配置好這幾個菜單，配置好 tabBar，這個直接把配置文件改成你自己設計的即可。
App.json 里面有幾個配置項：
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 時非常方便，is 和 name 一樣，data 是 nameData 傳遞過來的數據填充。 一切都綁定數據為中心點。
取到數據具體操作根據你數據結構：
這里的數據結構和 json 數據結構一樣， 這里如要傳到頁面的話即是
因為頁面遍歷的是 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，它被觸發的條件在這里。
一切以綁定事件為起點： 還是得先布好局才能被調動
Js 配置：
Data 初始化數據：
這里得取非，直接設置 false 調不出來: 調用事件。
調出來還得去掉它啊：如下相同即可
取消直接上事件即可。（分為菜單欄外部與底部）
//好了，就是這么簡單。實現效果簡單，體驗效果確實非常不錯。
還需要個 loading 效果（暫時沒做動畫，后期再考慮。）Loading 布局
首頁的最外層 view
根據微信的生命周期
"Onload:function(e){this.setData({toastDisplay:”block”,htmlWrapDisplay:”none”})}, onShow:function(e){this.setData({toastDisplay:”none”,htmlWrapDisplay:”block”})}加載條完成。
掃一掃，直接調用拍照功能，從這里看到微信提供的拍照 api 使用起來非常快速，只需根據需求配置即可。
點擊掃一掃之后，在開發者工具即可看到如下效果。
做到這里說明下，dom 長度有限制，頁面的結構太長，也是無法渲染的，暫且把公司排序暫時先去掉了。
左邊的 ABC 跳轉（還在繼續完善中）。這里還有個左滑刪除名片功能，微信沒有提供這個在移動端很實用的功能真的比較遺憾，后面得花點時間自己寫下（后續完善）。 好了，今天更新的內容就先到這里。 【相關推薦】 1. 微信小程序完整源碼下載 以上就是微信小程序開發（四）小程序開發實操指南的詳細內容，更多請關注php中文網其它相關文章！ 小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
