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

iKcamp發表於2017-10-16

微信小程式

iKcamp官網：www.ikcamp.com

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

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

工具安裝

在上一節第 8 步所展示的頁面中，可以點選 開發者工具 直接進入到下載頁面，也可以直接訪問官網下載地址。然後根據自己的裝置選擇相應的下載
安裝過程不再複述，一路預設。

下載開發工具

§ 小程式工具起手

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

開啟安裝好的 微信web開發者工具 ，需要用 管理員 或 開發者 的微信賬號掃碼登入。管理員賬號 是上一節第 6 步中註冊 appID 時，繫結的微信賬號。開發者賬號可在上一節第 8 步中的 新增開發者 中設定

登入成功後，選擇 本地小程式專案，然後 新增專案

3. 如果沒有註冊 appID，也可以開發小程式專案，但部分功能會受限，比如在手機上預覽。在這裡，我們已經有了 appID

新增成功後，我們的專案會在 微信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`

app.js
小程式的主入口檔案，類似於我們在模組載入器時代（requirejs/seajs）常常會碼一個 main.js 來作為程式的啟動入口。如果你有接觸過 node - express 技術棧，理解起來會更貼切。注意：檔名不可更改
我們可以在 app.js 裡面對小程式在不同生命週期段進行處理，設定小程式裡面的 全域性變數（比如只請求一次公用的資料，讓所有的頁面都能用）。
微信平臺 app.js 說明文件
app.json
小程式的全域性配置檔案，比如設定小程式有哪幾個頁面組成（目前是 index 和 logs）、視窗表現（背景色等）、設定網路超時時間、設定導航條樣式等背景色。注意：該檔案不可新增任何註釋內容
微信平臺 app.json 配置文件
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
    })
  }
})

複製程式碼