目录
总结概述
本章首先讲解了小程序的目录结构,然后通过目录结构介绍了小程序的框架,最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识,大家必须深刻理解和熟练掌握,并勤写代码多加练习,为后续的学习打下扎实的基础。
首先,我们用四个编程操作题来巩固第二章所学的知识
一.第一题
第一步,首先,我们应该在index.wxml输入代码,如下所示:
<!--index.wxml-->
<!--苏冷教学-->
<view class='con'>
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i"><!--对应行-->
<view class='inline' wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j"><!--对应列-->
<view wx:if="{{j<=i}}">
{{i}}×{{j}}={{i*j}}
</view>
</view>
</view>
</view>
第二步,我们应该在index.wxss输入代码,如下所示:
/** index.wxss **/
.con {
font-size: 14px; /** 设置字体大小 **/
margin: 10px; /** 设置外边距 **/
}
.inline {
display: inline-block; /** 设置布局,一行显示,**/
width: 65px; /** 设置宽度 block的**/
}
第三步, 我们应该在index.json输入代码,如下所示:
{
"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText": "九九乘法表(苏冷)",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "dark"
}
运行结果:
即完成操作第一题。
二.第二题
第一步,首先,我们应该在index.js输入代码,如下所示:
Page({
data:{
message: []
},
onLoad: function () {
this.findmessage();
},
findmessage: function (){
const num =[];
for (let i=100;i<1000;i++){
const a = Math.floor(i / 100);
const b = Math.floor((i % 100) / 10); const c=i% 10;
if (a ** 3 + b** 3 +c**3===i){
num.push(i);}}
this.setData({
message: num});
console.log("水仙花数:"+num);
},
})
第二步,我们应该在index.wxml输入代码,如下所示:
<view class="App">
<view class="app">
<text wx:for="{{message}}" wx:key="*this">{{item}}</text>
</view>
</view>
运行结果:
第二题完成。
三.第三题
第一步,首先, 我们应该在index.js输入代码,如下所示:
Page({
data:{
narcissisticNumbers: []
},
onLoad: function () {
this.findNarcissisticNumbers();
},
findNarcissisticNumbers: function (){
const numbers =[];
for (let i=100;i<1000;i++){
const a = Math.floor(i / 100);
const b = Math.floor((i % 100) / 10); const c=i% 10;
if (a ** 3 + b** 3 +c**3===i){
numbers.push(i);}}
this.setData({
narcissisticNumbers: numbers});}
});
第二步,我们应该在index.json输入代码,如下所示:
{
"navigationBarBackgroundColor": "#000000",
"navigationBarTitleText": "水仙花数总共有(苏冷)",
"navigationBarTextStyle": "white",
"backgroundTextStyle": "dark"
}
第三步,我们应该在index.wxml输入代码,如下所示:
<view class="container">
<view class="narcissistic-numbers">
<text wx:for="{{narcissisticNumbers}}" wx:key="*this">{{item}}</text></view>
</view>
第四步,我们应该在index.wxss输入代码,如下所示:
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.narcissistic-numbers {
margin-top: 20px;
}
.narcissistic-numbers text {
display: block;
margin-bottom: 10px;
}
运行结果:
四.第四题
(1)方法一:简单的<view>运行
第一步,在index.wxml中写入代码:
<view class="diamond">
<view> *</view>
<view> ***</view>
<view> *****</view>
<view> *******</view>
<view>*********</view>
<view> *******</view>
<view> *****</view>
<view> ***</view>
<view> *</view>
</view>
第二步, 在index.wxss中写入代码:
.diamond {
text-align: center;
margin-top: 20px;
font-size: 20px;
}
运行结果:
(2)方法二:
第一步,在index.wxml中写入代码:
<view class="diamond">
<block wx:for="{{diamondArray}}" wx:for-item="item" wx:for-index="index">
<text class="diamond-item">{{item}}</text>
</block>
</view>
第二步, 在index.wxss中写入代码:
.diamond {
display: flex;
flex-direction: column;
align-items: center;
}
.diamond-item {
font-size: 20px;
margin-bottom: 10px;
}
第二步, 在index.js中写入代码:
Page({
data: {
diamondArray: [' * ', ' *** ', ' ***** ', '*******', ' ***** ', ' *** ', ' * ']
}
})
运行结果:
(3)方法三:for
第一步,在index.wxml中写入代码:
<!-- pages/index/index.wxml -->
<view class="diamond-container">
<text>{{diamond}}</text>
</view>
第二步,在index.js中写入代码:
// pages/index/index.js
Page({
data: {
diamond: ''
},
onLoad: function() {
const size = 7;
let diamondString = '';
// 上半部分
for (let i = 0; i < size; i++) {
for (let j = 0; j < size - i - 1; j++) {
diamondString += ' ';
}
for (let k = 0; k < 2 * i + 1; k++) {
diamondString += '*';
}
// 换行
diamondString += '\n';
}
// 下半部分
for (let i = size - 2; i >= 0; i--) {
for (let j = 0; j < size - i - 1; j++) {
diamondString += ' ';
}
// 打印星号
for (let k = 0; k < 2 * i + 1; k++) {
diamondString += '*';
}
// 换行
diamondString += '\n';
}
// 更新数据,渲染菱形图案
this.setData({
diamond: diamondString
});
}
});
第三步,在index.wxss中写入代码:
/* pages/index/index.wxss */
.diamond-container {
text-align: center; /* 文字居中 */
}
运行结果:
好啦~今天就分享到这里啦~感谢大家阅读我的博客,希望我的文章能够对你们有所帮助。如果你们有任何问题或建议,请随时联系我。