微信小程序(一)--微信小程序的介绍

一.微信小程序简介
　　小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
二.小程序界面结构
　　在成功创建一个微信小程序项目之后,在根目录下存在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文件相关描述

 //app.js
 var obj = {
   onLaunch: function () {
     // 展示本地存储能力
     var logs = wx.getStorageSync('logs') || []
     logs.unshift(Date.now())
     wx.setStorageSync('logs', logs)

     // 登录
     wx.login({
       success: res => {
         // 发送 res.code 到后台换取 openId, sessionKey, unionId
       }
     })
     // 获取用户信息
     wx.getSetting({
       success: res => {
         if (res.authSetting['scope.userInfo']) {
           // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
           wx.getUserInfo({
             success: res => {
               // 可以将 res 发送给后台解码出 unionId
               this.globalData.userInfo = res.userInfo

               // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
               // 所以此处加入 callback 以防止这种情况
               if (this.userInfoReadyCallback) {
                 this.userInfoReadyCallback(res)
               }
             }
           })
         }
       }
     })
   },
   globalData: {
     userInfo: null
   }
 };
 //调用了一个APP方法(全局方法)
 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语法,可以进行导航来样式和组成的相关配置..

 {
   "pages": [
     "pages/index/index",
     "pages/logs/logs",
     "pages/demo/demo"
   ],
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#ccc",
     "navigationBarTitleText": "微信小程序",
     "navigationBarTextStyle": "black"
   },
   "tabBar": {
     "list": [
       {
         "pagePath": "pages/index/index",
         "text": "首页"
       },
       {
         "pagePath": "pages/demo/demo",
         "text": "自定义"
       },
       {
         "pagePath": "pages/logs/logs",
         "text": "日志"
       }
     ]
   },
   "sitemapLocation": "sitemap.json",
   "style": "v2",
   "debug":true
 }

--在开启debug日志后,将会打印程序开发阶段的日志文件信息,方便我们测试调优.
--配置底部导航栏(标签栏)