開發(fā)工具

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

創(chuàng)建小程序：

一、目錄架構(gòu)

我們創(chuàng)建小程序開發(fā)者工具幫我們自動生成的目錄：

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

二、ES6模塊化語言

上面我們講到如何模塊化的去處理我們的業(yè)務(wù)，實(shí)際上還是把業(yè)務(wù)和邏輯區(qū)分開來。但是我們?nèi)绾蝺?yōu)雅的去調(diào)用這些模塊呢？一似乎我們會去尋找一種方法去解決它，沒錯我們的es6擔(dān)任了這個使命。

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

項(xiàng)目功能

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

具體功能實(shí)用技巧

一、首頁全屏輪播圖

<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">預(yù)約試駕</button>
          <button class="button primary" bindtap="readMore" data-id="{{item.id}}">了解更多</button>
        </view>
      </view>
    </swiper-item>
  </block>
</swiper>

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

二、數(shù)據(jù)的來源

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

• 1.URL式的數(shù)據(jù)封裝采用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，其中就用一種非常強(qiáng)大且實(shí)用的api: wx.request({}),上面的代碼很詳細(xì)的介紹了他的使用方法，我們直接今天重點(diǎn)吧。怎么去使用網(wǎng)上的數(shù)據(jù)呢？

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

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

  三、頁面跳轉(zhuǎn)雙向傳遞數(shù)據(jù)

一個小程序頁面跳轉(zhuǎn)總是必須的，但是頁面的數(shù)據(jù)如何去傳遞呢？

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

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

然后我們再根據(jù)這個獲取到的id進(jìn)行相應(yīng)的處理，這里小編在總結(jié)總結(jié)，以后寫的詳細(xì)一定。關(guān)于頁面如何雙向傳遞數(shù)據(jù)，時間有限，就先都這里，希望你們的點(diǎn)贊哦。