新手零基礎入門小程序之萬達電影

時間 2019-11-11

標籤新手零基礎入門程序简体版

原文原文鏈接

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

什麼是小程序？

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

小程序的優點

不用安裝，即開即用，省流量，不佔用桌面
對於小程序擁有者來講，開發成本更低，他們能夠更多財力，人力，精力放在如何運營好產品，作好內容自己，而且相較於原生APP，推廣更容易更簡單，更省成本。
對於用戶來講，相較於各類APP，微信小程序UI和操做流程會更統一，下降了使用難度

微信小程序雖然體驗上不能和原生APP相媲美，可是綜合考慮仍是頗有優點的。github

註冊小程序帳號

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

這裏說一下，註冊帳號的第三步的時候，也就是信息登記這一步時，主體類型選擇我的就好，這裏還要登記身份證，有點麻煩。json

註冊成功之後你就有帳號啦，而後來到微信公衆平臺，查看一下你的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"// 頂部文字顏色
  },
  //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": "電影"//tab中的文字
    },
    {
      "pagePath": "pages/mine/mine",
      "iconPath": "images/mine.png",
      "selectedIconPath": "images/mineSelected.png",
      "text": "個人"
    }
  ]
  }

}

這是個人文件夾，圖標都放在images文件裏，圖標能夠從iconfont這個網站獲取：

效果以下：

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

<!--小程序中的標籤不是div,p,a等標籤，而是採用了自定義的view等組件，view就至關於div標籤-->
<view class="container">
  <!--WXML頁面中的數據都來自對應Page的data,數據綁定使用{{}}將變量包起來-->
  <!--navigator組件是用於頁面跳轉的，url就是對應點擊以後的頁面路徑-->
  <navigator class="page__hd" url="../cinemas/cinemas">
    <!--這裏的store就是動態數據，須要去Page中的data中設置-->
      <view class="page__hd_store">當前影院:{{store}}></view>
      <button class="btn">切換</button>
  </navigator>
  <!--在組件上使用wx:for控制屬性綁定一個數組，使用數組中各項的數據重複渲染組件。主頁的電影信息就是一個個列表
  默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item，因此在Page頁面中只須要設置movies就能夠，
  for循環裏的數據均可以用item. 來獲取數據-->
  <!--scroll-view是可滾動視圖區域，scroll-y="true"表示垂直方向上可滾動，默認爲false,若是要設置水平方向上滑動，即scroll-x="true"-->
  <scroll-view class="page__bd" wx:for="{{movies}}" wx:key="{{index}}" scroll-y="true">
    <view class="movies">
      <!--這裏跳轉到頁面的頁面路徑後面加了id={{item.id}},由於每部電影的電影詳情都不同，
        因此我須要設置一個id來篩選我點擊跳轉的頁面所須要的數據,item.id也是數組中的一項，不須要另外去Page中設置-->
      <navigator url="../detailedInfo/detailedInfo?id={{item.id}}">
        <view class="item">
          <view class="movie__hd">
            <image class="movie" src="{{item.image}}" />
          </view>
          <view class="movie__bd">
            <text class="movie__bd_name">{{item.movieName}}</text>
            <text class="movie__bd_jd">IMAX3D</text>
            <text class="movie__bd_introduction">{{item.introduction}}</text>
            <text class="movie__bd_actor">{{item.actor}}</text>
          </view>
        </view>
      </navigator>
      <view class="movie__ft">
        <text class="movie__ft_score">{{item.score}}</text>
        <navigator url="../ticket/ticket">
          <button class="btn big">購票</button>
        </navigator>
      </view>
    </view>
  </scroll-view>
</view>

個人數據是用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
        })
      }
    })
  }
})

頁面效果：