共计 3022 个字符，预计需要花费 8 分钟才能阅读完成。
上期文章咱们学习了如何写出小程序的款式内容。明天咱们来看一下如何在小程序中应用 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 减少小程序页面的交互性。
比方：
- 用户去点击页面的某一个元素 / 按钮而后去触发某个函数，函数执行会导致某些数据发生变化，最初渲染在页面上
- 用户通过去调用一个接口获取数据，而后执行某个函数，函数执行会导致某些数据发生变化，最初渲染在页面上（下一章节探讨）
咱们先来看看场景一，咱们思考实现以下性能：点击页面的一个按钮，让页面的一个色块随机变色。
咱们先来写页面构造跟款式局部：
// 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 官网理解。
