企业官网建设流程全解析

一、完成效果

二、制作流程

1.编辑index.wxml文件

<!--index.wxml--> <navigation-bar title="checkbox和 radio 组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">满江红·写怀</view> <view class="txt" style="font-weight: {{myBold}};font-style: {{myItalic}};text-decoration: {{myUnderline}};font-size: {{myFontSize}};"> <view> 怒发冲冠，凭栏处，潇潇雨歇。抬望眼，仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲，白了少年头，空悲切。 </view> <view> 靖康耻，犹未雪。臣子恨，何时灭。驾长车，踏破贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。 </view> </view> <view class="other"> <checkbox-group bindchange="checkboxChange"> <checkbox value="isBold">加粗</checkbox> <checkbox value="isItalic">倾斜</checkbox> <checkbox value="isUnderline">下划线</checkbox> </checkbox-group> <radio-group bindchange="radioChange"> <radio value="30rpx" checked="true">30rpx</radio> <radio value="40rpx">40rpx</radio> <radio value="50rpx">50rpx</radio> <radio value="60rpx">60rpx</radio> </radio-group> </view> </view> </scroll-view>

2.修改app.wxss文件

/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } /**app.wxss**/ .box { /* 设置外边距 */ margin: 20rpx; /* 设置内边距 */ padding: 20rpx; /* 设置边框 */ border: 2rpx solid silver; } .title { /* 设置字体大小 */ font-size: 40rpx; /* 设置字体加粗 */ font-weight: bolder; /* 设置居中对齐 */ text-align: center; /* 设置下外边框 */ margin-bottom: 30rpx; /* 设置字体颜色 */ color: red; }

3.修改index.wxss文件

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } radio, checkbox { margin: 20rpx; } .txt { /* 设置文本两端对齐 */ text-align: justify; text-indent: 2em; margin: 60rpx 0; } .other { text-align: center; margin: 60rpx 0; }

4.修改index.js文件

// index.js Page({ data: { myFontSize: '50rpx' }, /** * checkbox-group组件事件函数 */ checkboxChange(e) { console.log(e); // 定义存放checkbox-group所有选中项数组 let selected = [] // 定义是否加粗的变量并初始化 let myBold = '' // 定义是否斜体的变量并初始化 let myItalic = '' // 定义是否下划线的变量并初始化 let myUnderline = '' // 获取checkbox-group中的所有选中项 selected = e.detail.value // 循环遍历所有的选中项 for (let index = 0; index < selected.length; index++) { const element = selected[index]; // 如果加粗的 checkbox 组件被选中 if (element === 'isBold') { myBold = 'bold' } // 如果 倾斜 的 checkbox 组件被选中 if (element === 'isItalic') { myItalic = 'italic' } // 如果 下划线 的 checkbox 组件被选中 if (element === 'isUnderline') { myUnderline = 'underline' } } // 将局部变量的值赋给绑定变量，驱动视图层更新 this.setData({ myBold, myItalic, myUnderline }) }, /** * radio-group组件事件函数 */ radioChange(e) { console.log(e); this.setData({ // 设置radio的value值 myFontSize: e.detail.value }) } })

三、个人总结

希望可以坚持学下去