微信小程序------代码构成

一、创建一个小程序生产如下目录

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 的角色。

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

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
      }
    })
  },