|
一 微信小程序开发工具界面
二 目录结构
第一次进到页面它的目录结构如下：
三 需要注意的问题
(1)添加的新页面文件，都需要在app.json中进行配置，否则页面报错。
(2)工作原理 通过在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}" 相当于click事件。
在js代码中，可以通过this.data.n9获取数据，这些数据的定义都是在js中
通过在<view id="{{btn_a}}"><view>填写id，在具体的函数中，event.target.id去判断id是多少，进行区分。就可以实现，不同标签的点击，然后进行业务逻辑。如果需要访问数据，则是通过this.data.xx。
计算器的wxml页面
-
<view class="content">
-
<view class="xianshi">{{screenNum}}</view>
-
<view class="anniu">
-
<view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>
-
<view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>
-
<view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>
-
<view class="item blue" bindtap="btnClick" id="{{na}}">+</view>
-
</view>
-
<view class="anniu">
-
<view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>
-
<view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>
-
<view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>
-
<view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>
-
</view>
-
<view class="anniu">
-
<view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>
-
<view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>
-
<view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>
-
<view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>
-
</view>
-
<view class="anniu">
-
<view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>
-
<view class="item blue" bindtap="btnClear">AC</view>
-
<view class="item blue" bindtap="btnJs">=</view>
-
<view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>
-
邀请
原作者: 模板之家
来自: 网络收集
| 
