微信

微信小程序-显示用户输入文本长度

云博小周1 Min Read

以下是一个简单的微信小程序示例，可以让用户输入文本并显示该文本的长度：

  1. 创建小程序目录结构

在任意位置创建一个新的文件夹，用于存放小程序代码。在该文件夹下创建以下文件和文件夹结构：

|- app.js
|- app.json
|- app.wxss
|- pages/
   |- index/
      |- index.js
      |- index.json
      |- index.wxml
      |- index.wxss
  1. 编写 app.js 文件

app.js 是小程序的入口文件，用于注册应用程序，并监听生命周期事件。在该文件中，我们可以编写以下代码：

App({
  onLaunch: function () {
    // 小程序启动时执行的代码
  },
  globalData: {
    text: '', // 存储输入的文本
  }
})
  1. 编写 app.json 文件

app.json 是小程序的配置文件，用于配置页面路径、窗口样式等。在该文件中，我们可以编写以下代码：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "文本长度",
    "navigationBarTextStyle": "black"
  }
}
  1. 编写 index.wxml 文件

index.wxml 是页面的布局文件，用于定义页面结构。在该文件中，我们可以编写以下代码：

<view class="container">
  <view class="title">文本长度</view>
  <input class="input" placeholder="请输入文本" bindinput="inputChange" />
  <button class="btn" bindtap="checkLength">计算长度</button>
  <view class="result">{{textLength}}</view>
</view>
  1. 编写 index.wxss 文件

index.wxss 是页面的样式文件，用于定义页面样式。在该文件中，我们可以编写以下代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.title {
  font-size: 20px;
  margin-bottom: 20px;
}
.input {
  width: 80%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
}
.btn {
  width: 80%;
  height: 40px;
  padding: 0 10px;
  background-color: #007aff;
  color: #fff;
  border: none;
}
.result {
  font-size: 20px;
  margin-top: 20px;
}