寒假微信小程序开发总结

前言

因为学校组织急需人手参与开发一个报修小程序，因为我自身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组件，官方文档有相关介绍，这是一个超级棒的组件