WeChat アプレット計算機の例

<view class="content">
    <ビュークラス="num">{{num}}</ビュー>
    <view class="operotor">{{op}}</view>
</ビュー>
<view class="entry">
    <表示>
        <view class="item" bindtap="resetBtn">c</view>
        <view class="item" bindtap="delBtn">削除</view>
        <view class="item" bindtap="opBtn" data-val="%">%</view>
        <view class="item" bindtap="opBtn" data-val="/">÷</view>
    </ビュー>
    <表示>
        <view class="item" bindtap="numBtn" data-val="7">7</view>
        <view class="item" bindtap="numBtn" data-val="8">8</view>
        <view class="item" bindtap="numBtn" data-val="9">9</view>
        <view class="item" bindtap="opBtn" data-val="*">x</view>
    </ビュー>
    <表示>
        <view class="item" bindtap="numBtn" data-val="4">4</view>
        <view class="item" bindtap="numBtn" data-val="5">5</view>
        <view class="item" bindtap="numBtn" data-val="6">6</view>
        <view class="item" bindtap="opBtn" data-val="-">-</view>
    </ビュー>
    <表示>
        <view class="item" bindtap="numBtn" data-val="1">1</view>
        <view class="item" bindtap="numBtn" data-val="2">2</view>
        <view class="item" bindtap="numBtn" data-val="3">3</view>
        <view class="item" bindtap="opBtn" data-val="+">+</view>
    </ビュー>
    <表示>
        <view class="item tow" bindtap="numBtn" data-val="0">0</view>
        <view class="item one" bindtap="dotBtn" data-val=".">.</view>
        <view class="item one" bindtap="opBtn" data-val="=">=</view>
    </ビュー>
</ビュー>

ページ {
  ディスプレイ: フレックス;
  flex-direction: 列;
  高さ: 100%;
}
。コンテンツ {
  フレックス: 1;
  背景色: #f3f6fe;
  位置: 相対的;
}
.コンテンツ .num {
  位置: 絶対;
  フォントサイズ: 27pt;
  下部：5vh;
  右：3vw;
}
.コンテンツ .演算子 {
  フォントサイズ: 15pt;
  位置: 絶対;
  下部：1vh;
  右：3vw;
}
.エントリ {
  フレックス: 1;
  フォントサイズ: 17pt;
  上境界線: 1rpx 実線 #ccc;
}
.entry .item {
  フレックス: 1;
  パディング: 30rpx 0;
  テキスト配置: 中央;
  フレックスベース: 25%;
  左境界線: 1rpx 実線 #ccc;
  下部境界線: 1rpx 実線 #ccc;
}
.entry > ビュー {
  ディスプレイ: フレックス;
}
.entry > ビュー .tow {
  フレックス: 2;
}
.entry > ビュー .one {
  フレックス: 1;
}

ページ（{
    データ： {
        num: "", // 数値を格納 op: "" // 演算子を格納},
    結果: null、  
    isClear: false、

    numBtn: 関数(e) {
        var num = e.target.dataset.val
            //console.log(num) はデータ値を取得します console.log(this.isClear)
        if (this.data.num === "0" || this.isClear) {
            this.setData({ 数値: 数値 })
            this.isClear = false
        } それ以外 {
            this.setData({ num: this.data.num + num })
        }
    },

    opBtn: 関数(e) {
        var op = this.data.op
        var num = 数値(this.data.num)
        this.setData({ op: e.target.dataset.val })
        if (this.isClear) {
            戻る
        }
        this.isClear = true
        if (this.result === null) {
            this.result = 数値
            戻る
        }
        （op === "+"の場合）{
            this.result = this.result + 数値
        } そうでない場合 (op === "-") {
            this.result = this.result - 数値
        } そうでない場合 (op === "*") {
            this.result = this.result * 数値
        } そうでない場合 (op === "/") {
            this.result = this.result / 数値
        } そうでない場合 (op === "%") {
            this.result = this.result % 数値
        }
        this.setData({ num: this.result })
    },

    ドットボタン: 関数() {
        if (this.isClear) {
            this.setData({ 数値: "0." })
            this.isClear = false
            戻る
        }
        (this.data.num.indexOf(".") >= 0) の場合 {
            戻る
        }
        this.setData({ num: this.data.num + "." })
    },
    delBtn: 関数() {

        var num = this.data.num.substr(0, this.data.num.length - 1)
        this.setData({ num: num === "" ? "0" : num })
    },
    リセットボタン: 関数() {
        this.result = null
        this.isClear = false
        this.setData({ 数値: "0", 操作: "" })
    }
})