保姆级教程：写出自己的移动应用和小程序（篇六）

Posted 2022-08-18 火爆的小茶壶

上期文章我们学习了如何写出小程序的样式内容。今天我们来看一下如何在小程序中使用 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.com/miniprogram/dev/api/ui/interaction/wx.showModal.html​​>

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

<​​https://developers.weixin.qq.com/miniprogram/dev/api/​​>

---

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