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

最新推荐文章于 2024-04-20 18:17:37 发布

你所有承诺

最新推荐文章于 2024-04-20 18:17:37 发布

阅读量482

点赞数 1

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

本文链接：https://blog.csdn.net/stronglyh/article/details/92792309

版权

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

摘要由CSDN通过智能技术生成

前面我们把配置文件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">