微信小程序学习：（一）目录结构

客官°小女子只卖身不卖艺 2021-12-11 06:09 296阅读 0赞

# 微信小程序学习：（一）目录结构 #

卷首语：小程序开发跟前端SPA开发类似，如果学习过react、vue等框架，那么看看小程序的开发者文档，基本上2、3天就能上手，简单、粗暴、快捷。  
项目地址：[https://github.com/leoricding/-][https_github.com_leoricding_-]

## 1、基本目录结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70]

上图是我们创建一个小程序时，IDE默认为我们创建的目录。

如果你使用过vue-cli，就会发现他们的目录结构差不多。当然，学完之后，发现语法也差不多。哈哈。。。

## 2、app.js\\app.json\\app.wxss ##

### (1)app.js用于注册小程序，绑定生命周期回调函数、错误监听和页面不存在监听函数等。 ###

// app.js
    App({ 
        
      //生命周期函数
      onLaunch (options) { 
        // Do something initial when launch.
      },
      onShow (options) { 
        // Do something when show.
      },
      onHide () { 
        // Do something when hide.
      },
      onError (msg) { 
        console.log(msg)
      },
        
      //全局的状态，与vuex类似
      globalData: 'I am global data'
    })

### 整个小程序只有一个 App 实例，是全部页面共享的。 ###

#### 开发者可以通过 `getApp` 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 `App` 上的函数。 ####

// xxx.js
    const appInstance = getApp()
    console.log(appInstance.globalData) // I am global data

### (2)app.json对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 ###

{ 
      //路由
      "pages": [
        "pages/index/index",
        "pages/logs/index"
      ],
        
      //小程序标题栏
      "window": { 
        "navigationBarTitleText": "Demo"
      },
        
      //小程序底部导航栏
      "tabBar": { 
        "list": [{ 
          "pagePath": "pages/index/index",
          "text": "首页"
        }, { 
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      },
        
       //网络延时
      "networkTimeout": { 
        "request": 10000,
        "downloadFile": 10000
      },
       //是否测试环境
      "debug": true,
        
       //需要跳转到其他的小程序列表
      "navigateToMiniProgramAppIdList": [
        "wxe5f52902cf4de896"
      ]
    }

## （3）app.wxss小程序的全局样式 ##

#### 标准盒模型，flex布局，主轴方向为垂直方向，元素居中对齐，元素头尾顶边，中间空格分割。 ####

#### 其中：1rpx=0.5px ####

/**app.wxss**/
    .container { 
      height: 100%;
        
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
        
      padding: 200rpx 0;
      box-sizing: border-box;
    }

### 3、index.js\\index.wxml小程序页面 ###

#### （1）index.js中调用Page（）注册页面，指定页面的初始数据、生命周期回调、事件处理函数等。 ####

//index.js
    //注册页面
    Page({ 
      data: { 
        text: "This is page data."
      },
      onLoad: function(options) { 
        // Do some initialize when page load.
      },
      onReady: function() { 
        // Do something when page ready.
      },
      onShow: function() { 
        // Do something when page show.
      },
      onHide: function() { 
        // Do something when page hide.
      },
      onUnload: function() { 
        // Do something when page close.
      },
      onPullDownRefresh: function() { 
        // Do something when pull down.
      },
      onReachBottom: function() { 
        // Do something when page reach bottom.
      },
      onShareAppMessage: function () { 
        // return custom share data when user share.
      },
      onPageScroll: function() { 
        // Do something when page scroll
      },
      onResize: function() { 
        // Do something when page resize
      },
      onTabItemTap(item) { 
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
      },
      // Event handler.
      viewTap: function() { 
        this.setData({ 
          text: 'Set some data for updating view.'
        }, function() { 
          // this is setData callback
        })
      },
      customData: { 
        hi: 'MINA'
      }
    })

#### (2)index.wxml页面结构，跟html标签类似。 ####

<view class="container">
      <view class="userinfo">
         //条件渲染
        <button wx:if="{ {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 
            获取头像昵称 
         </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{ {userInfo.avatarUrl}}" mode="cover">
            </image>
          <text class="userinfo-nickname">{
       {userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{
       {motto}}</text>
      </view>
    </view>

[https_github.com_leoricding_-]: https://github.com/leoricding/-
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ1OTc2OA_size_16_color_FFFFFF_t_70]: /images/20211211/0a4885cea5ae410da57dabf95f75545c.png