微信小程序开发笔记[1]-用MasterGo进行界面设计

MasterGo安装

https://mastergo.com
(也可以不安装客户端而使用在线版本)

界面设计

小程序分为如下几个主要页面:

1. 主页
   
2. 我的
3. 跳蚤市场
4. 报修
   
5. 提交成功
   

小程序源码目录

小程序前端

底部导航栏

阿里巴巴的图标库[https://www.iconfont.cn]
app.json

"tabBar": {
    "list":[
      {
      "selectedIconPath": "asset/icon/shebeibaoxiu-2.png",
      "iconPath": "asset/icon/shebeibaoxiu.png",
      "pagePath": "pages/repair/index",
      "text": "报修"
      },
      {
        "selectedIconPath": "asset/icon/ershouwupin-2.png",
        "iconPath": "asset/icon/ershouwupin.png",
        "pagePath": "pages/market/market",
        "text":"跳蚤市场"
      },
      {
        "selectedIconPath": "asset/icon/product12-2.png",
        "iconPath": "asset/icon/product12.png",
        "pagePath": "pages/home/home",
        "text": "我的"
      }
    ]
  }

报修页面

pages/repair/index.wxml

<!--pages/repair/index.wxml-->
<view>
  <image src="/asset/beauty.png" style="width:100%;max-height: 50px;"></image>
  <text style="color: silver;">~简单几步即可完成报修登记~</text>
</view>
<form bindsubmit="formSubmit">
<view class='list'>
  <view class="input_list">
    <text style="color: red;">*</text><text>01 你的联系方式(手机/微信/QQ)</text>
    <input name="_1" type='number' placeholder-style='font-size:40rpx;' placeholder='请输入...' ></input>
  </view>
  <view class="input_list">
    <text style="color: red;">*</text><text>02 你的宿舍楼</text>
    <picker mode="selector" header-text="-请选择-" value="{{selected}}" range="{{address}}">
    <view class="picker" id='_2'>
      当前选择：{{address[0]}}
    </view>
  </picker>
  </view>
  <view class="input_list">
    <text style="color: red;">*</text><text>03 报修物品</text>
    <input name="_3" type='text' placeholder-style='font-size:40rpx;' placeholder='请输入...' ></input>
  </view>
  <view class="input_list">
    <text style="color: red;">*</text><text>04 故障描述(50字内)</text>
    <input name="_4" type='text' maxlength='50' placeholder-style='font-size:40rpx;' placeholder='请输入...' ></input>
  </view>
  <view class="input_list">
    <text style="color: red;">*</text><text>05 报修物品图片\n</text>
    <image src="/asset/shangchuan.png" style="height: 40px;width: 40px;" id='_5' bindtap="chooseImage"></image>
  </view>
</view>
<button form-type='submit'>提交</button>
</form>

pages/repair/index.js

/**
   * 页面的初始数据
   */
  data: {
  address:['-请选择-','北区9号楼','北区5号楼','中区18号楼']
  },
省略
/**
   * 上传图片
   */
  chooseImage:function(){
  
  },
  /**
   * 上传回调函数
   */
  formSubmit:function(e){
    wx.showLoading({
      title:'正在上传',
      icon:'loading',
      duration:2000,
      complete:function(res){
        wx.request({
          url: 'https://www.qsbye.cn/temp/trans.php',
          header:{
            "Content-Type":"application/x-www-form-urlencoded"
          },
          method:"POST",
          data:{_1:e.detail.value._1,_3:e.detail.value._3,_4:e.detail.value._4}
        }),
        wx.hideLoading({}),
        wx.showToast({
          title: '成功',
          icon:'success',
          duration:5000,
          complete:function(res){
            //wx.startPullDownRefresh()
            wx.switchTab({
              url: '/pages/home/home',
            })
          }
        })
      }
    })
     }

pages/repair/index.wxss

/* pages/repair/index.wxss */
.input_list{
  margin-top: 5px;
  margin-bottom: 5px;
  border:2px solid skyblue;
  border-radius: 15px;
}
.input_list:hover{
  border-color: blue;
}

最终效果