在上期文章中，我们主要聊了聊如何写出小程序的样式内容。在本期文章中，我们来看一下如何在小程序中使用 js 的，即在小程序中使用脚本内容处理内容或样式的改变。

本期文章属于《手把手系列教学》的第六篇，如果你还不太了解这一系列，可以点击 这里 查看详情。

以这个 view 页面为例，在小程序代码的组织方式中， WXML, WXSS 以及 JS 的文件名必须是命名一致的，否则将会产生错误。如下：

为了方便讲解，我们直接使用了微信开发者工具与微信小程序语法进行讲解，但不要担心，在 FinClip 中，这一切内容都是通用的。

我们尝试在 view.js 中输入：

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

然后运行小程序，切换到 view 页面，即可以看到控制台会打印出该行日志。

作为小程序的开发者，我们很多同学过去都有前端的开发经验，也经常使用 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 增加小程序页面的交互性。

比如：

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 值，以此去设置色块颜色值

我们使用小程序过程中，会有一些功能时经常用到的，比如说点击某个位置弹出一个模态弹窗，不如存储数据，比如分享小程序给他人，而这些都是通过小程序 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.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

小程序的 API 一般都以 wx.xxxx 的格式出现，每个 API 的详细用法可以参考：

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

本期教程讲解了在小程序中，如何通过 JS 文件来处理内容或样式的内容变化。下一期文章我们将会聊聊如何成功发起网络请求，并获得对应的数据。

在下一期的文章中，我们将会一起聊聊如何使用 JSS，服务端调用等相关的内容，敬请期待。