1.小程序简单介绍与入门准备
第一部分:入门准备
1.注册账户
简单的注册后便可以使用微信扫码登录页面了
2.下载开发工具
进入微信开发文档下载页面
//developers.weixin.qq.com/miniprogram/dev/devtools/download.html
选择相应版本下载
3.打开工具
扫码登陆
新建工程
至此,工程创建完毕
第二部分:小程序简单介绍
目录结构
这张图简单的介绍了微信小程序新建工程的目录结构
首先我们先从app.js文件讲起.
app.js文件时项目的全局入口文件,整个项目的生命周期,全局变量等等都在这个文件中声明实现.
下面是一个简单的代码演示
//app.js
App({
onLaunch: function(){
//代码块
},
globalData: {
//代码块
}
})在这个代码中我们可以看到两个字段,一个是onLaunch,一个是globalData.
正如变量名所说,onLaunch指的是程序启动时调用执行,有点构造函数的味道,globalData则是全局变量的声明.
生命结构周期
- onLaunch当小程序初始化完成时,会触发onLaunch(全局只触发一次)
- onShow初始化完成后触发,或者从后台进入前台也会触发
- onHide从前台进入后台会触发,点后退按钮或者home也会触发
第二个文件是app.json
app.json是一个全局配置文件,在文件中常用的几个字段有
- pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序
⻚⾯定义在哪个⽬录。 - window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
- tabBar字段⸺定义小程序下方按钮样式属性
page字段
如果我们想要新建页面的话,只需要在
//app.jspn
"pages":[
"pages/test/index",
"pages/index/index",
"pages/logs/logs"
]中添加即可,编辑器会自动创建文件
同时项目的默认加载界面为最上方的页面路径.
window字段
在app.json中的window字段设置默认页面和全局页面的窗口表现
同时可以通过对各个页面的.json的配置，对该页面的窗口表现进行重新配置，覆盖掉全局配置，注意在对应页面的json文件下不需要不需要写window这个键,直接配置即可。
{
"navigationBarBackgroundColor": "#123456",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "页面配置"
}
tabBar
设置底部tab的表现
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "text1",
"iconPath": "images/white_message.png",
"selectedIconPath": "images/dark_message.png"
},
{
"pagePath": "pages/logs/logs",
"text": "text1",
"iconPath": "images/white_message.png",
"selectedIconPath": "images/dark_message.png"
}
]
}WARNING!在微信小程序中启动页面一定要包含在tabBar中，并且启动页必须是tabBar的list属性中的第一个元素，才能正常显示
