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;
}

?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;
}/* ---------------------------------------------------------------- */

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;
}/* ---------------------------------------------------------------- */

?

總結

以上是生活随笔為你收集整理的简单小程序开发流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。