大家好，決定在這里碼碼字，寫寫文章啦，希望和大家一起交流分享~

最近在學習微信小程序，在這里記錄下學習到的知識點，歡迎大家指正~

一、項目最終效果展示

github地址：https://github.com/haogjin/Douban-Movie/tree/master

注：

1. 這里主要展示"熱映"界面效果，其中"找片"和"我的"界面效果沒有展示，"找片"的效果與"熱映"基本技術操作是一樣的。
2. 主要知識點：flex布局、可滾動視圖組件scroll-view、自定義組件（調用及傳值）。

二、開始開發(fā)項目

環(huán)境搭建

創(chuàng)建自己的第一個小程序只需要2步即可：1.申請賬號，2.安裝開發(fā)者工具。
這里就不多說啦，傳送門：https://mp.weixin.qq.com/debug/wxadoc/dev/

項目結構說明

整體項目結構：

說明（這里只做簡要說明，具體在后面講解）：

1. conponents--自定義組件文件夾
2. images--圖片文件夾
3. pages--頁面文件夾 所有的頁面都放在pages文件夾下，每個頁面包括 .js（js文件）、 .wxml（頁面模板文件，相當于h5的html文件） 、 .wxss（頁面樣式文件，相當于h5的css文件）、 .json文件（頁面配置文件）；pages文件夾下的index（首頁）和logs（日志）文件夾是搭建環(huán)境時自動生成的，但本項目沒使用到這個頁面，請知悉。
4. styles--公共樣式文件夾
5. utils--公共js文件
6. app.js--項目入口文件
7. app.json--小程序全局配置文件
8. app.wxss--全局樣式文件 如果有共同使用的樣式文件可以寫在這個文件里，當然也可以自己創(chuàng)建樣式文件進行引用。
9. project.config.json--工具配置 每個項目的根目錄都會生成一個 project.config.json，用于保存當前項目的所有配置，保證載入項目的時候同步開發(fā)項目時的個性化配置。

開始開發(fā)

一、實現底部tab頁
一共包含3個tab頁：熱映、找片、我的。
1.在pages文件夾下建立home、finding、user文件夾，并分別創(chuàng)建相應文件。

2.在app.json文件中配置新建的三個文件的路徑。

說明：
1)所有新增的頁面都必須在pages里面注冊，否則無法顯示，建議新建一個頁面立即在pages里面注冊，以免忘記。這里pages是一個數組，第一個元素即為當前顯示的頁面。
2)在app.json文件的pages中注冊后的相應.js文件需要定義相應的Page:

Page({
  data: {

  },
  onLoad: function (options) {

  },
  onReady: function () {

  },
  onShow: function () {

  },
  onHide: function () {

  },
  onUnload: function () {

  }
  //.....
})

可以參照環(huán)境搭建好之后生成的index.js代碼，在其中可以定義屬性和事件，具體后續(xù)會講解。

3)window字段說明：用于配置小程序所有頁面的頂部背景顏色，文字顏色等，這里用到的屬性說明：

backgroundTextStyle ： 下拉背景字體、loading 圖的樣式，僅支持 dark/light
navigationBarBackgroundColor ：導航欄背景色
navigationBarTitleText：導航欄標題
navigationBarTextStyle：導航欄標題顏色，僅支持 black/white

注：注冊保存后相應文件夾就會自動生成對應頁面的.json文件，可以對當前頁面進行局部配置，當然也可以手動新建。

3. 在app.json中配置tab

 "tabBar": {
    "backgroundColor": "#dfdfdf",
    "color": "#8a8a8a",
    "selectedColor": "#000000",
    "list": [
      {
        "text": "熱映",
        "iconPath": "images/ing.png",
        "selectedIconPath": "images/ing-active.png",
        "pagePath": "pages/home/home"
      },
      {
        "text": "找片",
        "iconPath": "images/find.png",
        "selectedIconPath": "images/find-active.png",
        "pagePath": "pages/finding/finding"
      },
      {
        "text": "我的",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/user-active.png",
        "pagePath": "pages/user/user"
      }
    ]
  }

說明：

1. 三個tab項需要放置于list數組中。
2. color表示文本顏色，selectedColor表示選中文本的顏色。
3. iconPath表示位于text上方的圖標路徑，selectedIconPath表示選中tab的圖標路徑。
4. 圖標庫推薦： Iconfont-阿里巴巴矢量圖標庫

完整的app.json文件：（"debug":true表示開啟調試模式）

{
  "pages":[
    "pages/home/home",
    "pages/finding/finding", 
    "pages/user/user", 
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#dfdfdf",
    "navigationBarTitleText": "豆瓣電影",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "backgroundColor": "#dfdfdf",
    "color": "#8a8a8a",
    "selectedColor": "#000000",
    "list": [
      {
        "text": "熱映",
        "iconPath": "images/ing.png",
        "selectedIconPath": "images/ing-active.png",
        "pagePath": "pages/home/home"
      },
      {
        "text": "找片",
        "iconPath": "images/find.png",
        "selectedIconPath": "images/find-active.png",
        "pagePath": "pages/finding/finding"
      },
      {
        "text": "我的",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/user-active.png",
        "pagePath": "pages/user/user"
      }
    ]
  },
  "debug":true
}

到這里tab頁面切換就完成啦，是不是很簡單~~~

為了驗證正確性，分別編輯home.wxml、finding.wxml、user.wxml文件：

/* <view>標簽表示視圖容器，相當于<div>標簽 */
/* home.wxml */
<view class="fa fa-book">熱映界面</view>

/* finding.wxml */
<view class="fa fa-eye">找片界面</view>

/* user.wxml */
<view class="fa fa-user">用戶界面</view>

其中 class="fa fa-user" 表示引入font Awesome圖標，引入方法：http://www.itdecent.cn/p/936e3f09e217。
當然也是可以引用iconfont字體的，看個人選擇~

對應的界面：

home.png

finding.png

user.png

當然也可以加入各種樣式，方式與h5基本沒區(qū)別。

今天就先到這里啦~

接著會抓取豆瓣電影數據展示電影正在熱映和即將上映列表及詳情，如果文中有什么不對的或者需要注意的地方歡迎大家指正，一起分享交流~
接下文 微信小程序仿豆瓣電影頁面demo（2）--實現"正在熱映"與"即將上映"切換：
http://www.itdecent.cn/p/0eff6f592d53

版權聲明：本文為作者原創(chuàng)文章，未經允許不得轉載。如需轉載，請聯系作者并標明出處及原鏈接！