简单的注册后便可以使用微信扫码登录页面了
进入微信开发文档下载页面
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
选择相应版本下载
扫码登陆
新建工程
至此,工程创建完毕
这张图简单的介绍了微信小程序新建工程的目录结构
首先我们先从app.js文件讲起.
app.js文件时项目的全局入口文件,整个项目的生命周期,全局变量等等都在这个文件中声明实现.
下面是一个简单的代码演示
  1. //app.js
  2. App({
  3.   onLaunch: function(){
  4.       //代码块
  5.   },
  6.   globalData: {
  7. 	//代码块
  8.   }
  9. })
在这个代码中我们可以看到两个字段,一个是onLaunch,一个是globalData.
正如变量名所说,onLaunch指的是程序启动时调用执行,有点构造函数的味道,globalData则是全局变量的声明.
生命结构周期
  1. onLaunch当小程序初始化完成时,会触发onLaunch(全局只触发一次)
  2. onShow初始化完成后触发,或者从后台进入前台也会触发
  3. onHide从前台进入后台会触发,点后退按钮或者home也会触发
第二个文件是app.json
app.json是一个全局配置文件,在文件中常用的几个字段有
  1. pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序
    ⻚⾯定义在哪个⽬录。
  2. window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
  3. tabBar字段⸺定义小程序下方按钮样式属性
page字段
如果我们想要新建页面的话,只需要在
  1. //app.jspn
  2.   "pages":[
  3.     "pages/test/index",
  4.     "pages/index/index",
  5.     "pages/logs/logs"
  6.   ]
中添加即可,编辑器会自动创建文件
同时项目的默认加载界面为最上方的页面路径.
在app.json中的window字段设置默认页面和全局页面的窗口表现

同时可以通过对各个页面的.json的配置，对该页面的窗口表现进行重新配置，覆盖掉全局配置，注意在对应页面的json文件下不需要不需要写window这个键,直接配置即可。

  1. {
  2.   "navigationBarBackgroundColor": "#123456",
  3.   "navigationBarTextStyle": "white",
  4.   "navigationBarTitleText": "页面配置"
  5. }

tabBar
设置底部tab的表现
  1. "tabBar": {
  2.     "list": [{
  3.         "pagePath": "pages/index/index",
  4.         "text": "text1",
  5.         "iconPath": "images/white_message.png",
  6.         "selectedIconPath": "images/dark_message.png"
  7.       },
  8.       {
  9.         "pagePath": "pages/logs/logs",
  10.         "text": "text1",
  11.         "iconPath": "images/white_message.png",
  12.         "selectedIconPath": "images/dark_message.png"
  13.       }
  14.     ]
  15.   }
WARNING!在微信小程序中启动页面一定要包含在tabBar中，并且启动页必须是tabBar的list属性中的第一个元素，才能正常显示

版权声明：本文为cnleika原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/cnleika/p/14219984.html