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

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

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

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

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

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

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

要學(xué)習(xí)小程序首先要申請小程序賬號，根據(jù)步驟填寫資料就好

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

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

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

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

安裝插件：

現(xiàn)在準備工作都做好啦，接下來是正文了

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

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

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

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

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

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

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

.wxss 后綴的表示W(wǎng)XSS樣式文件，app.wxss是指全局樣式文件

藍色的圈圈里就是你點擊對應(yīng)的代碼了，我們切換到VSCode里繼續(xù)學(xué)習(xí).....

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

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

{
  // Pages字段 用于描述當(dāng)前小程序所有頁面路徑，我目前只有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字段 配置小程序?qū)Ш綑?  "tabBar":{
    "color": "rgb(116,122,131)",//tab欄文字顏色
    "selectedColor": "rgb(217,172,108)",//tab欄文字被選中時的顏色
    "backgroundColor": "#ffffff",//導(dǎo)航欄背景顏色
    "borderStyle": "#e0e0e0",//導(dǎo)航欄邊框的樣式
    //list字段：選項卡列表，最多可以配置5個
    "list": [
    {
      "pagePath": "pages/index/index",//選中的對應(yīng)頁面的路徑
      "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這個網(wǎng)站獲取：

效果如下：

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

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

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

const app = getApp()

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

頁面效果：

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

小程序開發(fā)文檔

Easy Mock虛擬數(shù)據(jù)接口

iconfont圖標庫

野狗（實時通信云,實時數(shù)據(jù)同步功能）

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

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