小程序普通布局
WXML
<view class='newindex'>
<view class='banner'>
</view>
<view class='together'>
<view class='title'>列表</view>
<view class='tvs'>
<view class='titem'></view>
<view class='titem'></view>
<view class='titem'></view>
<view class='titem'></view>
<view class='titem'></view>
</view>
</view>
<view class='mainactive'>
<view class='ml'></view>
<view class='mr'>
<view class='mrt'></view>
<view class='mrb'></view>
</view>
</view>
<view class='activelook'>
<view class='altitle'>列表</view>
<view class='actives'>
<view class='month'>
</view>
</view>
</view>
</view>
WXSS
page{width: 100%;height: 100%;display: flex;flex-direction: column;}
.newindex{width:95%;height:100%;margin: 0 2.5%;}
.banner{height: 122px;width: 100%;background:#b5b5b5;border-radius: 5px;}
.together .title{height:39px;font-size: 15px;color: #000;font-weight: bold;line-height: 39px;}
.together .tvs{display: flex;justify-content: space-between;}
.together .tvs .titem{height: 46px;width: 46px;background: #b5b5b5;border-radius: 5px;}
.mainactive{height: 148px;width: 100%;margin-top: 22px;margin-bottom: 5px; display: flex;justify-content: space-between;}
.mainactive .ml{width: 149px;background: #b5b5b5;border-radius:5px 0 0 5px;}
.mainactive .mr{width: 149px;display: flex;flex-direction: column;justify-content: space-between;}
.mainactive .mr .mrt{background: #b5b5b5;height: 71px;border-radius: 0 5px 5px 0;}
.mainactive .mr .mrb{background: #b5b5b5;height: 71px;border-radius: 0 5px 5px 0;}
.activelook .altitle{height: 36px;line-height: 36px;color: #000;font-weight: bold;font-weight: bold;}
.activelook .actives .month{height:76px;width: 100%;background: #b5b5b5;border-radius: 5px;}
WXML
<view class='detail'>
<view class='bigactive'>
<view class='baimg'></view>
<view class='bitem'>
<view class='bhead'>
</view>
<view class='binfo'>
<view class='bifm'>大标题</view>
<view class='bifi'>
<view class='label'>标签</view>
<view class='label'>标签</view>
<view class='label'>标签</view>
</view>
</view>
<view class='blike'>
<view class='icon'>心</view>
<view class='ifon'>喜欢</view>
</view>
</view>
</view>
<view class='moreactive'>
<view class='mitem' wx:for="{{3}}" wx:key="*this">
<view class='mit'></view>
<view class='mib'>
<view class='mibhead'></view>
<view class='mibwrite'>
<view class='head'>小标题</view>
<view class='content'>内容内容内容内容内容</view>
</view>
</view>
</view>
</view>
</view>
WXSS
page{width: 100%;height: 100%;}
page .detail{width: 100%;display: flex;flex-direction: column;background: #eeeeee;}
.detail .bigactive{padding-top:23px;width:95%;padding: 0 2.5%;background: #ffffff;}
.detail .bigactive .baimg{height: 183px;width: 100%;background: #b5b5b5;border-radius: 4px;}
.detail .bigactive .bitem{display: flex;padding: 8px 0;}
.detail .bigactive .bitem .bhead{width: 45px;height: 45px;border-radius: 50%;background: #b5b5b5;margin-right: 13px;}
.detail .bigactive .bitem .binfo{flex: 1;}
.detail .bigactive .bitem .binfo .bifm{font-size: 12px;font-weight: bold;height: 28px;line-height: 28px;}
.detail .bigactive .bitem .binfo .bifi{height: 18px;display: flex;}
.detail .bigactive .bitem .binfo .bifi .label{width: 43px;height:13px;border-radius: 5px;font-size: 10px;color:#fff;background: #a9d2fe;text-align: center;margin-right: 2px;line-height: 13px;}
.detail .bigactive .bitem .blike{width: 40px;display: flex;flex-direction: column;}
.detail .bigactive .bitem .blike .icon{height: 28px;text-align: center;line-height: 28px;}
.detail .bigactive .bitem .blike .ifon{ font-size: 10px;color: #e6e6e6;text-align: center;}
.detail .moreactive{flex:1;margin: 0 5px;display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 8px;background:#fff;}
.detail .mitem{padding: 0 2px;width: 48.6%;margin: 10px 0px;}
.detail .mitem .mit{background: #b5b5b5;height: 154px;width: 100%;border-radius: 5px;}
.detail .mitem .mib{display: flex;margin-top: 10px;}
.detail .mitem .mib .mibhead{flex: 1.7;width: 26px;height:26px;background: #b5b5b5;border-radius: 50%;margin-right: 6px;}
.detail .mitem .mib .mibwrite{flex: 8.3;}
.detail .mitem .mib .mibwrite .head{font-size: 13px;font-weight: bold;}
.detail .mitem .mib .mibwrite .content{font-size: 10px;color: #b5b5b5;}
WXML
<view class='newdetail'>
<view class='active'>
<view class='activeimg'></view>
<view class='text'>
<view class='title'>主题</view>
<view class='content'>简要内容简要内容简要内容简要内容</view>
<view class='info'>
<view class='money'>¥<text>1888</text>元</view>
<view class='state'>报名进行中</view>
</view>
</view>
</view>
<view class='mechanism'>
<view class='mtitle'>机构</view>
<view class='mitem'>
<view class='mhead'></view>
<view class='minfo'>
<view class='mititle'>机构</view>
<view class='micontent'>xxxxxxxxxxxxxxxxx</view>
</view>
</view>
</view>
<view class='selector'>
<view class='item'>
<view class='special'>产品特色</view>
<view class='arrange'>行程安排</view>
<view class='costinfo'>费用内容</view>
<view class='notes'>活动须知</view>
</view>
</view>
</view>
WXSS
.newdetail{width: 100%;height: 100%;display: flex;flex-direction: column;}
.active{border-bottom: 5px solid #eeeeee;}
.activeimg{height: 190px;background: #b5b5b5;width: 100%;}
.text{margin: 5px 9px;}
.text .title{font-size: 14px;font-weight: bold;margin-top: 7px;}
.text .content{font-size: 10px;color: #b5b5b5;}
.text .info{display: flex;margin-top: 8px;}
.text .info .money{font-size: 12px;font-weight: bold;flex: 5;}
.text .info .state{font-size: 10px;font-weight: bold;flex: 1;}
.mechanism{border-bottom: 5px solid #eeeeee;}
.mtitle{margin:0 5px;height: 27px;font-size: 10px;color: #828282;line-height: 27px;}
.mitem{margin:0 5px 6px 5px;display: flex;}
.mhead{width: 52px;height: 52px;background: #b5b5b5;border-radius: 5px;margin-right: 4px;}
.minfo .mititle{font-size: 13px;font-weight: bold;height: 26px;line-height: 26px;}
.minfo .micontent{font-size: 10px;color: #b5b5b5;}
.selector .item{display: flex;}
.item view{flex: 1;height: 23px;line-height: 23px;text-align: center;font-size: 12px;color: #cdcdcd;}
.item view:nth-child(1){font-weight: bold;color: #000;}
WXML
<view class="pack">
<!-- 绿色头部 -->
<view class='head'>
<view class='headper'>
<view class='headimg'>
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
</view>
</view>
<view class='info'>
<view class='infoitem'>
<view class='names'>MR.
<open-data type="userNickName"></open-data>
</view>
</view>
<view class='infoitem'>
<view class='level'>lv.4</view>
</view>
<view class='infoitem'>
<view class='score'>个人积分:1000</view>
</view>
</view>
</view>
<view class='chengzhang'>
<view class='top'>
<view class='item'></view>
<view class='text'>成长体系</view>
</view>
<view class='bottom'>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
</view>
</view>
<view class='block'>
<view class='pice'>
<view class='item'></view>
<view class='text'>我的活动值</view>
</view>
<view class='pice'>
<view class='item'></view>
<view class='text'>我的预约</view>
</view>
<view class='pice'>
<view class='item'></view>
<view class='text'>默认个人信息</view>
</view>
</view>
<view class='block'>
<view class='pice'>
<view class='item'></view>
<view class='text'>使用帮助</view>
</view>
<view class='pice'>
<view class='item'></view>
<view class='text'>关于我们</view>
</view>
<view class='pice'>
<view class='item'></view>
<view class='text'>联系客服</view>
</view>
</view>
</view>
WXSS
.head {
width: 100%;
height: 114px;
background: #84ccc9;
border-bottom: 3px solid #ebebeb;
padding: 21px 30px;
box-sizing: border-box;
display: flex;
}
.head .headper {
flex: 1;
}
.head .headper .headimg {
width: 55px;
height: 55px;
background: #000;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
}
.head .info {
flex: 1;
display: flex;
flex-direction: column;
}
.info .infoitem {
flex: 1;
}
.infoitem .names {
float: right;
font-weight: bold;
color: #fff;
}
.infoitem .level {
float: right;
font-size: 10px;
border: 1px solid #fff;
border-radius: 5px;
color: #fff;
padding: 0px 7px;
}
.infoitem .score {
float: right;
font-size: 10px;
color: #fff;
}
.chengzhang {
height: 86px;
border-bottom: 5px solid #eee;
padding: 0 21px;
}
.chengzhang .top {
height: 23px;
padding-top: 19px;
display: flex;
}
.chengzhang .top .text {
font-size: 12px;
margin-left: 12px;
margin-top: 2px;
font-weight: bold;
}
.chengzhang .top .item {
width: 23px;
height: 23px;
background: #aaa;
}
.chengzhang .bottom {
margin: 0 38px;
height: 44px;
display: flex;
align-items: center;
}
.chengzhang .bottom .levelpoint {
flex: 1;
height: 9px;
border: 1px solid #ccc;
}
.block {
border-bottom: 7px solid #eee;
}
.pice {
height: 35px;
border-bottom: 1px solid #f5f5f5;
display: flex;
align-items: center;
padding: 0 21px;
}
.pice .text {
font-size: 12px;
margin-left: 12px;
font-weight: bold;
}
.pice .item {
width: 23px;
height: 23px;
background: #aaa;
}
WXML
<view class='zong'>
<view class='top'>
<canvas canvas-id="myCanvas" class='mycanvas'></canvas>
</view>
<view class='bottom'>
<view class='btop'>
<view class='btitem'>
<view class='btit'>akoksk</view>
<view class='btib'>1000</view>
</view>
<view class='btitem'>
<view class='btit'>akoksk</view>
<view class='btib'>1000</view>
</view>
<view class='btitem'>
<view class='btit'>akoksk</view>
<view class='btib'>1000</view>
</view>
</view>
<view class='bbtm'>
<view class='bbl'>
<view class='bbli'>
<view class='bblit'>XXXXXXX</view>
<view class='bblib'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
</view>
<view class='bbli'>
<view class='bblit'>XXXXXXX</view>
<view class='bblib'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
</view>
</view>
<view class='bbr'>
<view class='bbri'>
<view class='bbrit'>XXXXXXX</view>
<view class='bbrib'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
</view>
<view class='bbri'>
<view class='bbrit'>XXXXXXX</view>
<view class='bbrib'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
</view>
</view>
</view>
</view>
</view>
WXSS
page{width: 100%;height: 100%;background: #eeeff3;overflow: hidden;}
.zong{display: flex;flex-direction: column;width: 100%;height: 100%;}
.zong .top{height: 186px;width: 90%;margin:0 5%;}
.zong .mycanvas{width: 100%;height: 186px;background: #fff;border-radius:7px 7px 0px 0px;
margin-top: 4px;box-sizing: border-box;}
.zong .bottom{background: #6673ff;flex: 1;}
.bottom .btop{width: 90%;margin:0 auto;height: 77px;border-radius:0px 0px 7px 7px;background: #ffffff;
display: flex;}
.bottom .btop .btitem{flex: 1;text-align: center;font-size: 12px;}
.bottom .btop .btitem .btit{height: 33px;line-height: 33px;color: #e6e7ea;}
.bottom .btop .btitem .btib{font-weight: bold;}
.bottom .bbtm{width: 90%;margin:0 auto;height: 100%;display: flex;margin-top: 29px;}
.bottom .bbtm .bbl{width:50%;box-sizing: border-box; display: flex;flex-direction: column;color: #fff;border-right: 2px solid #616ef3;padding-right: 25px;}
.bottom .bbtm .bbr{width:50%;box-sizing: border-box; display: flex;flex-direction: column;color: #fff;padding-left: 25px;}
.bottom .bblib{font-size: 10px;margin-top: 10px;margin-bottom: 35px;height: 60px;word-wrap:break-word;}
.bottom .bbrib{font-size: 10px;margin-top: 10px;margin-bottom: 35px;height: 60px;word-wrap:break-word;}
JS
Page({
data: {
shezhi: [0.5, 0.2, 0.7, 0.4, 0.6, 0.8, 0.1]
},
//画图函数
han: function () {
const ctx = wx.createCanvasContext('myCanvas')
var x = 145, y = 90;
var r = 58;//圆和正六边形 都是一样的半径长度 半径是不变的 根据给的数据不同 用半径乘以百分比 用同样的方式可求不同的坐标点
//调用函数画三条边
this.liubianxing(x,y,r,1, ctx);
this.wenzi(x,y,r,1,ctx);
this.liubianxing(x,y,r,2/3,ctx);
this.liubianxing(x,y,r,1/3,ctx);
this.zhixian(x,y,r,1,ctx);
this.dongtai(x,y,r,this.data.shezhi, ctx);
//画
ctx.draw()
},
liubianxing: function (x,y,r,bei,ctx){
var z1x = x + bei *r * Math.sin(60 * 2 * Math.PI / 360);//角度 乘以2 乘以PI 比上360 就是弧度
var z1y = y - bei *r * Math.cos(60 * 2 * Math.PI / 360);
var z2x = x + bei *r * Math.sin(120 * 2 * Math.PI / 360);
var z2y = y - bei *r * Math.cos(120 * 2 * Math.PI / 360);
var z3x = x + bei *r * Math.sin(180 * 2 * Math.PI / 360);
var z3y = y - bei *r * Math.cos(180 * 2 * Math.PI / 360);
var z4x = x + bei *r * Math.sin(240 * 2 * Math.PI / 360);
var z4y = y - bei *r * Math.cos(240 * 2 * Math.PI / 360);
var z5x = x + bei *r * Math.sin(300 * 2 * Math.PI / 360);
var z5y = y - bei *r * Math.cos(300 * 2 * Math.PI / 360);
var z6x = x + bei *r * Math.sin(360 * 2 * Math.PI / 360);
var z6y = y - bei *r * Math.cos(360 * 2 * Math.PI / 360);
ctx.save()
ctx.beginPath()
ctx.moveTo(z1x, z1y)
ctx.lineTo(z2x, z2y)
ctx.lineTo(z3x, z3y)
ctx.lineTo(z4x, z4y)
ctx.lineTo(z5x, z5y)
ctx.lineTo(z6x, z6y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')//画出当前路径的边框颜色
ctx.stroke()//描边当前路径
},
wenzi: function (x,y,r,bei, ctx){
var z1x = x + bei * r * Math.sin(60 * 2 * Math.PI / 360);//角度 乘以2 乘以PI 比上360 就是弧度
var z1y = y - bei * r * Math.cos(60 * 2 * Math.PI / 360);
var z2x = x + bei * r * Math.sin(120 * 2 * Math.PI / 360);
var z2y = y - bei * r * Math.cos(120 * 2 * Math.PI / 360);
var z3x = x + bei * r * Math.sin(180 * 2 * Math.PI / 360);
var z3y = y - bei * r * Math.cos(180 * 2 * Math.PI / 360);
var z4x = x + bei * r * Math.sin(240 * 2 * Math.PI / 360);
var z4y = y - bei * r * Math.cos(240 * 2 * Math.PI / 360);
var z5x = x + bei * r * Math.sin(300 * 2 * Math.PI / 360);
var z5y = y - bei * r * Math.cos(300 * 2 * Math.PI / 360);
var z6x = x + bei * r * Math.sin(360 * 2 * Math.PI / 360);
var z6y = y - bei * r * Math.cos(360 * 2 * Math.PI / 360);
//绘制文字 //文字放在beginpath 和 closepath之中 字体就不会染上外面的颜色
ctx.setFontSize(15)
ctx.fillText('学习', z1x + 5, z1y)
ctx.fillText('音乐', z2x + 5, z2y)
ctx.fillText('美术', z3x - 20, z3y + 15)
ctx.fillText('体育', z4x - 40, z4y)
ctx.fillText('电脑', z5x - 40, z5y)
ctx.fillText('英语', z6x - 15, z6y - 5)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')//画出当前路径的边框颜色
ctx.stroke()//描边当前路径
},
zhixian:function(x,y,r,bei,ctx){
var z1x = x + bei * r * Math.sin(60 * 2 * Math.PI / 360);//角度 乘以2 乘以PI 比上360 就是弧度
var z1y = y - bei * r * Math.cos(60 * 2 * Math.PI / 360);
var z2x = x + bei * r * Math.sin(120 * 2 * Math.PI / 360);
var z2y = y - bei * r * Math.cos(120 * 2 * Math.PI / 360);
var z3x = x + bei * r * Math.sin(180 * 2 * Math.PI / 360);
var z3y = y - bei * r * Math.cos(180 * 2 * Math.PI / 360);
var z4x = x + bei * r * Math.sin(240 * 2 * Math.PI / 360);
var z4y = y - bei * r * Math.cos(240 * 2 * Math.PI / 360);
var z5x = x + bei * r * Math.sin(300 * 2 * Math.PI / 360);
var z5y = y - bei * r * Math.cos(300 * 2 * Math.PI / 360);
var z6x = x + bei * r * Math.sin(360 * 2 * Math.PI / 360);
var z6y = y - bei * r * Math.cos(360 * 2 * Math.PI / 360);
//画直线
ctx.beginPath()
ctx.moveTo(x,y)
ctx.lineTo(z1x, z1y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')//画出当前路径的边框颜色 要先写颜色在写描边,否则出不来
ctx.stroke()//描边当前路径
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z2x, z2y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.stroke()
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z3x, z3y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.stroke()
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z4x, z4y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z5x, z5y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.stroke()
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z6x, z6y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.stroke()
},
dongtai:function(x,y,r,ic,ctx){
var z1x = x + ic[0] * r * Math.sin(60 * 2 * Math.PI / 360);//角度 乘以2 乘以PI 比上360 就是弧度
var z1y = y - ic[0] * r * Math.cos(60 * 2 * Math.PI / 360);
var z2x = x + ic[1] * r * Math.sin(120 * 2 * Math.PI / 360);
var z2y = y - ic[1] * r * Math.cos(120 * 2 * Math.PI / 360);
var z3x = x + ic[2] * r * Math.sin(180 * 2 * Math.PI / 360);
var z3y = y - ic[2] * r * Math.cos(180 * 2 * Math.PI / 360);
var z4x = x + ic[3] * r * Math.sin(240 * 2 * Math.PI / 360);
var z4y = y - ic[3] * r * Math.cos(240 * 2 * Math.PI / 360);
var z5x = x + ic[4] * r * Math.sin(300 * 2 * Math.PI / 360);
var z5y = y - ic[4] * r * Math.cos(300 * 2 * Math.PI / 360);
var z6x = x + ic[5] * r * Math.sin(360 * 2 * Math.PI / 360);
var z6y = y - ic[5] * r * Math.cos(360 * 2 * Math.PI / 360);
ctx.restore()
ctx.beginPath()
ctx.moveTo(z1x, z1y)
ctx.lineTo(z2x, z2y)
ctx.lineTo(z3x, z3y)
ctx.lineTo(z4x, z4y)
ctx.lineTo(z5x, z5y)
ctx.lineTo(z6x, z6y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')//画出当前路径的边框颜色
ctx.stroke()//描边当前路径
// Create linear gradient动态渐变
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, '#657efd')
grd.addColorStop(1, '#a988fd')
ctx.setFillStyle(grd)
ctx.fill()
},
goStart: function () {
},
onLoad: function () {
this.han()
var that = this;
setInterval(function () {
// console.log(Math.random())
const ctx = wx.createCanvasContext('myCanvas')
var x = 145, y = 90;
var r = 58;
var mm = Math.random()
var hh = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]
that.dongtai(x, y, r, hh, ctx);
//ctx.draw() //这个注释打开即可随机生成中间数据画图 但会覆盖背景
}, 500)
}
})