因长期不进行weapp开发,基础属性做个记录。
获取屏幕大小
wx.getSystemInfoSync().windowWidth
行属性
display:flex;
flex-direction:row;
列属性
display:flex;
flex-direction:column;
列居中
align-items:center;
行居中
justify-content:center;
水平两端显示
justify-content:space-between;
水平等比显示
flex-directionspace-bround;
flex:1;
悬浮层位置控制
position:fixed;
bottom:0;//底部显示
top:0;//右边显示
left:0;//左边显示
right:0;//右边显示
圆角显示
border-top-left-radius:7px;//左上角圆角
border-top-right-radius:7px;//右上角圆角
......
动态class或者style判断(单引号、双引号使用)
wxss
.text-nor{}
.text-pre{}
wxml
<text class="{{id==1?'text-pre':'text-nor'}}"></text>
保持手机不锁屏
wx.setKeepScreenOn({
keepScreenOn:true,
})
本地json
//新建json.js文件
var localJson = [
{"id":1,
"name":'zhangsan'},
{"id":2,
"name":'lisi'}
]
moudle.exports={
postList:localJson}
//js页面读取
var postJson=require("../../jsondata/json.js");
var jsonList = postJson.postList;
Page({
data:{
list:jsonList
},
itemClick:funciton(e){
var id = e.currentTarget.dataset.id;
wx.showToast(
'title':id
)
}
})
列表页面
<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="this">
<text data-id="{{item.id}}" bindtap="itemClick">{{item.name}}</text>
</view>
圆圈背景的消息数量通知
<view class='text-msg-bg center-x-y'>
<text class='text-msg center-x-y'>1</text>
</view>
.text-msg-bg {
width: 24px;
height: 24px;
background: red;
border-radius: 50%;
}
.center-x-y {
display: flex;
justify-content: center;
align-items: center;
}
.text-msg {
color: white;
font-size: 14px;
padding: 2px;
}
比较好用的图表(感谢作者分享)
如:饼状图、环状图、条形图、折线图等
https://blog.csdn.net/m0_37805167/article/details/75160063