鑽石舞台

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

本期文章屬於《手把手系列教學》的第六篇，如果你還不太了解這一系列，可以點擊這裡查看詳情。

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

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

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

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

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

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

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

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

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

比如：

用戶去點擊頁面的某一個元素/按鈕然後去觸發某個函數，函數執行會導致某些數據發生變化，最後渲染在頁面上

用戶通過去調用一個接口獲取數據，然後執行某個函數，函數執行會導致某些數據發生變化，最後渲染在頁面上（下一章節討論）

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

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

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

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

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

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

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

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

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

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

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

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

我們把 .wxml 修改為

把 .js 修改為

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

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

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

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

https://developers.weixin.qq.com/miniprogram/dev/api/

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

在下一期的文章中，我們將會一起聊聊如何使用 JSS，服務端調用等相關的內容，敬請期待。