上期文章我們學習瞭如何寫出小程序的樣式內容。今天我們來看一下如何在小程序中使用 js ，即在小程序中使用腳本內容處理內容或樣式的改變。

小程序中的 JS 是如何跟 WXML 以及 WXSS 關聯起來的：組織方式關聯

以這個 view 頁面為例，在小程序代碼的組織方式中， WXML, WXSS 以及 JS 的文件名必須是命名一致的，否則將會產生錯誤。如下：

為了方便講解，我們直接使用了微信開發者工具與微信小程序語法進行講解，但不要擔心，在 FinClip 中，這一切內容都是通用的。

我們嘗試在 view.js 中輸入：

console.log('該行由 view.js 所打印')

然後運行小程序，切換到 view 頁面，即可以看到控制枱會打印出該行日誌。

WXML 數據綁定

作為小程序的開發者，我們很多同學過去都有前端的開發經驗，也經常使用 React ， Vue 這種主流的前端框架。

對於 Vue 來説，如果你需要在模版頁面中使用 js 數據對象的變量，那麼你只需要在 js 的 data 對象中聲明變量，然後在模版中的採用 {{ variable }} 的形式嵌入到 html 中即可。

小程序中也採取類似的方式，注意一下代碼：

// view.js
Page({
  onShareAppMessage() {
    return {
      title: 'view',
      path: 'pages/component/view/view'
    }
  },
  data: {
    foo: '22'
  }
})

// 這裏在 view.js 中的 data 對象中，聲明 foo: 'test'

// view.wxml
<view>{{ foo }}</view>

在 view.js  的 data 中聲明瞭一個變量 foo， 在 view.wxml 中通過模版的形式使用了該變量，則頁面初次渲染後如下：

小程序中的 JS 的使用

通常來説，我們會通過 JS 增加小程序頁面的交互性。

比如：

1. 用户去點擊頁面的某一個元素/按鈕然後去觸發某個函數，函數執行會導致某些數據發生變化，最後渲染在頁面上
2. 用户通過去調用一個接口獲取數據，然後執行某個函數，函數執行會導致某些數據發生變化，最後渲染在頁面上（下一章節討論）

我們先來看看場景一，我們考慮實現以下功能：點擊頁面的一個按鈕，讓頁面的一個色塊隨機變色。

我們先來寫頁面結構跟樣式部分：

// view.wxml
<view class="view-container">
  <view class="box"style="background-color: {{ bgColor }}">{{ bgColor }}</view>
  <button size="small" type='primary' bindtap="changeColor">改變顏色</button>
</view>

// view.wxss
.view-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 500rpx;
  padding: 30rpx;
}

.box {
  width: 300rpx;
  height: 300rpx;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

這裏的 bgColor 是從 js 的 data 中設置的，其默認值為： ‘#000000’， 所以我們能看到的初始的頁面長這樣子的：

接下來我們編寫相應的 js 代碼，如下：

    Page({
      data: {
        bgColor: '#000000'
      },
      changeColor() {
        const colorList = ['#00ff00', '#ff0000', '#10f102', '#f1f412']
        const index = Math.floor(Math.random() * colorList.length)
        this.setData({
          bgColor: colorList[index]
        })
      }
    })

這裏的 Page  註冊小程序中的一個頁面。接受一個 Object 類型參數， 而 Object 中包含了保存頁面初始數據的  data，以及 button 的事件處理函數 changeColor，每一次點擊 button 都會觸發該函數。

函數邏輯

聲明一個顏色列表，隨機選中其一，通過 setData 設置 bgColor 的值。注意，這裏的 this.setData({ bgColor: 'xxx' }) 會改變 data 中 bgColor 的值，並驅動視圖重新渲染，色塊顏色發生變化。點擊 button 後，視圖頁面如下：

這樣子就完成了一個簡單的小程序交互了。接下來，我們不妨想一下，如果我們不想要點擊隨機變化顏色，而是點擊不同的按鈕，變化不同顏色應該怎麼處理：

首先，我們還是先上面那樣子改造一下模版，如下：

// view.wxml
    <view class="view-container">
      <view class="box"style="background-color: {{ bgColor }}">{{ bgColor }}</view>
      <button size="small" type='primary' data-color='red' bindtap="changeColor">改變顏色為紅色</button>
      <button size="small" type='primary' data-color='blue' bindtap="changeColor">改變顏色為藍色</button>
    </view>

// 這裏新加了一個按鈕，然後給每個按鈕都加上 data-color 屬性，並賦相應的值

接下來，我們需要修改 js， data 對象部分不變，主要修改 changeColor 函數體：

// view.js
changeColor(e) {
  const color = e.target.dataset.color
    this.setData({
    bgColor: color
  })
}

changeColor 的參數 e ，即為 button 的事件，此處為 ‘tap’， 而 e.target 對應的是點擊的組件，通過 e.target.dataset  就可以讀取到當前點擊 button 的 data-color 值，以此去設置色塊顏色值

小程序常見 API 的調用

我們使用小程序過程中，會有一些功能時經常用到的，比如説點擊某個位置彈出一個模態彈窗，不如存儲數據，比如分享小程序給他人，而這些都是通過小程序 js 去調用小程序 API 的方式來實現的。

下面讓我們簡單介紹一下模態彈窗的使用。

模態彈窗

我們把把 .wxml 修改為

<button bindtap="clickMe">點擊我</button>

把 .js 修改為

Page({
  clickMe() {
    wx.showModal({
      title: '我是一個模態彈窗的標題',
      cancelColor: '#ff0000'，
            content: '我是模態彈窗的內容'

    })
  }
})

點擊按鈕即可出現如下模態彈窗：

showModal 這個 API 中, 可以隨意配置 title， content ，按鈕顏色等，詳情可以參考該 API 文檔：

https://developers.weixin.qq....

小程序的 API 一般都以 wx.xxxx 的格式出現，每個 API 的詳細用法可以參考：

https://developers.weixin.qq....

本期教程講解了在小程序中，如何通過 JS 文件來處理內容或樣式的內容變化。下一期文章我們將會聊聊如何成功發起網絡請求，並獲得對應的數據。
更多信息可進入FinClip官網瞭解。