小程序模板網(wǎng)

github精選:微信小程序開發(fā)小結

發(fā)布時間:2017-11-23 17:51 所屬欄目:小程序開發(fā)教程

第一步 項目配置一、編寫app.json對整個項目的公共配置1、pages:配置頁面路徑(必須),列出所有的頁面的路徑,所有存在的頁面都需要在此寫出,否則在頁面跳轉的時候會報出找不 ...

 
 
 

第一步 項目配置


一、編寫app.json

對整個項目的公共配置

1、pages:配置頁面路徑(必須),列出所有的頁面的路徑,所有存在的頁面都需要在此寫出,否則在頁面跳轉的時候會報出找不到頁面的錯誤
2、window:窗口配置,配置導航及窗口的背景色和文字顏色,還有導航文字和是否允許窗口進行下拉刷新
3、tabBar:tab欄配置,配置tab欄背景色及出現(xiàn)位置,上邊框的顏色(目前只支持黑或白),文字顏色及文字選中顏色,最核心的配置是list即tab欄的列表,官方規(guī)定最少2個,最多5個,每個列表項目可配置頁面路徑、文字、圖標及選中時圖標的地址
4、network:網(wǎng)絡配置,配置網(wǎng)絡請求、上傳下載文件、socket連接的超時時間
5、debug:調試模式,建議開發(fā)時開啟(true),可以看到頁面注冊、頁面跳轉及數(shù)據(jù)初始化的信息,另外報錯的錯誤信息也會比較詳細

 

			
  1. {
  2. "pages": [
  3. "pages/popular/popular",
  4. "pages/coming/coming",
  5. "pages/top/top",
  6. "pages/search/search",
  7. "pages/filmDetail/filmDetail",
  8. "pages/personDetail/personDetail",
  9. "pages/searchResult/searchResult"
  10. ],
  11. "window": {
  12. "navigationBarBackgroundColor": "#47a86c",
  13. "navigationBarTextStyle": "white",
  14. "navigationBarTitleText": "電影推薦",
  15. "backgroundColor": "#fff",
  16. "backgroundTextStyle": "dark"
  17. },
  18. "tabBar": {
  19. "color": "#686868",
  20. "selectedColor": "#47a86c",
  21. "backgroundColor": "#ffffff",
  22. "borderStyle": "white",
  23. "list": [{
  24. "pagePath": "pages/popular/popular",
  25. "iconPath": "dist/images/popular_icon.png",
  26. "selectedIconPath": "dist/images/popular_active_icon.png",
  27. "text": "熱映"
  28. }, {
  29. "pagePath": "pages/coming/coming",
  30. "iconPath": "dist/images/coming_icon.png",
  31. "selectedIconPath": "dist/images/coming_active_icon.png",
  32. "text": "待映"
  33. },{
  34. "pagePath": "pages/search/search",
  35. "iconPath": "dist/images/search_icon.png",
  36. "selectedIconPath": "dist/images/search_active_icon.png",
  37. "text": "搜索"
  38. },
  39. {
  40. "pagePath": "pages/top/top",
  41. "iconPath": "dist/images/top_icon.png",
  42. "selectedIconPath": "dist/images/top_active_icon.png",
  43. "text": "口碑"
  44. }]
  45. },
  46. "networkTimeout": {
  47. "request": 10000,
  48. "downloadFile": 10000
  49. },
  50. "debug": true
  51. }

二、確定目錄結構

根據(jù)UI圖,提取組件和公共樣式/腳本,以及page的目錄

  • comm - 公用的腳本及樣式
    • script - 公共腳本
      • config.js 配置信息 (單頁數(shù)據(jù)量,城市等)
      • fetch.js 接口調用 (電影列表及詳情,人物詳情、搜索)
    • style - 公共樣式
      • animation.wxss 動畫
  • component - 公用的組件
    • filmList - 電影列表
      • filmList.wxml - 組件結構
      • filmList.wxss - 組件樣式
  • dist - 靜態(tài)資源
    • images 本地圖片,主要存導航的圖標 (樣式中不可引用本地圖像資源)
  • pages - 頁面
    • popular - 頁面文件夾 ("popular"為自定義的頁面名稱,頁面相關文件的文件名需與頁面名相同)
      • popular.js 頁面邏輯
      • popular.wxml 頁面結構
      • popular.wxss 頁面樣式
      • popular.json 頁面窗口配置 (可參考app.json中的window配置)
  • app.js - 小程序整體邏輯 (初始化、顯示、隱藏的事件,以及存放全局數(shù)據(jù))
  • app.json - 小程序公共配置
  • app.wxss - 小程序公共樣式

第二步 編寫組件

電影列表

結構

 

				
  1. <template name="filmList">
  2. <block wx:if="{{showLoading}}">
  3. <view class="loading">玩命加載中…</view>
  4. </block>
  5. <block wx:else>
  6. <scroll-view scroll-y="true" style="height: {{windowHeight}}rpx" bindscroll="scroll" bindscrolltolower="scrolltolower">
  7. <view class="film">
  8. <block wx:for="{{films}}" wx:for-index="filmIndex" wx:for-item="filmItem" wx:key="film">
  9. <view data-id="{{filmItem.id}}" class="film-item" catchtap="viewFilmDetail">
  10. <view class="film-cover">
  11. <image src="{{filmItem.images.large}}" class="film-cover-img"></image>
  12. <view class="film-rating">
  13. <block wx:if="{{filmItem.rating.average == 0}}">
  14. 暫無評分
  15. </block>
  16. <block wx:else>
  17. {{filmItem.rating.average}}分
  18. </block>
  19. </view>
  20. </view>
  21. <view class=


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/17943.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢