微信小程序学习(1) —— 文件结构

文件结构

 

 

 

示例目录:HelloWorld

 

 

 

*******************************************************分割线********************************************************

 

 

 

 

全局文件

 

 

app.js文件

这个是小程序的脚本代码文件,可以在这个文件上进行监听,并处理小程序的一些生命周期(比如一些全局变量)

 

在这个app.js文件内,需要使用App()函数,来注册程序。

 

 

 

 

演示:

//app.js

App({

  onLaunch: function () {

    //当小程序初始化完成时,会触发onLaunch(全局只触发一次)

  },

  onShow: function () {

  //当小程序启动,或从后台进入前台显示,会触发onShow

  },

  onHide: function () {

  //当小程序从前台进入后台,会触发onHide

  },

  onError: function (msg) {

  //当小程序发生脚本错误,或者api调用失败时,会触发onError并带上错误信息

  },

  other:function(){

//全局函数,可以被项目上的其他js文件调用

  },

  globalData:{

//全局对象

  },

})


 

 

 

app.json文件

小程序的全局配置文件

 

 

 

pages

来指定小程序由哪些页面组成

接受一个数组,每一项都是字符串。每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对pages数组进行修改。

文件名不需要写文件后缀,因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

 

例如:

 

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ]

}

 

 

备注:pages内只需要写wxml文件的路径,其他文件不用写

 

 

 

window

用于设置小程序的状态栏、导航条、标题、窗口背景色

 

示例:

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

 

 

 

tabBar

如果我们的小程序是一个多 tab应用(客户端窗口的底部或顶部有 tab栏可以切换页面),那么我们可以通过 tabBar配置项指定 tab栏的表现,以及 tab切换时显示的对应页面。

Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使它是定义在 tabBar配置中的页面,也不会显示底部的 tab栏。

tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab按数组的顺序排序。

 

 

 

示例:

{

  "tabBar": {

  "color":"#818181",

  "selectedColor":"#0082D7",

  "borderStyle":"white",

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath":"images/tabbar/index@2x.png",

      "selectedIconPath":"images/tabbar/index_selected@2x.png"

    }, {

      "pagePath": "pages/me/me",

      "text": "设置",

      "iconPath":"images/tabbar/me@2x.png",

      "selectedIconPath":"images/tabbar/me_selected@2x.png"

    }]

  }

}

 

 

 

networkTimeout

可以设置各种网络请求的超时时间。

 

示例:

{

  "networkTimeout": {

    "request": 10000,

    "downloadFile": 10000

  }

}

 

 

 

debug

可以在开发者工具中开启 debug模式,在开发者工具的控制台面板,调试信息以 info的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发 。 可以帮助开发者快速定位一些常见的问题。

 

示例:

{

  "debug": false

}

 

 

 

app.wxss文件

 

定义全局的样式

基本上与css差不多,这里不用多讲

 

 

 

 

*******************************************************分割线********************************************************

 

 

 

 

一个页面的内部

 

 

xxx.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.

  },

  // Event handler.

  viewTap: function() {

    this.setData({

      text: 'Set some data for updating view.'

    })

  },

  customData: {

    hi: 'MINA'

  }

})

 

 

 

 

 

示例:

Page({

  onShareAppMessage: function () {

    return {

      title: '自定义分享标题',

      desc: '自定义分享描述',

      path: '/page/user?id=123'

    }

  }

})

 

 

 

 

 

 

 

xxx.wxml

使用微信提供的组件来代替html元素

 

示例:

 

 

 

 

 

xxx.wxss

小程序样式,与css样式基本相似,这里不重复论述

在当前页面的wxss文件内编辑的css样式,只能使用在当前页面

 

 

 

 

 

 

xxx.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json中的 window配置项的内容,页面中配置项会覆盖 app.json的 window中相同的配置项。

页面的.json只能设置 window相关的配置项,以决定本页面的窗口表现,所以无需写 window这个键

 

 

示例:

{

  "navigationBarBackgroundColor": "#ffffff",

  "navigationBarTextStyle": "black",

  "navigationBarTitleText": "微信接口功能演示",

  "backgroundColor": "#eeeeee",

  "backgroundTextStyle": "light"

}

内容转自:https://blog.csdn.net/michael_ouyang/article/details/54883903

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值