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

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

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

1、基本目录结构

上图是我们创建一个小程序时，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>