小程序学习1

今天开始学习了一下小程序，分享记录一下笔记在此

一个小程序主体部分由三个文件组成，必须放在项目的根目录，app.js、app.json、app.wxss以及新建项目后会生成几个其他配置文件，这三个对全局生效。
项目建立后，还有两个文件夹pages和utils，pages下面默认生成了两个小程序页面index和logs。utils下的util.js里面是时间格式化工具js库，其他工具js库也可以新建放utils下。
新建页面一般都放pages下面，需先建立一个文件夹命名为页面的名称，再到该文件夹下面新建页面，页面名称和文件夹名称一致。建立后同时会自动新增了该名称开头的，js，json，wxss为后缀的三个文件。每个页面的标准格式就是这四个文件。作用如下：wxhl等于html页面文件，wxss等于css样式文件，js等于java逻辑控制文件，json是数据文件，参考index和logs文件夹下的文件就一目了然。
小程序为什么有json文件，一般不把数据写死在wxhl而是写在json文件里面，wxhl用json里面的变量名即可， 以及遍历某些数据也就方便些了。但json文件一般情况下只有在app.json里面定义一些全局的数据，其他页面的json基本都是空文件(当然也可以看自己需要添加使用)

今天只学习小程序项目主体结构，所以精简一点的说，有用的就app.js和app.json， 主要就是在这两个文件里面新增、改东西，其作用是全局的。下面贴上这两个文件的代码。

app.json

/**
 * 这个json文件必须是严格的json格式，所以不能有任何的注释，使用时候需把这里面的注释全部删掉，这里注释只是为了说明解释代码的用法
 * 每一大块后面必须有一个逗号，比如window、networkTimeout、tabBar的大括号后面都有一个逗号
 * 每一项里面，也就是大括号里面最后一行不能有逗号
 */
{// 增删改页面都同时也需要在此增删改(新增page会自动也在这有生成一行的)
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  // 全局 整个窗口设置
  "window": {
    "backgroundTextStyle": "light", 
    "navigationBarBackgroundColor": "#fff", //小程序的标题栏背景颜色
    "navigationBarTitleText": "yulisao的demo", // 小程序的标题
    "navigationBarTextStyle": "black", // 标题颜色，只支持黑白色
    "enablePullDownRefresh": true,  // 是否允许下拉刷新
  },
  // 网络超时设置
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },

  // 底部菜单, 底部不需要菜单时删除此段代码
 "tabBar": {
   "color": "#000000", //tab 上的文字默认颜色
   "selectedColor": "#000001", //tab 上的文字选中时的颜色
   "backgroundColor": "#ffffff", //tab 的背景色
   "borderStyle": "black",//tabbar上边框的颜色,仅支持 black/white
   "position": "bottom", // tab 的显示位置，可选值 bottom、top
  // 菜单按钮，只能2-5个
  "list": [{
    "pagePath": "pages/index/index", //菜单跳转页面，必须在 pages 中先定义
    "text": "首页", // 菜单文案
    "iconPath": "iconPath", //图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效
    "selectedIconPath": "selectedIconPath" //选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
         
  },
  {
	"pagePath": "pages/logs/logs",
	"text": "日志",
	"iconPath": "pages/images/icon_pay.png",
	"selectedIconPath": "pages/images/icon_pay_ckd.png"
  },
  {
	"pagePath": "pages/logs/logs",
	"text": "我的",
	"iconPath": "pages/images/icon_yuan.png",
	"selectedIconPath": "pages/images/icon_yuan_ckd.png"
  }]
},
  "sitemapLocation": "sitemap.json"
}

app.js
新建一个项目时，app.js里面默认有App({})、onLaunch、onShow、onHide、onError等，我在里面写了一些简单点的东西

//app.js
//引入js，和html里面的引入写法略不同
var datautil = require("utils/util.js");

App({
  /** 定义的全局数据或者函数 */
  globalData: {
    userInfo: null,
    //定义全局变量
    httpurl: "www.123.com/test",// 请求主地址

    currentBrightness: 0.8, //屏幕亮度
    system: "",//系统类型
    statusBarHeight: "",//bar高度
    SDKVersion: 0,//sdk版本
    version: "",//微信版本号
  },

  //当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  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)
              }
            }
          })
        }
      }
    })
  },
  /** 以下根据需要可自行添加内容，也可以删除 */   
  //当小程序启动，或重新进入页面，会触发 onShow
  onShow: function (options) {
    let that =this;
    //亮度调整
    wx.getScreenBrightness({
      success: function (res) {
        that.globalData.currentBrightness = res.value;
        let displayBrightValue = 0.8;
        if (that.globalData.currentBrightness > 0.8) { displayBrightValue = that.globalData.currentBrightness }
        wx.setScreenBrightness({
          value: displayBrightValue,
          success: function () {
            console.log("调整亮度成功：" + displayBrightValue)
          }
        })
      }
    });

    //判断小程序版本号(兼容性)
    wx.getSystemInfo({
      success: function (res) {
        var SDKVersion = res.SDKVersion.replace(".", "");
        that.globalData.SDKVersion = SDKVersion;
        that.globalData.statusBarHeight = res.statusBarHeight;
        that.globalData.version = res.version;
        that.globalData.system = res.system;
        // console.log(res,SDKVersion);
        if (parseFloat(SDKVersion) < 16.4 || res.SDKVersion == null) {
          that.errorShowModel("微信版本过低，请升级后重试！");
        } else {
          that.globalData.phoneText = encodeURI(JSON.stringify(res)).replace(/%/g, "|");
        }
      },
    });
  },
  onHide: function () {//小程序隐藏运行
    let that = this;
    //恢复屏幕亮度
    wx.setScreenBrightness({
      value: that.globalData.currentBrightness,
    })
  },
  // 当小程序出现要打开的页面不存在的情况，会带上页面信息回调该函数
  onError: function (msg) {
    console.log(msg);
    // 不写重定向处理会跳转到默认的错误页面去
    wx.redirectTo({
      url: 'pages/error/error',
    })
  },
  
  /** 以下是自定义的全局功能给别的页面调用 */
  requsetFail() {//网络异常报错
    wx.hideLoading();    
    wx.showModal({
      title: "错误",
      content: "网络异常，请稍后重试~",
      showCancel: false,
      confirmText: "知道了",
      confirmColor: "#05adea",
      success: function (res) {
      }
    })
  },

})

// 定义若干个通用函数
function test1(that, objFun) {
  // ....
}