第二章 微信小程序作业

二，操作题

1.利用wx:if及wx:for数据绑定来实现输出乘法口诀的编程

js文件代码：

Page({
  data: {
    logs: [],
    array:[9,8,7,6,5,4,3,2,1],
  },
  
})

json文件代码:

{
  "navigationBarTitleText": "乘法口诀表",
  "usingComponents": {}
}

wxml文件代码：

<view id="center">
  九九乘法口诀表
</view> 
  <view class="border" >
    <view wx:for="{{array}}" wx:for-item="i">
      <view class="inline" wx:for="{{array}}" wx:for-item="j">
        <view class="size" wx:if="{{i>=j}}">
          {{i}}*{{j}}={{i*j}}
        </view>
      </view>
    </view>
  </view>

wxss文件代码：

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}
.inline{
  display:inline-block;
}
.size{
  font-size: 9px;
  padding-right:1em;
}
.border{
  border: 1px solid skyblue;
}
#center{
  font-weight: 600;
  text-align: center;
}
.ling{
  margin-left: 200px;
}
.b{
  margin-left: -6.5px;
}
.c{
  margin-left: -13px;
}
.d{
  margin-left: -20px;
}
.e{
  margin-left: -27px;
}

运行效果图：

2..编写程序，在页面控制台输出水仙花数（水仙花数是指一个3位数的各位上的数字的3次幂之和等于它本身。例）

1在pages文件夹新建dong文件夹，分别新建js,json,wxml,wxss文件，

代码如下：

Page({
  data: {
    narcissisticNumbers: []
  },
  onLoad: function () {
    const narcissisticNumbers = this.findNarcissisticNumbers();
    this.setData({
      narcissisticNumbers: narcissisticNumbers
    });
  },
  isNarcissisticNumber: function (num) {
    const strNum = num.toString();
    const digits = strNum.length;
    let sum = 0;
  
    for (let i = 0; i < digits; i++) {
      sum += Math.pow(parseInt(strNum[i]), digits);
    }
  
    return sum === num;
  },
  findNarcissisticNumbers: function () {
    const narcissisticNumbers = [];
  
    for (let i = 100; i < 1000; i++) {
      if (this.isNarcissisticNumber(i)) {
        narcissisticNumbers.push(i);
      }
    }
  
    return narcissisticNumbers;
  }
});

{
  "navigationBarTitleText": "水仙花 n"
 
}

<view class="container">
  <view class="row">水仙花数共有：
  
    <view wx:for="{{narcissisticNumbers}}" wx:key="{{index}}">
      <text>{{item}} </text>
    </view>
  </view>
</view>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.row {
  display: flex;
  flex-direction: row;
}
 
.container text {
  margin: 7px;
}

修改app.json文件

修改以下代码如下：

{
  "pages": [
    "pages/dong/dong",
    "pages/logs/logs"
  ],

运行效果图：

3.编写程序，在页面中输出水仙花数，如图2-23

js文件代码：

Page({
  data: {
    narcissisticNumbers: []
  },
  onLoad: function () {
    const narcissisticNumbers = this.findNarcissisticNumbers();
    this.setData({
      narcissisticNumbers: narcissisticNumbers
    });
  },
  isNarcissisticNumber: function (num) {
    const strNum = num.toString();
    const digits = strNum.length;
    let sum = 0;
  
    for (let i = 0; i < digits; i++) {
      sum += Math.pow(parseInt(strNum[i]), digits);
    }
  
    return sum === num;
  },
  findNarcissisticNumbers: function () {
    const narcissisticNumbers = [];
  
    for (let i = 100; i < 1000; i++) {
      if (this.isNarcissisticNumber(i)) {
        narcissisticNumbers.push(i);
      }
    }
  
    return narcissisticNumbers;
  }
});

json文件代码：

{
  "navigationBarTitleText": "水仙花数"
  
}

wxml文件代码：

<view class="container">
  <view class="row">水仙花数共有：

    <view wx:for="{{narcissisticNumbers}}" wx:key="{{index}}">
      <text>{{item}}</text>
    </view>
  </view>
</view>

wxss文件代码：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.row {
  display: flex;
  flex-direction: row;
}
 
.container text {
  margin: 5px;
}

app.json:

{
  "pages": [
    "pages/tian/tian",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#da7c0c",
    "navigationBarTitleText": "简易计算器",
    "navigationBarTextStyle":"white"
  }
  
}

运行效果图：

4.编写程序，在页面输出菱形图案

js文件：

Page({
  data: {
    students:[
      {nickname:"*"},
    ],
    students:[
      {nickname:"*",a:"*",b:"*"},
    ],
    students:[
      {nickname:"*",a:"*",b:"*",c:"*",d:"*"},
    ],
    students:[
      {nickname:"*",a:"*",b:"*",c:"*",d:"*",e:"*",f:"*"},
    ],
    students:[
      {nickname:"*",a:"*",b:"*",c:"*",d:"*",e:"*",f:"*",g:"*",h:"*"},
    ],
  },
})

json文件：

{
  "navigationBarTitleText": "菱形",
  "usingComponents": {}

}

wxml文件：

 
<view class="ling"wx:for="{{students}}">
<text class="a">{{item.nickname}}</text>
</view>
<view class="ling"wx:for="{{students}}">
<text class="b">{{item.nickname}}</text>
<text >{{item.a}}</text>
<text >{{item.b}}</text>
</view>
 
<view class="ling"wx:for="{{students}}">
<text class="c">{{item.nickname}}</text>
<text >{{item.a}}</text>
<text >{{item.b}}</text>
<text >{{item.c}}</text>
<text >{{item.d}}</text>
</view>
 
<view class="ling"wx:for="{{students}}">
<text class="d">{{item.nickname}}</text>
<text >{{item.a}}</text>
<text >{{item.b}}</text>
<text >{{item.c}}</text>
<text >{{item.d}}</text>
<text >{{item.e}}</text>
<text >{{item.f}}</text>
</view>
<view class="ling"wx:for="{{students}}">
<text class="e">{{item.nickname}}</text>
<text >{{item.a}}</text>
<text >{{item.b}}</text>
<text >{{item.c}}</text>
<text >{{item.d}}</text>
<text >{{item.e}}</text>
<text >{{item.f}}</text>
<text >{{item.g}}</text>
<text >{{item.h}}</text>
</view>
 
<view class="ling"wx:for="{{students}}">
<text class="d">{{item.nickname}}</text>
<text >{{item.a}}</text>
<text >{{item.b}}</text>
<text >{{item.c}}</text>
<text >{{item.d}}</text>
<text >{{item.e}}</text>
<text >{{item.f}}</text>
</view>
 
<view class="ling"wx:for="{{students}}">
<text class="c">{{item.nickname}}</text>
<text >{{item.a}}</text>
<text >{{item.b}}</text>
<text >{{item.c}}</text>
<text >{{item.d}}</text>
</view>
 
<view class="ling"wx:for="{{students}}">
<text class="b">{{item.nickname}}</text>
<text >{{item.a}}</text>
<text >{{item.b}}</text>
</view>
 
<view class="ling"wx:for="{{students}}">
<text class="a">{{item.nickname}}</text>
</view>

wxss文件：

 
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}
.inline{
  display:inline-block;
}
.size{
  font-size: 9px;
  padding-right:1em;
}
.border{
  border: 1px solid skyblue;
}
#center{
  font-weight: 700;
  text-align: center;
}
.ling{
  margin-left: 200px;
}
.b{
  margin-left: -6.5px;
}
.c{
  margin-left: -13px;
}
.d{
  margin-left: -20px;
}
.e{
  margin-left: -27px;
}

运行效果图：