微信小程序点击按钮变字体颜色

Question

微信小程序开发：

实现一个按钮，和一段文字“Hello World”,点击时依次按照“红，绿，蓝，绿”的次序循环变换文字颜色。即：红，绿，蓝，绿，红，绿，蓝，绿

关键点：一个按钮
实现颜色变化
应用JS进行开发

Answer 1

wxml部分

<view class="container">
  <view class="usermotto">
    <text class="user-motto" style="color: {{color[index]}};">Hello World</text>
  </view>
  <button type="primary" bindtap="changeColor">变色</button>
</view>

js部分

Page({
  data: {
    color: ['red', 'green', 'blue','green'],
    index: 0
  },
  changeColor(){
    this.setData({
      index: (this.data.index + 1) % 4
    })
  },
})

Answer 2

这光光js搞不定哦。要写wxml的

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
      color:'color:red;'
  },
  todo(){
    console.log(1)
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})