一.微信小程序简介
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
二.小程序界面结构
在成功创建一个微信小程序项目之后,在根目录下存在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日志后,将会打印程序开发阶段的日志文件信息,方便我们测试调优.
--配置底部导航栏(标签栏)