一.微信小程序简介
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
二.小程序界面结构
在成功创建一个微信小程序项目之后,在根目录下存在app.json(配置文件),app.js(逻辑文件),app.wxss(样式文件).文件夹pages为界面相关文件所在类,pages/index为默认的首页(index)所在文件夹,其中index.js(逻辑文件),index.json(配置文件),index.wxml(结构文件),index.wxss(样式文件):
--观察根目录下app.json文件:
--在windows中,定义设置了导航栏的样式:
backgroundTextStyle: 设置背景文字颜色,默认只能设置为dark和light
navigationBarBackgroundColor: 设置导航栏背景颜色
navigationBarTitleText: 设置导航栏的标题
navigationBarTextStyle: 设置导航栏文字颜色,默认只能设置为black和white
--在pages中设置路径:
"pages/index/index":寻找的是pages/index/index页面链接
"pages/logs/logs":寻找的是pages/logs/logs页面链接
--在微信官方开发文档中给出了其他可以自定义设置的配置属性信息:点击此处跳转官方文档
--自定义配置tabBar:
--在成功配置后,我们可以发现在页面模拟器中进行页面切换:
--app.js文件相关描述
1 //app.js
2 var obj = { 3 onLaunch: function () { 4 // 展示本地存储能力
5 var logs = wx.getStorageSync('logs') || [] 6 logs.unshift(Date.now()) 7 wx.setStorageSync('logs', logs) 8
9 // 登录
10 wx.login({ 11 success: res => { 12 // 发送 res.code 到后台换取 openId, sessionKey, unionId
13 } 14 }) 15 // 获取用户信息
16 wx.getSetting({ 17 success: res => { 18 if (res.authSetting['scope.userInfo']) { 19 // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
20 wx.getUserInfo({ 21 success: res => { 22 // 可以将 res 发送给后台解码出 unionId
23 this.globalData.userInfo = res.userInfo 24
25 // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
26 // 所以此处加入 callback 以防止这种情况
27 if (this.userInfoReadyCallback) { 28 this.userInfoReadyCallback(res) 29 } 30 } 31 }) 32 } 33 } 34 }) 35 }, 36 globalData: { 37 userInfo: null
38 } 39 }; 40 //调用了一个APP方法(全局方法)
41 App(obj);
--app.js文件在小程序运行时就会被加载,我们可以在该文件下方添加console.log()方法来验证该类的加载,在该类中主要作用是调用了一个App()全局方法,调用此方法的作用就是用来创建应用程序实例对象.定义应用程序的生命周期事件;在app.wxss中,定义了一些css样式属性.
--在pagex/index中,存在index.js文件主要是完成页面的逻辑,功能的实现;在index.wxml中则是进行界面定义,和html相似,但是是严格遵循XML语法的,在index.wxss中定义界面的样式,使用的是CSS语法,但是区别于CSS提供了更加方便的rpx单位(可以解决手机屏幕显示碎片化的问题).index.json文件,可以用来重写app.json中window中的属性样式,来调整页面的某些属性(只能设置windows当中的属性);
三.小程序的配置
在开发小程序的时候,通常都需要自定义小程序的标题导航来,底部导航栏等等界面设置,因此我们需要进行小程序的配置,我们可以在app.json中进行配置,也可以在每个页面的json文件中进行配置.
--配置app.json文件,该文件遵循JSON语法,可以进行导航来样式和组成的相关配置..
1 { 2 "pages": [ 3 "pages/index/index", 4 "pages/logs/logs", 5 "pages/demo/demo"
6 ], 7 "window": { 8 "backgroundTextStyle": "light", 9 "navigationBarBackgroundColor": "#ccc", 10 "navigationBarTitleText": "微信小程序", 11 "navigationBarTextStyle": "black"
12 }, 13 "tabBar": { 14 "list": [ 15 { 16 "pagePath": "pages/index/index", 17 "text": "首页"
18 }, 19 { 20 "pagePath": "pages/demo/demo", 21 "text": "自定义"
22 }, 23 { 24 "pagePath": "pages/logs/logs", 25 "text": "日志"
26 } 27 ] 28 }, 29 "sitemapLocation": "sitemap.json", 30 "style": "v2", 31 "debug":true
32 }
--在开启debug日志后,将会打印程序开发阶段的日志文件信息,方便我们测试调优.
--配置底部导航栏(标签栏)