0

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

 1 year ago
source link: https://blog.51cto.com/u_15730483/5581200
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

上期文章我们学习了如何写出小程序的样式内容。今天我们来看一下如何在小程序中使用 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 中通过模版的形式使用了该变量，则页面初次渲染后如下：



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



小程序中的 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’， 所以我们能看到的初始的页面长这样子的：



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



接下来我们编写相应的 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 后，视图页面如下：



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



这样子就完成了一个简单的小程序交互了。接下来，我们不妨想一下，如果我们不想要点击随机变化颜色，而是点击不同的按钮，变化不同颜色应该怎么处理：



首先，我们还是先上面那样子改造一下模版，如下：



// 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: '我是模态弹窗的内容'

})
  }
})



点击按钮即可出现如下模态弹窗：



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



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 文件来处理内容或样式的内容变化。下一期文章我们将会聊聊如何成功发起网络请求，并获得对应的数据。

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK