微信小程序简要学习（上）

微信小程序简要学习（上）

 

一、主目录结构

• app.js为外部全局主js，可以当作一个父类
• app.json为全局配置文件，以对象形式存在
• app.wxss为全局样式文件，公用

 

二、页面目录结构

• items.js为私有的js，相当于子类
• items.json为以json为对象形式存在的配置(每个页面都有page对象)
• items.wxml为元素渲染页面
• items.wxss为私有样式，私有样式可以覆盖公有(import导入)

 

三、程序页面加载

小程序默认加载pages中的第一个目录（第一行），如下文，加载index，其他页面需要通过触发加载

3.1 app.json

"pages":[
	"pages/index/index",
	"pages/index1/index1",
	"pages/index2/index2",
]

导航栏navigationBar跟底部切换栏tarbar配置，详情参考官网文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE

3.2 app.json

  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第一个demo",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },

3.3 app.json

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/imooc/imooc",
      "text": "慕课网"
    }]
  },

以及网络请求以及debug一些配置

3.4 app.json

  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,

 

四、小程序APP的生命周期

• onLaunch：第一次打开