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

最新推荐文章于 2023-04-07 10:12:50 发布

你所有承诺

最新推荐文章于 2023-04-07 10:12:50 发布

阅读量518

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 小程序 vue mpvue 文章标签： mpvue代码结构 mpvue小程序开发小程序 mpvue开发微信小程序小程序代码结构

本文链接：https://blog.youkuaiyun.com/stronglyh/article/details/92792309

js 同时被 3 个专栏收录

38 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

mpvue

13 篇文章

订阅专栏

本文聚焦于mpvue小程序的pages目录，详细解析每个页面文件夹中的index.vue和main.js。index.vue负责页面内容展示，包括template、script和style三个部分。script包含JS代码，style为样式代码。此外，还提到了logs目录下的main.json，用于配置导航头内容。下一篇文章将开始实践编写功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

嗯，我们先看到共性，每个文件夹中都有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": "查看启动日志"
}

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

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