iKcamp出品｜微信小程序｜工具安裝+目錄說明｜基於最新版1.0開發者工具初中級教程分享

iKcamp官網：http://www.ikcamp.com

訪問官網更快閱讀所有免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基於最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼

第一章：小程序初級入門教程

工具安裝

在上一節第 8 步所展現的頁面中，能夠點擊 開發者工具 直接進入到下載頁面，也能夠直接訪問 官網下載地址。而後根據本身的設備選擇相應的下載
安裝過程再也不復述，一路默認。

下載開發工具

§ 小程序工具起手

此教程選擇的工具爲 mac 平臺版本，沒差

1. 打開安裝好的 微信web開發者工具 ，須要用 管理員 或 開發者 的微信帳號掃碼登陸。管理員帳號 是上一節第 6 步中註冊 appID 時，綁定的微信帳號。開發者帳號可在上一節第 8 步中的 添加開發者 中設置

1. 登陸成功後，選擇 本地小程序項目，而後 添加項目

1. 若是沒有註冊 appID，也能夠開發小程序項目，但部分功能會受限，好比在手機上預覽。在這裏，咱們已經有了 appID

1. 添加成功後，咱們的項目會在 微信web開發者工具 中自動打開並啓動，能夠在此工具中對代碼進行修改、調試、斷點、預覽，文件有修改的話，項目會實時更新。

目錄說明

項目生成後，會看到以下結構的目錄文件：

├─ pages/
│   ├─ index/
│       ├─ index.js
│       ├─ index.wxml
│       ├─ index.wxss
│   ├─ logs/
│       ├─ logs.js
│       ├─ logs.json
│       ├─ logs.wxml
│       ├─ logs.wxss
├── utils/             
│   ├─ util.js
├── app.js                  // 必備文件  
├── app.json                // 必備文件
├── app.wxss

先看下最外層的三個文件：app.js 、 app.json 、 app.wxss

1. app.js
   小程序的主入口文件，相似於咱們在模塊加載器時代（requirejs/seajs）經常會碼一個 main.js 來做爲程序的啓動入口。若是你有接觸過 node - express 技術棧，理解起來會更貼切。注意：<span style="color:red">文件名不可更改</span>

咱們能夠在 app.js 裏面對小程序在不一樣生命週期段進行處理，設置小程序裏面的 全局變量（好比只請求一次公用的數據，讓全部的頁面都能用）。
微信平臺 app.js 說明文檔

1. app.json
   小程序的全局配置文件，好比設置小程序有哪幾個頁面組成（目前是 index 和 logs）、窗口表現（背景色等）、設置網絡超時時間、設置導航條樣式等背景色。注意：<span style="color:red">該文件不可添加任何註釋內容</span>

微信平臺 app.json 配置文檔

1. app.wxss
   小程序的全局樣式文件，在小程序中，全部的樣式文件再也不是 .css 後綴，全都須要以 .wxss 做爲後綴。與傳統的 css 樣式相比，wxss 支持 @import 樣式導入和像素單位自適應。

獨立頁面中的局部樣式，請書寫在相對的頁面文件夾中，後面會有說明。
微信平臺 app.wxss 樣式說明文檔

小程序的頁面文件

app.json 文件中配置了當前小程序的兩個頁面 pages/index/index 和 pages/logs/logs，能夠看到，其實就是 文件的路徑+文件名 組成。若是增長一個頁面，須要在參數 pages 中把頁面的地址配置進去。

細心的同窗可能已經發現一個現象，每一個頁面文件夾，與裏面的文件，名字都同樣同樣滴。是的，通常狀況下，一個完整的頁面須要 js 、wxss(css)、wxml(html) 組成。
好比 index 頁面，若是須要對 index 頁面進行一些獨立的配置，須要像 logs 同樣，增長 index.json 文件來保存配置信息。

來看下 wxml 文件與 html 文件的區別

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

傳統的 html 文件由各類各樣的標籤組成，而在 wxml 中，可用的標籤元素並很少，能夠看到這裏涉及到了 view、image、text標籤。

• view 至關於 div，你能夠這麼去理解。
• image 至關於 img，這個應該都懂了。
• text 很明顯，用來標註文本的標籤，既然是 文本，確定是 行級元素 了。

還有一些內置好的組件標籤，自帶樣式和特性，詳見 官方文檔

頁面樣式表 index.wxss

做用域只在當前頁面生效，它能夠覆蓋 app.wxss 裏面的樣式規則。能夠看到，與平時咱們用的樣式文件基本沒差：

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

頁面腳本文件 index.js

跟 app.js 同樣，包含了一個頁面的生命週期，聲明並處理數據，響應頁面交互事件等。

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

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
      // 因此此處加入 callback 以防止這種狀況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

下期更新內容：小程序初級入門教程－小試牛刀+發佈流程

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。

---

相關文章：
據說 2017 你想寫前端？
前端開發者指南（2017）
翻譯連載 |《你不知道的JS》姊妹篇 | JavaScript 輕量級函數式編程

iKcamp最新活動

報名地址：http://www.huodongxing.com/ev...