微信小程序入門學習小結--全局設置、數據請求、雙向綁定、頁面路由跳轉、模板抽取

　　學習微信小程序必備工具，微信小程序開發文檔 W3C的這個文檔真是超級詳細，咱們可以在這裏查找到微信小程序的API、組件以及一些框架等。

　　結合本身仿寫的demo--仿網易蝸牛讀書,你會感受小程序並不難，前提你要屬性前端的基本知識，wxml == html,  wxss == css, 

　　下載微信開發者工具 他能幫助咱們快速的進行小程序的開發。固然，在開發以前咱們還須要擁有一個小程序帳號（註冊教程），經過帳號咱們就可以管理本身的小程序了。

　　注： 這裏有兩種註冊途徑開發demo：

　　　　一、沒有申請APPID： 能夠在新建項目的時候，選擇無AppID，可是這種不能再手機上調試。

　　　　二、申請APPID（點我）： 點擊開發者工具的上面的調試，用微信掃描彈出的二維碼 ，便可在手機上看（蘋果和安卓通用），他人也可經過此二維碼進行觀看，注意有時間限制。

　　PS：申請APPID信息登陸的時候，選擇其餘組織。主體信息登記能夠文字隨便填（認證碼必須按照規定的字數），圖片隨意（表情包均可以），管理員登記必須是實名制，其餘都沒什麼了，對了，不要去認證什麼的，由於你的信息原本就是錯了。

　　打開微信開發工具，新建新項目，準備工做結束。

　　1、app.js、app.json、app.wxss，這三個是全局配置文件。

　　若是是入門學習，能夠不用理會app.js，簡單瞭解便可，app.wxss是配置全局的樣式，通常用於初始化樣式，經常使用樣式的class，重點講一下app.json

　　

{
　　// pages裏面是快捷配置生成對應的頁面，最上面是第一個展現的頁面，能夠本身調試 "pages":[
    "pages/index/index", // 封面
    "pages/logs/logs",  // 日誌 
    "pages/leader/leader", // 首頁
    "pages/leader/stories/stories",
    "pages/leader/authors/authors",
    "pages/stack/stack", // 分類
    "pages/stack/booklist/booklist", 
    "pages/stack/booklist/bookdetail/bookdetail",
    "pages/bookdesk/bookdesk", // 書架
    "pages/mine/mine", // 我的中心
    "pages/mine/news/news",
    "pages/mine/editInfo/editInfo"
  ],
　　// 設置頂部導航欄的背景顏色、標題、不過顏色有限制，只有兩種
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "蒂花之秀讀書",
    "navigationBarTextStyle":"black"
  },
　　// 底部的tab切換欄配置，注意list中的四種屬性不能缺乏，不能用文字圖標，能夠在iconfont.cn中下載png圖片，塗上顏色便可
  "tabBar":{
    "color": "#6d4015",
    "selectedColor": "#1296db",
    "backgroundColor": "#ffffff",
    "borderStyle": "#e0e0e0",
    "list": [
      {
        "pagePath": "pages/leader/leader",
        "iconPath": "./assets/icons/lingdu.png",
        "selectedIconPath": "./assets/icons/lingdu_sel.png",
        "text": "首頁"
        },
      {
        "pagePath": "pages/stack/stack",
        "iconPath": "./assets/icons/stack.png",
        "selectedIconPath": "./assets/icons/stack_sel.png",
        "text": "分類"
        },
      {
        "pagePath": "pages/bookdesk/bookdesk",
        "iconPath": "./assets/icons/bookdesk.png",
        "selectedIconPath": "./assets/icons/bookdesk_sel.png",
        "text": "書架"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "./assets/icons/mine.png",
        "selectedIconPath": "./assets/icons/mine_sel.png",
        "text": "個人"
      }
    ]
  }
}

　　2、頁面路由跳轉

　　wx.navigateTo、wx.redirectTo、wx.switchTab、 wx.reluanch(重啓動)，主要是前面三種。

　　一、navigateTo、redirectTo只能開大非tabBar頁面（tabBar頁面就是在app.json 中設置的tabBar中list的頁面），前者能夠跳轉後能夠保存前面的頁面，不用從新生成，最多5個，這樣加載的速度很是快。後者前面的頁面會被銷燬，須要從新生成，若是網絡較差，會很卡。

　　二、switchTab只能打開tabBar頁面，如從index封面頁面定時跳到tabBar。

//index.js
//獲取應用實例
const app = getApp();

Page({
  data: {
    time: 3
  },
  
  // 三秒進入tabBar頁
  onLoad: function () {
    var that = this;
    var count = setInterval(function(){
      that.setData({
        　　time: that.data.time - 1
        });
      if (that.data.time <= 0){
        // 跳轉tabBar頁面
        wx.switchTab({
          url: "../leader/leader",
          complete: function(e){
            clearInterval(count);
          }
        });
      }
    }, 1000)
  }
})

　　3、模塊化開發，好比將共用的js進行封裝，common.js,而後經過module.exports進行暴露對應的方法，方便調用

// common.js
function sayHello(name) {
  console.log('Hello ${name} !')
}
function sayGoodbye(name) {
  console.log('Goodbye ${name} !')
}

module.exports.sayHello = sayHello
module.exports.sayGoodbye = sayGoodbye

// 在須要使用這些模塊的文件中，使用require(path)將公共代碼引入。
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

　　4、wxml渲染

// 數據渲染
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

// 列表渲染
<!--wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

// 條件渲染
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

// 模板渲染(模板的文件不須要在app.json中配置)
<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staff}}"></template>
// page.js
Page({
  data: {
    staff: {firstName: 'Hulk', lastName: 'Hu'}
  }
})
注：在導入模板的時候須要提早引入，wxml: <import src="./index/button/botton.wxml">, wxss: @import "./index/button/botton.wxss"


// 事件渲染
<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

　　5、後臺數據請求

　　EasyMock 簡單高效的僞造數據 用於後臺的數據模擬，獲得JSON數據，方便開發，我的免費， 前端自定義數據格式，同時方便後臺的輸出格式。

 onLoad: function (options) {
    // 請求數據
    var that = this;
    wx.request({
      url: "https://www.easy-mock.com/mock/5a31e9eb513048307be27a9a/test/",
      success: function(res){
        that.setData({authors: res.data.data.index});
      }
    })
  },

　　優化建議：

　一、頻繁的去setData

　　頻繁的去操做數據setData，給data中的數據進行數據綁定,會形成卡頓。

　二、每次setData都傳遞大量新數據

　三、後臺態頁面進行setData

　四、圖片資源

　還有一些經常使用標籤：view(div) 、view-scroll(可滾動)、swiper（可輪播）、cover-view（覆蓋視圖上的文字）、movable-area、icon、text、rich-text、progress等標籤元素，請參考微信小程序開發文檔 。

　　最後再說一句： 本身仿寫的demo--仿網易蝸牛讀書,有興趣的同窗能夠看看，仿寫一下哦；