小程序学习–1 开发工具、目录结构
简介
微信小程序就是一个类似 RN 的*，可以快速开发，有一定的适用场景，但是也有其局限性，
适合于 低频 但重要的需求
微信小程序提供了什么？
底层API 和 组件 微信小程序官方文档
开发工具的使用
点击下载官方小程序开发工具
安装后点击添加项目
选择无AppId(基本上不影响开发)
填写项目名称和项目目录，注：新建文件夹可以用来创建quick start 项目，直接引入已经开发过的文件夹，可以用来打开别的小程序项目
其他开发工具
个人感觉官方的小程序开发工具不太好用（用完之后还关不了），所以找了一下替代工具，
sublime text 3和atom虽然都有插件，但是用起来还是不顺手，最后找到了这个Egret Wing这个IDE提供了对微信小程序所有文件类型的支持，包括代码提示和语法高亮，也可以自定义主题，更关键的是可以，实时预览应用，但是不知道什么原因，在集成在IDE 的控制台中，没有输出调试信息，点击调试，会打开小程序的官方开发工具，然后就卡住了…，所以，本人会手动将Egret Wing 和小程序开发工具都开启，这样在IDE中修改后保存，在官方开发工具中会自动刷新。
目录结构简介
App 跟 Page 的关系是，App在整个小程序中只能有一个，但小程序中可以有多个页面，也就是多个Page,页面相关的文件都放在根目录下的pages目录，每个页面由四类文件组成，名字要相同，xxx.js / xxx.wxml / xxx.wxss / xxx.json
1.目录最外层的 app.js app.json app.wxss
1.app.js 应用的入口
2.app.json 针对微信小程序的全局配置，主要包含以下几个配置
- pages ：页面路径的数组，表示小程序要加载的所有页面，其中数组的第一项代表小程序的初始页面
{
"pages":[
"pages/index/index"
"pages/logs/logs"
]
}- window : 设置小程序的状态栏、导航条、标题、以及窗口背景颜色
{
"window":{
"navigationBarBackgroundColor": "#ffffff", // 导航栏背景颜色
"navigationBarTextStyle": "black", // 导航栏标题颜色，仅支持 black/white
"navigationBarTitleText": "title", // 导航栏标题文字内容
"backgroundColor": "#eeeeee", // 窗口的背景色
"backgroundTextStyle": "light", // 下拉背景字体、loading 图的样式，仅支持 dark/light
"enablePullDownRefresh": "false" // 是否开启下拉刷新
}
}- tabBar : 用于页面切换，适用于常规的Tab应用，可置于顶部或者底部，是一个数组只支持2-5个tab
{
"tabBar": {
"color": "#fff", // tab 上的文字默认颜色
"selectedColor": "#fff", // 文字选中时的颜色
"backgroundColor": "#000", // tab 的背景色
"borderStyle": "white", // tabbar上边框的颜色， 仅支持 black/white
"position": "bottom", // tabbar的位置，可选值 bottom、top
"list": [{
"pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
"text": "首页", // tab 上按钮文字
"iconPath": "img/a.png", // 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
"selectedIconPath": "img/b.png" // 选中时的图片路径
}, {
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "img/a.png",
"selectedIconPath": "img/b.png"
}]
},
}- networkTimeout : 配置小程序网络请求的超时时间
{
"networkTimeout": {
"request" : 6000, // wx.request的超时时间，单位毫秒，默认为：60000
"connectSocket": 6000, // wx.connectSocket的超时时间，单位毫秒，默认为：60000
"uploadFile": 6000, // wx.uploadFile的超时时间，单位毫秒，默认为：60000
"downloadFile": 6000 // wx.downloadFile的超时时间，单位毫秒，默认为：60000
}
}- debug : 调试模式开关，开发时开启，发布时关闭
{
"debug": true
}3.app.wxss 全局样式文件
2.pages文件夹
pages文件夹下有很多其他文件夹，每个文件夹代表一个页面的内容，每个页面的内容包含以下文件
1.page.json 页面配置文件
每个页面可以单独配置 page.json 他会覆盖 app.json中的配置，只对当前页面生效
2.page.wxml 页面的布局文件，作用相当于 HTML 文件，但是标签不相同，xx.wxml 文件中的标签同时还代表组件
3.page.wxss 页面的样式文件，类似于 CSS 文件， 语法上基本一致 但是 有些选择器不能使用了
4.page.js 页面的功能、数据都写在这里边了，写法上类似
Vue.js
3. app.js 中的写法
App() 小程序的注册入口，全局唯一
// 注册微信小程序，全局只有一个
let appConfig = {
data: {}, // page页的数据
// 小程序生命周期的各个阶段
onLaunch : function () {},
onShow : function () {},
onHide : function () {},
onError : function () {},
// 自定义函数或者属性
};
App(appConfig);
// 其他位置引用
const app = getApp();4. page.js
Page() 页面注册入口
写法上类似App()入口注册，用来注册一个页面，维护该页面的生命周期及数据
let pageConfig = {
data : {},
// 页面生命周期的各个阶段
onLoad : function () {},
onShow : function () {},
onReady : function () {},
onHide : function () {},
onUnload : function () {},
onPullDownRefresh : function () {},
onReachBottom : function () {},
onShareAppMessage : function () {},
// 自定义函数或者属性
};
Page(pageConfig);
// 获取页面堆栈，表示历史访问过的页面，最后一个元素为当前页面
const page = getCurrentPages();小程序的生命周期
1.前台和后台 ： 小程序处于最顶层的时候是前台（也就是正在使用），当有其他任务时处于后台（也就是在接入电话等时候）
2.app 的生命周期
// app.js
App({
onLaunch: function () {
// app 启动
console.log('App onLaunch');
},
onShow: function () {
// app 显示
console.log('App onShow');
},
onHide: function () {
// app 到后台
console.log('App onHide');
}
})3.page 的生命周期
Page({
data:{
text:"Page login"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数,装载页面
console.log('---index---onLoad---');
},
onReady:function(){
// 页面渲染完成
console.log('---index---onReady---');
},
onShow:function(){
// 页面显示
console.log('---index---onShow---');
},
onHide:function(){
// 页面隐藏
console.log('---index---onHide---');
},
onUnload:function(){
// 页面关闭，页面卸载
console.log('---index---onUnload---');
},
itemClick: function () {
console.log('item is click');
// 跳转页面,上一个页面执行onHide，可以返回
wx.navigateTo({
url:"../logs/logs?id=1" // 向下一个页面传递数据
})
// 第二种跳转，上一个页面执行onUnload,不可以返回
// wx.redirectTo({
// url:"../logs/logs"
// })
// 跳转到Tab页面
// wx.switchTab({
// url:"../logs/logs"
// })
}
})页面跳转
1.wx.navigateTo({url:”“}) : 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面（最多能够打开五个页面）
2.wx.redirectTo({url:”“}) : 关闭当前页面，跳转到应用的某个页面
3.wx.switchTab() : 跳转到tabBar页面，并关闭其他所有非tabBar页面
4.wx.navigateback(delta:1) : 关闭当前页面，返回上一级或者多级页面，可以通过getCurrentPages()获取当前页面栈，决定要返回第几层
5.组件 navigator : 页面链接
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面