開發工具

1.微信web開發者工具  方便我們在編譯時能夠實時的看到界面變化，我們并不用此來進行小程序的開發，只充當一個模儀器來使用。
2.visual Studio Code  微軟新推出的一款及終端的編輯器，大大的提高了前端工程師的開發效率，這里我們也將用此來進行小程序的開發。沒有了解過的同學也可以試做去使用下吧，良心推薦。。
3.Easy Mork  easy-mock,通過它能快速生成模擬數據的服務，它能為我們提供一個數據接口url，然后使用wx.request({ url: url, .....})來發送數據請求，我的數據大部分都是通過Mork模擬的

創建小程序：

一、目錄架構

我們創建小程序開發者工具幫我們自動生成的目錄：

• page文件夾, 頁面文件夾 包含你所有的頁面文件,至少包含.js .wxml .wxs后綴文件，.json可選
• utlis文件夾 ,放置一些全局需要使用的js文件
• app.js 控制全局的邏輯結構
• app.json 配置一些全局數據，所有頁面都要在此處注冊
• app.wxml 內容結構
• app.wxss 全局樣式 另外我們也需要自己創建，用于模塊式的開發：
• assets文件夾 用于我們存放所有的靜態資源比如：icons/,images/，js/,.json/提供數據
• module/文件夾 開發功能分模塊開發，這樣有便于多人協作，大大加快了開發效率，同時也提高了代碼的可讀性。
• styles/文件夾 用于存放頁面的css樣式的文件夾，利用es6的模塊可以提高代碼的復用性和可讀性，便于以后更方便的維護。

二、ES6模塊化語言

上面我們講到如何模塊化的去處理我們的業務，實際上還是把業務和邏輯區分開來。但是我們如何優雅的去調用這些模塊呢？一似乎我們會去尋找一種方法去解決它，沒錯我們的es6擔任了這個使命。

• 創建模塊時我們需要使用 export default ModuleName 去創建這個模塊。比如我們試駕小程序我們創建一個expory default testDrive這樣就可以了，在這個模塊中我們只要去定義它就好了，const testDrive =（）=> {} 使用我們的箭頭函數。
• 引用模塊時我們只需要 import testDriver from 'xxxxx相應的文件夾'。

項目功能

• 首頁全屏輪播圖優雅而大氣
• scroll-view的使用，可滾動視圖區域生成
• 視頻播放，video組件使用
• 人工客服
• 動態評論列表
• 獲取用戶信息
• 利用mock 傳數據

具體功能實用技巧

一、首頁全屏輪播圖

<swiper class="section hero white"indicator-dots="{{true}}" circular="{{true}}" autoplay="{{true}}">
  <block wx:for="{{slides}}" wx:key="id">
    <swiper-item>
      <image src="{{item.image}}"mode="aspectFill"/>
      <view class="content centered">
        <view class="sub_header">{{item.sub_header}}</view>
        <view class="header">{{item.header}}</view>
        <view class="description">{{item.description}}</view>
        <view class="action">
          <button class="button" bindtap="testDrive">預約試駕</button>
          <button class="button primary" bindtap="readMore" data-id="{{item.id}}">了解更多</button>
        </view>
      </view>
    </swiper-item>
  </block>
</swiper>

輪播圖的一些處理技巧： * 輪播圖不在像我們以往單純的放置圖片的輪播圖的效果了，我們這里動態的添加數據，為每個輪播圖都配置一些desc來描述，更好的吸引顧客的眼球。 * 采用view來承載我們的desc，為他們添加相應的樣式。 * 動態的綁定數據，每個輪播圖的desc肯定不一樣，這就需要我們去綁定數據使用我們的{{item}}。name數據從哪來呢？我們去data里去手動添加嗎？就讓我們在堅持一些。后面更精彩。

二、數據的來源

好吧！！我們不賣關子，直接接著上面的講吧。數據來源處理方式可以分為兩種：

• 1.URL式的數據封裝采用ajax請求，展示本地存儲能力

  console.log(this.globalData);
  展示本地存儲能力
  ajax請求
  wx.request({
    url: 'https://resources.ninghao.net/wxapp-case/db.json',
    data: {},
    method: 'GET', 
    success: (response)=>{
      // console.log(response)
      Object.assign(this.globalData,response.data)
      console.log(this.globalData)
    },
    fail: (error)=>{
      // console.log(error)
    },
   
  })

  在我們小程序里，有著豐富的api，其中就用一種非常強大且實用的api: wx.request({}),上面的代碼很詳細的介紹了他的使用方法，我們直接今天重點吧。怎么去使用網上的數據呢？

  在我們每個page里內置很多函數，比如onLaunch(),onLoad()等，每個函數都有不同的作用。我們在page里聲明一個全局globalData并且在onLaunch函數里使用Object.assign（this.globalData,request.data）為這個全局globalData賦值，把我們的數據存放進去。在我們首頁的index.js去調用它slide: app.globalData.slides

• 2.使用Easy Mork自己去創建數據，這里不是我們的重點，有興趣的可以去了解下Easy Mork如何模擬數據吧。調用方法跟上述一樣。例外我們呢可以直接引入一個js.json文件可以使用我們之前介紹的模塊化去引用并配置到全局data里

  三、頁面跳轉雙向傳遞數據

一個小程序頁面跳轉總是必須的，但是頁面的數據如何去傳遞呢？

data-id="{{item.id}}" 在我們點擊跳轉事件綁定一個數據，這樣我們就可以在下一個頁面獲取這個id了

onLoad: function (options) {
    const id = options.id;
    console.log(id)
  },

然后我們再根據這個獲取到的id進行相應的處理，這里小編在總結總結，以后寫的詳細一定。關于頁面如何雙向傳遞數據，時間有限，就先都這里，希望你們的點贊哦。