mpvue小程序开发（六）：代码结构

水深无声 2022-10-02 11:48 179阅读 0赞

前面我们把配置文件app.json详解了一下【[点击查看][Link 1]】，现在我们离开发越来越近了，啥也不多说，搞起搞起

我们主要看pages目录，这个是我们以后开发的重中之重

![20190618152514917.png][]

嗯，我们先看到共性，每个文件夹中都有index.vue和main.js

其中index.vue就是我们的页面内容，我们打开index目录下的index.vue文件看一下

<template>
      <div @click="clickHandle">
    
        <div class="userinfo" @click="bindViewTap">
          <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
          <img class="userinfo-avatar" src="/static/images/user.png" background-size="cover" />
    
          <div class="userinfo-nickname">
            <card :text="userInfo.nickName"></card>
          </div>
        </div>
    
        <div class="usermotto">
          <div class="user-motto">
            <card :text="motto"></card>
          </div>
        </div>
    
        <form class="form-container">
          <input type="text" class="form-control" :value="motto" placeholder="v-model" />
          <input type="text" class="form-control" v-model="motto" placeholder="v-model" />
          <input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />
        </form>
    
        <a href="/pages/counter/main" class="counter">去往Vuex示例页面</a>
    
        <div class="all">
            <div class="left">
            </div>
            <div class="right">
            </div>
        </div>
      </div>
    </template>
    
    <script>
    import card from '@/components/card'
    
    export default {
      data () {
        return {
          motto: 'Hello miniprograme',
          userInfo: {
            nickName: 'mpvue',
            avatarUrl: 'http://mpvue.com/assets/logo.png'
          }
        }
      },
    
      components: {
        card
      },
    
      methods: {
        bindViewTap () {
          const url = '../logs/main'
          if (mpvuePlatform === 'wx') {
            mpvue.switchTab({ url })
          } else {
            mpvue.navigateTo({ url })
          }
        },
        clickHandle (ev) {
          console.log('clickHandle:', ev)
          // throw {message: 'custom test'}
        }
      },
    
      created () {
        // let app = getApp()
      }
    }
    </script>
    
    <style scoped>
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 150px;
    }
    
    .form-control {
      display: block;
      padding: 0 12px;
      margin-bottom: 5px;
      border: 1px solid #ccc;
    }
    .all{
      width:7.5rem;
      height:1rem;
      background-color:blue;
    }
    .all:after{
      display:block;
      content:'';
      clear:both;
    }
    .left{
      float:left;
      width:3rem;
      height:1rem;
      background-color:red;
    }
    
    .right{
      float:left;
      width:4.5rem;
      height:1rem;
      background-color:green;
    }
    </style>

我们很清楚的看到了代码层级，有template，div，有script，有style

其中template就是页面代码块，script是js代码块，style是样式代码块，如果对vue有了解的话，那么这个也就自然了解了

我们发现了logs目录下有个main.json文件，我们打开看一下

{
      "navigationBarTitleText": "查看启动日志"
    }

嗯，这是明显要导航头的内容啊，如下图可以清晰的看到

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70][]

嗯，到这就差不多了，下一篇开始我们打算写个功能练练手了

[Link 1]: https://blog.csdn.net/stronglyh/article/details/92787295
[20190618152514917.png]: /images/20220112/05ab28ca4c8c4abcba142b415f85be2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0cm9uZ2x5aA_size_16_color_FFFFFF_t_70]: /images/20220112/f84414e088f84826854d04db5d8e798f.png