上一篇我们学习了如何写小程序的样式内容。今天我们就来看看如何在小程序中使用js，即在小程序中使用脚本内容来处理内容或样式的变化。小程序中的JS如何与WXML和WXSS关联：组织方法关联以这个视图页面为例，在小程序代码的组织方法中，WXML、WXSS和JS的文件名必须命名相同，否则它们将会产生一个错误。如下：为了讲解方便，我们直接使用微信开发者工具和微信小程序语法进行讲解，不过不用担心，在FinClip中，这些内容都是通用的。我们尝试在view.js中输入：console.log('Thislineisprintedbyview.js')然后运行小程序，切换到查看页面，可以看到控制台会打印出this的log线。WXML数据绑定作为小程序的开发者，我们很多同学过去都有过前端开发的经验，经常使用React、Vue等主流前端框架。对于Vue，如果需要在模板页面中使用js数据对象的变量，那么只需要在js的数据对象中声明变量，然后以{{变量}的形式嵌入到HTML中即可}在模板中。能。小程序中也采用了类似的做法，注意代码：//view.jsPage({onShareAppMessage(){return{title:'view',path:'pages/component/view/view'}},data:{foo:'22'}})//这里在view.js中的data对象中，声明foo:'test'//view.wxml{{foo}}view的data中.js声明了一个变量foo，这个变量在view.wxml中以模板的形式使用。页面首次渲染后如下：小程序中JS的使用一般来说，我们会通过JS来增加小程序页面的交互性。例如：用户点击了页面上的某个元素/按钮，然后触发了某个功能。函数的执行会导致一些数据发生变化，最终呈现在页面上。用户通过调用接口获取数据，然后执行某个功能。执行会导致一些数据发生变化，最终呈现在页面上（下一章讨论）。我们先来看看场景1。我们考虑如下功能：点击页面上的一个按钮，使页面上的一个色块随机变色。我们先写页面结构和样式：//view.wxml{{bgColor}}改变颜色//view.wxss.view-container{display:flex;弹性方向：列；对齐项目：居中；高度：500rpx；填充：30rpx；}.box{宽度：300rpx；高度：300rpx；颜色：#fff；显示：弹性；证明内容：居中；对齐项目：居中；}这里的bgColor是从js数据中设置的，它的默认值是：'#000000'，所以我们看到的初始页面是这样的：接下来我们写相应的js代码，如下：Page({data:{bgColor:'#000000'},changeColor(){constcolorList=['#00ff00','#ff0000','#10f102','#f1f412']constindex=Math.floor(Math.random()*colorList.length)this.setData({bgColor:colorList[index]})}})HerePage注册小程序中的一个页面。它接受一个Object类型的参数，Object中包含了保存页面初始数据的数据，以及按钮的事件处理函数changeColor，每次点击按钮都会触发。函数逻辑声明一个颜色列表，随机选择其中一个，通过setData设置bgColor的值。注意这里的this.setData({bgColor:'xxx'})会改变data中bgColor的值，并驱动view重新渲染，色块的颜色也会改变。点击按钮后，查看页面如下：至此，一个简单的小程序交互就完成了。接下来我们想一下如果我们不想点击随机变色，而是点击不同的按钮改变不同的颜色怎么办：首先，我们修改上面的模板，如下：//view.wxml{{bgColor}}将颜色更改为红色将颜色更改为蓝色//这里新增一个按钮，然后给每个按钮添加data-color属性，并赋值对应。接下来我们要修改js，数据对象部分不是Change，主要是修改changeColor函数体：//view.jschangeColor(e){constcolor=e.target.dataset.colorthis.setData({bgColor:color})}changeColor的参数e为按钮事件，this位置为'tap'，e.target对应被点击的组件。通过e.target.dataset可以读取当前点击按钮的data-color值，设置色块的颜色值。小程序常用API在使用小程序的过程中调用我们，会有一些经常用到的功能，比如点击某个位置弹出模态弹窗，最好是存储数据，比如分享小程序跟其他的一样，而这些都是通过小程序的js调用小程序API来实现的。下面简单介绍一下模态弹窗的使用。对于模态弹窗，我们将.wxml改为clickme，.js改为Page({clickMe(){wx.showModal({title:'我是模态弹窗的标题',cancelColor:'#ff0000',content:'我是模态弹窗的内容'})}})点击按钮和下面的模态弹窗-up窗口会出现：showModal在这个API中可以随意配置标题，内容，按钮颜色等，具体可以参考这个API文档：https://developers.weixin.qq...的API小程序一般以wx.xxxx的格式出现。各个API的详细使用方法请参考：https://developers.weixin.qq....本教程讲解如何使用JS文件处理小程序中内容或样式内容的变化。下一篇我们会讲到如何成功发起网络请求并获取相应的数据。更多信息可以在FinClip官方网站上找到。
