简单小程序开发流程

原创

挚爱的强哥 2019-09-29 01:39:59 ©著作权

©著作权归作者所有：来自51CTO博客作者挚爱的强哥的原创作品，请联系作者获取转载授权，否则将追究法律责任

简单小程序开发流程_搜索

简单小程序开发流程_ico_02

app.js

App({
  onLaunch: function() {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        traceUser: true,
      })
    }
    this.globalData = {}
  }
})

app.json

{
  "tabBar": {
    "color": "#cdcdcd",
    "selectedColor": "#0d1f75",
    "list": [
      {
        "pagePath": "pages/repair/repair",
        "text": "维修",
        "iconPath": "images/repair.png",
        "selectedIconPath": "images/repair-selected.png"
      },
      {
        "pagePath": "pages/maintain/maintain",
        "text": "保养",
        "iconPath": "images/maintain.png",
        "selectedIconPath": "images/maintain-selected.png"
      },
      {
        "pagePath": "pages/vip/vip",
        "text": "会员专区",
        "iconPath": "images/vip.png",
        "selectedIconPath": "images/vip-selected.png"
      }
    ]
  },
  "pages": [
    "pages/repair/repair",
    "pages/repair/faultSubmission/faultSubmission",
    "pages/repair/onlineDetection/onlineDetection",
    "pages/repair/vehicleRescue/vehicleRescue",

    "pages/maintain/maintain",
    "pages/maintain/production/production",

    "pages/vip/vip"
  ],
  "window": {
    "backgroundColor": "#0d1f75",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#0d1f75",
    "navigationBarTitleText": "铭宝汽车一站式服务连锁",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

app.wxss

@import 'css/weui.wxss';

page{
    background-color: #EDEDED;
    font-size: 16px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.page__hd {
    padding: 40px;
}
.page__bd {
    padding-bottom: 40px;
}
.page__bd_spacing {
    padding-left: 15px;
    padding-right: 15px;
}

.page__ft{
    text-align: center;
    padding:0 0 10px;
    padding:0 0 calc(10px + constant(safe-area-inset-bottom));
    padding:0 0 calc(10px + env(safe-area-inset-bottom));
}


.page__title {
    text-align: left;
    font-size: 20px;
    font-weight: 400;
}

.page__desc {
    margin-top: 5px;
    color: #888888;
    text-align: left;
    font-size: 14px;
}
.weui-cell_example:before{
    left:52px;
}

简单小程序开发流程_xml_03

repair.js

Page({
  data: {
    title: '维修服务',
    logo: {
      src: '../../img/logo.png',
      mode: 'aspectFit'
    },
    list: [{
        imgUrl: '../../img/repair/1.jpg',
        title: '故障提交',
        desc: '当您发现汽车存在异常，但是又不影响正常行驶，可以提交故障情况给我们，远程帮您查看故障原因',
        link: 'faultSubmission/faultSubmission'
      },
      {
        imgUrl: '../../img/repair/2.jpg',
        title: '在线检测',
        desc: '根据您的爱车型号对应提供表格，您只需要填写好对应的参数，在线为您车辆检测结果',
        link: 'onlineDetection/onlineDetection'
      },
      {
        imgUrl: '../../img/repair/3.jpg',
        title: '车辆救援',
        desc: '爱车把您抛弃在了路边，只需一个电话，无论刮风下雨，我们为您保驾护航',
        link: 'vehicleRescue/vehicleRescue'
      }
    ],
  },

  onLoad: function() {

  },

})

repair.wxml

<view class="page">
  <view class="logo-view">
    <image mode="{{logo.mode}}" src="{{logo.src}}"></image>
  </view>
  <view class="page__bd">
    <view class="weui-panel weui-panel_access">
      <view class="weui-panel__hd">{{title}}</view>
      <view class="weui-panel__bd">
        <navigator wx:for='{{list}}' url="{{item.link}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
          <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
            <image class="weui-media-box__thumb" src="{{item.imgUrl}}" />
          </view>

          <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
            <view class="weui-media-box__title">{{item.title}}</view>
            <view class="weui-media-box__desc">{{item.desc}}</view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</view>

repair.wxss

@charset "UTF-8";

/* 组件---------------------------------------------------------------- */

.weui-panel {
  background-color: #fff;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

.weui-panel:first-child {
  margin-top: 0;
}

.weui-panel:before {
  top: 0;
  border-top: 1rpx solid rgba(0, 0, 0, 0.1);
}

.weui-panel:after, .weui-panel:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  color: rgba(0, 0, 0, 0.1);
}

.weui-panel:after {
  bottom: 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}

.weui-panel__hd {
  padding: 16px 16px 13px;
  color: rgba(0, 0, 0, 0.9);
  font-size: 15px;
  font-weight: 700;
  position: relative;
}

.weui-panel__hd:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.1);
  left: 16px;
}

/*自定义部分 ---------------------------------------------------------------- */

.logo-view {
  text-align: center;
  height: 250rpx;
}

.logo-view image {
  width: 50%;
  height: 250rpx;
}

.weui-media-box__hd_in-appmsg {
  width: 320rpx;
  height: 180rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.weui-media-box__desc {
  line-height: 1.2;
  -webkit-line-clamp: 4;
}

/* ---------------------------------------------------------------- */

简单小程序开发流程_ico_04

maintain.js

Page({
  data: {
    inputShowed: false,
    inputVal: "",
    logo: {
      src: '../../img/logo.png',
      mode: 'aspectFit'
    },
    list: [{
        imgUrl: '../../img/maintain/1.jpg',
        title: '壳牌机油黄壳黄喜力正品HX5',
        desc: ' 10w-40 汽车发动机润滑油 SN 4L清洁润滑 保护引擎 清洁保护抑制氧化',
        price: '145.00',
        link: 'production/production'
      },
      {
        imgUrl: '../../img/maintain/2.jpg',
        title: 'Castrol嘉实多磁护Professional',
        desc: '专享5W-40全合成机油润滑油4LSN级 未启动先保护 智能分子配方',
        price: '120.00',
        link: 'production/production'
      },
      {
        imgUrl: '../../img/maintain/3.jpg',
        title: 'Mobil美孚一号全合成机油',
        desc: '汽车润滑油 5W-30 美孚1号 SN级 1L正品 新车推荐 卓越低温能力 磨损保护',
        price: '78.00',
        link: 'production/production'
      }, {
        imgUrl: '../../img/maintain/4.jpg',
        title: '倍耐力汽车轮胎新P7KS',
        desc: '适配宝马3/5/6系 205/55R18 正品保证 405城万家门店 25仓发货 包安装',
        price: '1890.00',
        link: 'production/production'
      },
      {
        imgUrl: '../../img/maintain/5.jpg',
        title: '普利司通汽车轮胎泰然者T001',
        desc: '225/55R17适配迈锐宝新君威奥迪A6L正品保证 405城万家门店 25仓发货 包安装',
        price: '1280.00',
        link: 'production/production'
      },
      {
        imgUrl: '../../img/maintain/6.jpg',
        title: '布雷博 brembo GT GT6 GT4',
        desc: '宝马F8XM2M3M4意大利刹车卡钳套件全原装带防伪卡',
        price: '2890.00',
        link: 'production/production'
      }
    ],
  },
  showInput: function() {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function() {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function() {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function(e) {
    this.setData({
      inputVal: e.detail.value
    });
  }
});

maintain.wxml

<view class="page">
  <view class="search">
    <view class="weui-search-bar">
      <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input type="text" class="weui-search-bar__input" placeholder="搜索您需要的机油品牌、配件等" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
          <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
            <icon type="clear" size="14"></icon>
          </view>
        </view>
        <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
          <icon class="weui-icon-search" type="search" size="14"></icon>
          <view class="weui-search-bar__text">搜索您需要的机油品牌、配件等</view>
        </label>
      </view>
      <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
    </view>
  </view>

  <view class="result">
    <view class="weui-panel weui-panel_access">
      <view class="weui-panel__bd">
        <navigator wx:for='{{list}}' url="{{item.link}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
          <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
            <image class="weui-media-box__thumb" src="{{item.imgUrl}}" />
          </view>

          <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
            <view class="weui-media-box__title">{{item.title}}</view>
            <view class="weui-media-box__desc">{{item.desc}}</view>
            <view class="weui-media-box__price">{{item.price}}</view>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</view>

maintain.wxss

@charset "UTF-8";

.searchbar-result {
  margin-top: 0;
  font-size: 14px;
}

.searchbar-result .weui-cell__bd {
  padding: 2px 0 2px 20px;
  color: #666;
}

.searchbar-result:before {
  display: none;
}

/*自定义部分 ---------------------------------------------------------------- */

.weui-media-box__hd_in-appmsg {
  width: 180rpx;
  height: 180rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.weui-media-box__price {
  color: red;
  font-size: 40rpx;
  font-weight: bold;
}

.weui-media-box__price::before {
  content: '￥';
  font-size: 20rpx;
  font-weight: 100;
}

.weui-media-box__price::after {
  content: '元';
  font-size: 20rpx;
  font-weight: 100;
}

/* ---------------------------------------------------------------- */