一、创建一个小程序生产如下目录
1.app.json
app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。项目里边的 app.json 配置内容如下:
{ "pages":[ "pages/index/index", "pages/warn/index", "pages/scanresult/index", "pages/billing/index", "pages/my/index", "pages/wallet/index", "pages/charge/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#b9dd08", "navigationBarTitleText": "单车", "navigationBarTextStyle":"black" }}
2.WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改.
/**app.wxss**/.container{ background-color: #f2f2f2; height: 100vh;}.title{ background-color: #f2f2f2; padding: 30rpx 0 30rpx 50rpx; font-size: 28rpx; color: #000;}.tapbar{ display: flex; align-items: center; justify-content: space-between; background-color: #fff; padding: 40rpx;}.btn-charge{ width: 90%; background-color: #b9dd08; margin: 40rpx auto 30rpx; text-align: center;}
3.wxml文件, WXML 充当的就是类似 HTML 的角色。
{ {userInfo.nickName}} { {motto}}
4.js文件为逻辑交互文件。根据小程序的api编写,这里为部分代码
/ 页面加载 onLoad: function (options) { // 1.获取定时器,用于判断是否已经在计费 this.timer = options.timer; // 2.获取并设置当前位置经纬度 wx.getLocation({ type: "gcj02", success: (res) => { this.setData({ longitude: res.longitude, latitude: res.latitude }) } }); // 3.设置地图控件的位置及大小,通过设备宽高定位 wx.getSystemInfo({ success: (res) => { this.setData({ controls: [{ id: 1, iconPath: '/images/location.png', position: { left: 20, top: res.windowHeight - 80, width: 50, height: 50 }, clickable: true }, { id: 2, iconPath: '/images/use.png', position: { left: res.windowWidth/2 - 45, top: res.windowHeight - 100, width: 90, height: 90 }, clickable: true }, { id: 3, iconPath: '/images/warn.png', position: { left: res.windowWidth - 70, top: res.windowHeight - 80, width: 50, height: 50 }, clickable: true }, { id: 4, iconPath: '/images/marker.png', position: { left: res.windowWidth/2 - 11, top: res.windowHeight/2 - 45, width: 22, height: 45 }, clickable: true }, { id: 5, iconPath: '/images/avatar.png', position: { left: res.windowWidth - 68, top: res.windowHeight - 155, width: 45, height: 45 }, clickable: true }] }) } }); // 4.请求服务器,显示附近的单车,用marker标记 wx.request({ url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/biyclePosition', data: {}, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 设置请求的 header success: (res) => { this.setData({ markers: res.data.data }) }, fail: function(res) { // fail }, complete: function(res) { // complete } }) },