微信小程序简单入门

1、前情概述

• 优快云的“水文”搬运了一波微信公众号，突然就想简单搞一个小程序玩一下，本文只是基本的input，button等制作小程序中使用的简单组件,其它的内容不作介绍（软件安装参考）。
• 部分参考内容(包含示例程序)：

1、input | 微信开放文档
2、button | 微信开放文档

2、程序示例

• index.wxml(其中前五个为输入框，接着有一个显示框，以及一个按钮)（前五个输入框参考官方示例文件中小数输入示例）
• <input />为输入标签，bindinput为JS文件中绑定的处理函数，type为输入数据类型；
• <view > </view>为显示标签；
• <button></button>为按钮标签，bindtap为JS文件中绑定的处理函数，hover-class为式样，存在于wxss文件
• 更多属性说明参见官方文档

<!--index.wxml-->
<view class="page-body">
<view class="page-section">
    <view class="weui-cells__title">请输入SNR（dB）</view>
    <view class="weui-cells weui-cells_after-title">         //标题下建立输入框
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" value="{{number1}}" bindinput='bindKeyInput1' type="digit" placeholder=" "/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">请输入调制阶数(QPSK为2)</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" value="{{number2}}" bindinput='bindKeyInput2' type="digit" placeholder=" "/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">请输入信道编码码率</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" value="{{number3}}" bindinput='bindKeyInput3' type="digit" placeholder=" "/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">请输入(上采样倍数)</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" value="{{number4}}" bindinput='bindKeyInput4' type="digit" placeholder=" "/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">请输入滤波器滚降系数</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" value="{{number5}}" bindinput='bindKeyInput5' type="digit" placeholder=" "/>
      </view>
    </view>
  </view>
  <view class="page-section">
    <view class="weui-cells__title">基带带外是否存在信号（1是0否）</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <input class="weui-input" value="{{number6}}" bindinput='bindKeyInput6' type="digit" placeholder=" "/>
      </view>
    </view>
  </view>
  <view class="numview">转换结果={{test02}}</view>
</view>

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="calculate" hover-class="other-button-hover"> 开始计算 </button>

• index.js（data为变量定义，其余为wxml定义的处理函数）
• parseFloat将输入的字符串类型转变为浮点数；
• .toString()将数字类型变为字符串类型，.toFixed(4)表示保留四位小数

const app = getApp();
Page({
  data: {
    number1: '',
    number2: '',
    number3: '',
    number4: '',
    number5: '',
    number6: '',
    test02:''
  },
  bindKeyInput1: function (e) {
    this.data.number1 = parseFloat(e.detail.value)
  },
  bindKeyInput2: function (e) {
    this.data.number2 = parseFloat(e.detail.value)
  },
  bindKeyInput3: function (e) {
    this.data.number3 = parseFloat(e.detail.value)
  },
  bindKeyInput4: function (e) {
    this.data.number4 = parseFloat(e.detail.value)
  },
  bindKeyInput5: function (e) {
    this.data.number5 = parseFloat(e.detail.value)
  },
  bindKeyInput6: function (e) {
    this.data.number6 = parseFloat(e.detail.value)
  },
  calculate: function () {
    var that = this;
      that.setData({
        test02: this.data.number1.toString() + "-10log10(" + (this.data.number3 * this.data.number2 / (this.data.number4 * (1 + this.data.number5 * this.data.number6))).toFixed(4)+")",
    })
  }
})

• index.wxss为样式设置

/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover {
  background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
  background-color: blue;
}
button {margin: 10px;}

3、效果图

微信公众号：通信随笔XIDIAN