摘要：項目名稱我這里是模仿萬達電影小程序，你也可以自己換一個，這里隨意。

如果你是一個小白，想學習或者了解小程序，但是不知從何下手，那么這篇文章應該會對你有所幫助，如果您是一位大佬，那么這篇文章歡迎您吐槽！

小程序是微信新推出來的一種連接用戶與服務的方式。是一種不需安裝下載就能使用的應用。實現了用完即走的夢想。

不用安裝，即開即用，省流量，不占用桌面

對于小程序擁有者來說，開發成本更低，他們可以更多財力，人力，精力放在如何運營好產品，做好內容本身，并且相較于原生APP，推廣更容易更簡單，更省成本。

對于用戶來說，相較于各種APP，微信小程序UI和操作流程會更統一，降低了使用難度

微信小程序雖然體驗上不能和原生APP相媲美，但是綜合考慮還是很有優勢的。

要學習小程序首先要申請小程序賬號，根據步驟填寫資料就好

這里說一下，注冊賬號的第三步的時候，也就是信息登記這一步時，主體類型選擇個人就好，這里還要登記身份證，有點麻煩。

注冊成功以后你就有賬號啦，然后來到微信公眾平臺，查看一下你的APPID，后面會用到
設置-->開發設置

小程序賬號注冊好了，接下來就是安裝微信web開發者工具，點擊下一步然后同意協議就好啦

這里建議你們安裝一個VSCode，如果直接在微信開發者工具中敲代碼的話會非常不方便，你們可以再安裝兩個插件，會為你們寫代碼節省很多時間：

安裝插件：

現在準備工作都做好啦，接下來是正文了

前兩天為了去看正義聯盟的IMAX版，就在萬達電影的APP上弄抽獎，滿60減20，可惜我運氣太差，讓10個人幫我抽都抽不到（想哭），后來剛好要仿一款小程序，就選中了萬達電影的小程序。
這是我的github項目地址：仿萬達電影小程序，功能還沒有完善，但是從中學到了很多關于小程序的相關知識,歡迎star.

1.打開微信開發工具，在微信上確認登錄以后，點擊小程序項目，

2.項目目錄要選擇一個空文件夾，APPID就是之前要你記住的APPID,如果沒有記住，點擊查看APPID，你也可以不填寫APPID，選擇“可點此體驗”也行，但是這樣就不能在手機上預覽你的項目。項目名稱我這里是模仿萬達電影小程序，你也可以自己換一個，這里隨意。

3.來到微信開發者工具主頁，粉色的圈圈里：

pages里的文件是你需要寫的頁面

.js 后綴的表示JS腳本邏輯文件，app.js是指全局的JS文件

.json 后綴的表示JSON配置文件，app.json是指全局JSON配置文件，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等

.wxss 后綴的表示WXSS樣式文件，app.wxss是指全局樣式文件

藍色的圈圈里就是你點擊對應的代碼了，我們切換到VSCode里繼續學習.....

4.打開VSCode編輯器，切換到你的小程序文件，點擊app.json
這是默認的數據：

這是我仿萬達電影的app.json文件，下面給出了相應的注釋：

{
  // Pages字段 用于描述當前小程序所有頁面路徑，我目前只有6個頁面，你之后寫的頁面一定要在這里配置路徑！！！
  "pages":[
    "pages/index/index",
    "pages/ticket/ticket",
    "pages/detailedInfo/detailedInfo",
    "pages/cinemas/cinemas",
    "pages/stills/stills",
    "pages/mine/mine"
  ],
  // window字段 小程序所有頁面的頂部背景顏色，文字定義顏色
  "window":{
    "backgroundTextStyle":"black",
    "navigationBarBackgroundColor": "white",// 頂部背景顏色
    "navigationBarTitleText": "萬達電影",// 頂部文字
    "navigationBarTextStyle":"black"http:// 頂部文字顏色
  },
  //tabBar字段 配置小程序導航欄
  "tabBar":{
    "color": "rgb(116,122,131)",//tab欄文字顏色
    "selectedColor": "rgb(217,172,108)",//tab欄文字被選中時的顏色
    "backgroundColor": "#ffffff",//導航欄背景顏色
    "borderStyle": "#e0e0e0",//導航欄邊框的樣式
    //list字段：選項卡列表，最多可以配置5個
    "list": [
    {
      "pagePath": "pages/index/index",//選中的對應頁面的路徑
      "iconPath": "images/movieSelected.png",//tab默認的圖標
      "selectedIconPath": "images/movie.png",//tab選中后的圖標
      "text": "電影"http://tab中的文字
    },
    {
      "pagePath": "pages/mine/mine",
      "iconPath": "images/mine.png",
      "selectedIconPath": "images/mineSelected.png",
      "text": "我的"
    }
  ]
  }

}

這是我的文件夾，圖標都放在images文件里，圖標可以從iconfont這個網站獲取：

效果如下：

5.接下來我們就切一個頁面并且傳數據,index.wxml頁面代碼：

  
  
  
    
      當前影院:{{store}}>
      切換
  
  
  
  
    
      
      
        
          
            
          
          
            {{item.movieName}}
            IMAX3D
            {{item.introduction}}
            {{item.actor}}
          
        
      
      
        {{item.score}}
        
          購票
        
      
    
  

我的數據是用Easy Mock寫的，這是我目前寫的數據：電影信息，你們可以直接使用。index.js頁面代碼：

const app = getApp()

Page({
  data: {
    //動態數據
    movies: [],
    store: ""
  },
  //onLoad函數表示頁面加載完成后執行
  onLoad: function(res) {
    console.log(res.data);
    var that = this;
    //wx.showToast是顯示消息提示框，
    wx.showToast({
      title: "加載中...",//提示框中的文字內容
      icon: "loading",//提示框中的圖標，只能有兩個值，"success"和"loading"
      duration: 500//表示提示框在頁面中顯示的時間，單位是毫秒
    });
    //wx.request是小程序的API，所有以wx. 為前綴的都是API，
    //wx.request是用于請求數據的
    wx.request({
      //url內就是數據來源
      url: "https://www.easy-mock.com/mock/5a20be8ebe1c8248fef10573/getMoviesInfo/getInfo",
      //success函數表示，當請求數據成功時執行success函數,res是一個形參，即表示請求的數據
      success: function(res){
        //當你不知道數據的結構層是怎樣的時候，可以console.log一下查看數據
        console.log(res.data.data);
        //this.setData是設置Page中data的數據,
        //這里是使用that.setData，因為函數中嵌套函數this的指向會發生改變，所以在外層函數中使this指向了that.
        that.setData({
          movies: res.data.data.movieDetails
        })
      }
    })
  },
  //頁面顯示完成后執行onShow函數（每次打開頁面都會調用一次），
  //onShow函數是在onLoad函數執行之后再執行的，這里涉及到小程序的生命周期函數。
  onShow: function() {
    var that = this;
    //wx.getStorage是從本地緩存中異步獲取指定key對應的內容，這里對應的是我cinemas頁面的內容，獲取指定的電影院名稱
    wx.getStorage({
      key: "cinema",//key中的內容就是我需要的內容
      success: function(res) {
        console.log(res);
        that.setData({
          store: res.data
        })
      }
    })
  }
})

頁面效果：

我的項目地址：github地址,歡迎fock,歡迎star.
到這里差不多就結束了，最后再給幾個日后很有用的鏈接：

小程序開發文檔

Easy Mock虛擬數據接口

iconfont圖標庫

野狗（實時通信云,實時數據同步功能）

如果對于代碼有什么問題，歡迎一起討論學習。
在截圖里好像有我在聽的歌，我的網易云賬號：nzhing，互粉啊，哈哈哈

我從不信命運，不信所謂的可以指引我們的生命征兆。我不相信算命師講的故事，不相信可以預知未來的撲克牌。我只相信簡單的巧合，還有偶然的真相 ————伊斯坦布爾假期