小程序教程2

仿造京東小程序第一彈

因爲咱們沒有設計的支持，因此爲了學習這個小程序的製做，咱們暫且模擬一個成熟的小程序來幫助你們快速的熟悉小程序的製做。個人教程可能寫的不是很好，但願你結合我給的demo可以更快的學會小程序，小程序地址，點擊這裏

1. 頭部標題等樣式和底部tabBar配置都是在app.json中，首先配置頭部標題
2. 如今具體介紹下app.json中均可以配置什麼
   • pages---是一個數組，裏面放置的是頁面的路徑(必填)
   • window---是一個配置對象，設置默認頁面的窗口表現(非必填)
   • tabBar---是一個對象，設置底部tab的表現(非必填)
   • networkTimeout---是一個對象，設置網絡超時時間(非必填)
   • debug---布爾值，設置是否開啓debug模式

app.json配置詳解

1. pages,設置小程序的頁面
   • 接受一個數組，每一項都是一個字符串，來指定小程序由哪些頁面組成。
   • 每一項都是對應頁面的路徑+文件名信息，數組的第一項表明小程序的起始頁
   • 小程序新增或者減小頁面都須要對這個數組進行操做

   {
         "pages":[
           "pages/index/index"
           "pages/logs/logs"
         ]
       }

2. window，設置小程序的狀態欄、導航條、標題和窗口背景色
   • navigationBarBackgroundColor---導航欄背景顏色（默認是#000000）
   • navigationBarTextStyle---導航欄標題顏色（僅支持black/white）
   • navigationBarTitleText---導航欄標題文字內容
   • backgroundColor---窗口的背景色
   • backgroundTextStyle---下拉背景字體，loading圖的樣式（僅支持dark/light）
   • 是否開啓下拉刷新（詳情再後面介紹）

   {
         "window":{
           "navigationBarBackgroundColor": "#ffffff",
           "navigationBarTextStyle": "black",
           "navigationBarTitleText": "仿製京東",
           "backgroundColor": "#eeeeee",
           "backgroundTextStyle": "light"
         }
       }

3. tabBar，度tab應用是配置
   • 經過配置tabBar來制定tab欄的表現，以及tab切換是對應的顯示
   • 經過頁面跳轉(wx.navigateTo)或者頁面重定向(wx.redirectTo)所到達的頁面，即便他是定義在tabBar中的頁面，也不會顯示底部的tab欄
   • tabBar是一個數組，最少2個，最多5個，tab按數組順序排序
   • 屬性說明
     • color---tab上的文字的默認顏色
     • selectedColor---文字選中時候的顏色
     • backgroundColor---tab背景顏色
     • borderStyle---tab上邊框的顏色（值支持black/white）
     • list---tab的列表數組
       • pagePath---頁面路徑，必須在 pages 中先定義
       • text---tab 上按鈕文字
       • iconPath---圖片路徑，大小顯示爲40kb，建議尺寸爲81*81
       • selectedIconPath---選中是圖片路徑，大小和尺寸同上
     • position---tab欄的位置（只支持bottom和top）

   "tabBar": {
           "color": "#ccc",
           "selectedColor":"#0f0",
           "backgroundColor":"#567567",
           "borderStyle":"white",
           "position":"bottom",
           "list": [{
             "pagePath": "pages/index/index",
             "iconPath":"img/icon_API.png",
             "selectedIconPath":"img/icon_API_HL.png",
             "text": "搜索商品"
           }, {
             "pagePath": "pages/logs/logs",
             "iconPath":"img/wechat.png",
             "selectedIconPath":"img/wechatHL.png",
             "text": "個人訂單"
           }]
       }

4. networkTimeout，能夠設置各類網絡請求的超時時間。
   • request---wx.request的超時時間，單位毫秒，默認爲：60000
   • connectSocket---wx.connectSocket的超時時間，單位毫秒，默認爲：60000
   • uploadFile---wx.uploadFile的超時時間，單位毫秒，默認爲：60000
   • downloadFile---wx.downloadFile的超時時間，單位毫秒，默認爲：60000
5. debug
   • 能夠在開發者工具中開啓debug，在控制面板中以info信息給出
   • 信息包括page註冊，路由，數據更新，時間觸發，幫助快速定位問題

頁面的.json配置文件

1. 每個頁面都有一個json配置文件，要比app.json全局配置文件簡單的多，只能配置window的配置項，因此無需寫window這個鍵
2. 幾乎全部的配置項都同樣，除了多了一個disableScroll的布爾值，默認爲false，設置爲true的時候則頁面總體不能滾動

外層目錄結構

1. img文件夾存放圖片
2. pages文件夾內放每一個頁面，暫時有兩個一個是myOrder文件夾，另外一個是searchGoods文件夾，每一個文件夾下面都有.js,.json,.wxss,.wxml四個文件
3. util文件夾只有一個util文件，是用來格式化時間的
4. app.js，.app.json和app.wxss文件的做用在第一篇已經介紹

製做首頁searchGood頁面

1. 用到的標籤，標籤詳情API，請點擊這裏
   • view，視圖容器，佈局經常使用這個標籤，有以下屬性
     • hover， 默認爲false，是否啓用點擊狀態
     • hover-class，默認爲none，指定按下去的樣式類，爲none是沒有點擊狀態
     • hover-start-time，默認值爲50，按住多久後出現點擊狀態，單位毫秒
     • hover-stay-time，手指鬆開多久後點擊狀態消失，單位毫秒

     <view class="section">
           <view class="section-title" hover-class="section-hover">flex-direction: row</view>
           <view class="flex-wrp" style="flex-direction:row;">
             <view class="flex-item bc-green">1</view>
             <view class="flex-item bc-red">2</view>
             <view class="flex-item bc-blue">3</view>
           </view>
         </view>

   • image，圖片，有以下屬性
     • src，圖片的地址，通常寫相對路徑
     • mode，圖片裁剪、縮放方式，默認值'scaleToFill'，一共有13中模式
       • scaleToFill，不保持縱橫比縮放圖片，使圖片的寬高徹底拉伸至填滿 image 元素
       • widthFix，寬度不變，高度自動變化，保持原圖寬高比不變
       • top，不縮放圖片，只顯示圖片的頂部區域，不一一列舉，詳情看官方文檔
     • binderror，傳一個事件，當錯誤發生時發送到APPService的事件名
     • bindload，傳一個事件，當圖片加載完後發送到APPService的事件名

     <!-- 樣式應該寫到css文件中 -->
         <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="圖片相對路徑"></image>

   • input，輸入框，有以下屬性
     • value,輸入框的初始內容
     • type，輸入框類型，text, number, idcard, digit
     • placeholder，輸入框爲空是佔位符等好多屬性，詳情看文檔
   • icon，圖標，有以下屬性
     • type，icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
     • size，圖標的大小，單位爲像素
     • color，圖標的顏色
   • text，文本標籤，支持轉譯符‘’，text組件內只支持text標籤嵌套，除了文本節點之外，其餘節點都沒法長按選中
     • 長按複製功能微信還沒有實現
2. css建議添加類名以後在他本身的css文件中添加樣式

3. 每一個js文件中都有一個Page實例，引入外部的js文件的時候用require引用一個相對路徑，獲取app.js中的app對象使用var app = getApp();

   Page({
         data: {
           logs: [],
           userInfo:{},
           orderData:orderData,
           dialogFlag:false
         },
         directHandle:function(event){
           console.log(event)
           if(event.target.id === '3'){
             this.setData({
               dialogFlag:true
             })
           }
         },
         dialogCancel:function(){
           this.setData({
               dialogFlag:false
             })
         },
         showDialog:function(){},
         onLoad: function () {
           wx.setNavigationBarTitle({
             title: '個人訂單'
           })
           //調用全局的方法獲取用戶信息
           var that = this;
           app.getUserInfo(function(userInfo){
             //更新數據
             that.setData({
               userInfo:userInfo
             })
           })
           console.log(this.data.userInfo)
         }
       })

   • 實例中data中存放的就是這個頁面須要的數據，更新數據使用this.setData({})方法,this表明的就是當前的page對象
   • 生命週期鉤子和頁面須要的方法都定義在這個實例的對象中
   • 註冊程序經常使用鉤子：onLaunch，onShow，onHide，onError，能夠在object對象上自定義
   • 註冊頁面經常使用鉤子：onLoad，onShow，onHide等等，你能夠添加任意的函數或數據到 object 參數中，在頁面的函數中用 this 能夠訪問
   • 在onload函數中我使用了wx.setNavigationBarTitle（）方法，這個就是當頁面加載的時候把頂部的標題更改成「個人訂單」
   • app.getUserInfo這個方法是在app.js中定義的函數，上面引入app以後就能夠調用了，這裏是獲取當前用戶的信息，有頭像地址，暱稱，籍貫等等

製做第二個頁面selfInfo

1. 這個頁面對應下方的tab欄中的個人訂單
2. 這個頁面中用到的標籤和上一個基本同樣，只是多出了navigator標籤，這是一個跳轉標籤，屬性以下
   • url，應用內的跳轉連接，這是一個絕對路徑相似/pages/myOrder/myOrder，並且你的路徑必定是要在app.json中註冊過的，
   • open-type,默認爲navigate，可選值爲 'navigate'、'redirect'、'switchTab'，選定一個你但願的跳轉類型
   • hover-class，點擊的時候的樣式類等等
3. 綁定數據的時候須要在page對象中的data中有這個數據，在頁面中能夠直接經過{{}}獲取到，屬性和關鍵字須要放在引號中的花括號中。
   <view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } })

4. 若是要生成多個列表的時候，須要在data中定義一個數據數組，而後在你須要重複的標籤上添加一個wx:for的屬性，屬性值爲用花括號包起來的數據數組，每一項就是item，下標是index
   ```
   [
   {
   orderIconUrl:'../../img/pause.png',
   navUrl:'/pages/myOrder/myOrder',
   name:'所有訂單'
   },
   {
   orderIconUrl:'../../img/play.png',
   navUrl:'/pages/myOrder/myOrder',
   name:'代付款'
   },
   {
   orderIconUrl:'../../img/plus.png',
   navUrl:'/pages/myOrder/myOrder',
   name:'代收款'
   },
   {
   orderIconUrl:'../../img/record.png',
   navUrl:'/pages/selfInfo/selfInfo',
   name:'售後訂單'
   },
   ]

   <navigator wx:for="{{orderData}}" wx:key="navUrl" url="{{item.navUrl}}" id="{{index}}" bindtap="directHandle" open-type="navigate">
        <image class="icon" src="{{item.orderIconUrl}}"></image>
        <text>{{item.name}}</text>
        <image class="right" src="../../img/arrowright.png"></image>
    </navigator>

   ```

5. 如今每一個菜單都能實現跳轉了，可是其中有一個不須要跳轉該怎麼辦，能夠不使用navigate標籤，而是經過事件來控制跳轉，我採用了另一種方法，給每一個標籤加了一個id，而後在事件的event.target.id中能夠獲取到你要控制的元素的id，而後給他添加特殊的處理，同時他的跳轉路徑設置爲當前路徑。
   • 這裏須要說下的是navigate跳轉是保留當前頁面，而後跳轉到應用內的某個頁面，在設計的時候爲了用戶在使用小程序的時候不產生困擾，規定頁面的路徑智能是五層，並且要儘可能避免多層級的交互方式。
   • 使用wx:navigateTo跳轉以後可使用wx:navigateBack返回到源頁面
6. 再補充一點，就是在寫頁面的css的時候咱們能夠像我同樣使用百分比等單位，可是有一個單位更值得推薦，那就是rpx，這個是微信團隊作過處理和適配的，就是把全部的手機的寬度都當作750rpx，想一想是否是很方便，免去了你去適配多機型的煩惱。
7. 很差意思，我又來補充了，頁面的內容可使用模板，模板擁有本身的做用域，只能使用data傳入的數據，而後經過import和include在其餘頁面調用或者使用template在本頁面應用，涉及的內容較多，將在後續教程中詳細講解
8. 從一個其餘的頁面跳轉的時候，目標頁面若是是tab頁面則沒法跳轉，只能用wx.switchTab來進行跳轉，url參數是一個相對路徑，若是是須要到首頁的話有一個更簡單的方法，就是使用wx.navigateBack(OBJECT)方法直接返回，當參數delta的值大於現有頁數的時候就會回到首頁
9. 在使用wx:key的時候必定要是惟一標識符，不然相同的最後一個將會覆蓋第一個的值

10. 進行跳轉的時候若是使用的navigate標籤進行的跳轉，地址後面加的參數會在目標頁面的onLoad函數的參數獲取到，若是是使用wx:navigate等方法進行跳轉的話，路徑後面的參數會在success函數的參數中獲取到