前言
因为学校组织急需人手参与开发一个报修小程序,因为我自身js才入门,本不想揽这个活的却阴差阳错还是参与了开发,既然开始了就要认真起来了。于是在此期间我学到了很多东西,不想忘记便在这里记录一下,若以后借鉴我用到的代码也比较方便,若未来回头看来也会感慨这个机会实在千金难买,给我的大一生活开了一个好头,若有人无意间发现了这篇文章也希望能帮助到你们——2.29
困难一:GitHub网站打开困难
原先解决办法是找镜像网站,但是过了一阵发现镜像网站要不就是打不开,要不就是出现如下画面
之后组长知道我的问题后告诉我要用免费的vpn更好一点
watt toolkit
下载地址
困难二:git不会使用
Tortoisegit
刚开始是靠Tortoisegit
这个软件解决一大部分问题,但是个别功能不清楚
刚开始的界面应该是这样的
而想要拉取main的代码,需要点击克隆
不过使用之前需要安装配置教程
最重要的是远端URL,origin不能改,URL是github该项目链接(点绿色按钮CODE即可找到)
接下来克隆,写完代码后提交,顺着点过去就好了,注意start(开始)不能空,写origin即可,end写分支
git
要先下载git 和 安装配置教程
接下来的相关指令可转移这篇文章查看在文章最后
接下来就是相关代码介绍了
WXML
- input的一个属性placeholder是用来写input默认背景文字的
- 想要设置placeholder的效果必须设置placeholder-class然后才能在wxss中设置,否则无效果
- 设置大box类型的长文本输入框选择textarea,一定要设置
auto-height="true"
,使得输入超过一定范围的文字就会被隐藏 - label放在input前面(对应内容)
- 单选圆圈
- radio后面将选项内容用label包裹起来才能放在value中
<radio-group bindchange="ipHandler4" name="FailureType" value="{{FailureType}}" >
<radio value="系统"/><label class="radio">系统故障</label>
<radio value="部件" class="radio" style="margin-left: 50rpx;"/><label>部件故障</label>
</radio-group>
- 大box富文本输入框用textarea,
auto-height="true"
一定要加上,防止输入的文字超过一行就会掩藏,而是多行显示,自适应
<textarea type="text" name="failure" bindinput="ipHandler5" placeholder="请描述设备故障" auto-height="true" value="{{failure}}" class="textarea" />
- 单选(可取消)也是要用label
<checkbox value="checkbox" bind:tap="getChange"/><label>仅看未完成</label>
<view wx:for="{{historyList}}" wx:key="index" class="Box" wx:if="{{item.situation != 0 && checkbox == 1}}" >
这个代码实现点击下方按钮只会显示你想显示的内容,需要在js中设置data中的数据checkbox
- 让不同状态的字体颜色不一样,在js中设置situation值
<view class="element" wx:if="{{item.situation == 1}}">状态:
<text style="color: rgba(255, 204, 0, 1);">维修中</text>
</view>
- 设置navigator使button具有点击跳转到非tabbar页面的功能,并且携带参数
<navigator url="/pages/detail/detail?index={{index}}"><button bind:tap="goToDetail">查看详情</button></navigator>
- 有时候设置完整个页面后发现最后元素会贴近tabbar,没有间隙很丑,设置margin、padding、height都没有用,可以试试添加一个空的view标签,在这个里面加margin、padding属性就生效了
WXSS
opacity: 1;
用于设置元素的透明度,取值范围在0-1,值越低透明度越高- 文字样式模板
font-size: 36rpx;
font-weight: 400;
letter-spacing: 0px;
line-height: 12px;
color: rgba(150, 150, 150, 1);
text-align: left;
vertical-align: middle;
vertical-align: middle;
设置垂直对齐方式的属性,用于控制元素在垂直方向上的对齐方式,还有top,middle,bottom,baseline,或者在向上偏移指定像素值(10px)box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.25);
阴影 上下左右 颜色border-radius: 10px;
圆角 可用像素和百分数align-items: center;
flex的一个属性,设置纵轴方向的对齐方式,flex-start flex-end center baseline(项目的第一行文字的基线对齐) stretch(若项目未设置高度或设为auto,将占满整个容器的高度)flex-direction: column-reverse;
row横向 row-reverse从右到左横向 column纵向 column-reverse从下到上纵向text-align
文本对齐方式 justify两端对齐,适用于多行文本justify-content: center;
flex属性 ,space-between间隔相等边缘无间隔、space-around间隔相等边缘有间隔- 因为checkbox设置style是无法改变圆圈的样式,所以想要设置需要用
checkbox .wx-checkbox-input
(wxss中),以下为上面提供的图片的样式代码
checkbox .wx-checkbox-input{
width: 42rpx;
height: 42rpx;
border-radius: 50%;
border: 3px solid rgba(217, 217, 217, 1);
}
- 利用flex在同一水平线上分布两个view
.view{
position: relative;
}
.left{
position: absolute;
left: 40%;
color: rgba(0, 38, 82, 1);
}
.right{
position: absolute;
right: 2%;
}
- 设置分界线(且两边不贴边)
//首先要设置box的宽度,以免边界超出,然后设置border
padding-bottom: 24rpx;
margin-bottom: 24rpx;
border-bottom: 2px solid rgba(240, 240, 240, 1);
width: 650rpx;
JS
数据绑定
设置bindinput,设置value
<label class="equipment">设备</label>
<input type="text" name="equipment" bindinput="ipHandler1" placeholder="请填写报修设备" value="{{equipment}}" placeholder-class="placeholder"/>
ipHandler1(e){//接收event数据
console.log(e);
this.setData({
equipment:e.detail.value//更新数据
})
},
显示loading效果
wx.showToast({
title: '正在提交',
duration: 1000,
icon: 'loading',
success: (res) => {
wx.switchTab({
url: '/pages/页面/页面',
success:function(res){
console.log('成功');
},
fail:function(res){
console.log('失败');
},
});
},
fail:err => {
console.log('提交失败',err);
}
})
checkbox仅看未完成(在WXML中提到的)
点击则将checkbox的值修改
getChange(){
if (this.data.checkbox == 0) {
this.setData({
checkbox:1
})
}else{
this.setData({
checkbox:0
})
}
},
接收参数并更新
要在data中设置query空字典
onLoad(options) {
//接收参数
this.setData({
query:options,
});
//根据参数更改type的值 再对应渲染页面数据
this.setData({
type:this.data.query.index
})
},
JSON
app.json
//窗口设置
"window": {
"backgroundColor": "#fff",//下拉刷新背景颜色
"backgroundTextStyle": "light",//下拉刷新颜色(dark和light)
"navigationBarTitleText": "设备报修",//标题
"navigationBarBackgroundColor": "#003A6B",//title背景颜色
"navigationBarTextStyle": "white"//导航栏标题字体颜色,只有white和black
},
- tabbar最多五个最少两个,list里装对应路径、未点击时的图标、点击时的图标,还可以设置属性如color、selectcolor、backgroundcolor、borderstyle、fixed(是否固定在底部)
- 当然还有自定义tabbar,涉及内容太多,有机会再整理
"tabBar": {
"list": [
{
"pagePath": "pages/ViewDevices/ViewDevices",
"iconPath": "image/first.png",
"selectedIconPath": "image/firstSelect.png"
}
]
//主题会影响小程序的整体视觉风格
"theme": "white",
index.json
- 设置页面title
"navigationBarTitleText": "历史报修记录"
- 还可以加入vant组件,官方文档有相关介绍,这是一个超级棒的组件