小程序 java encryptedData解密

目录结构

上图是我建立的的微信小程序的目录结构

主体学习

app.json

json简介

json在我们web开发中一般是作为前后端 数据交互 的方式, 他是以键值对的形式来进行数据的传输, 而他的书写规范也是极为简单的, 以{}来包括住整个json文件之后在里面使用 健值对的形式来,保存信息, 如

"key";"value"

"key":{"valuekey":"value"}

"key":["value1","value2"]

基本我们json的键值对就是上面的三种,再复杂的json都是由上面变种过来的, 每个键值对中间以’,’隔开. 而现在json也因为他的简单等一系列原因而慢慢地占据更多的位置, 好了这就是关于json的介绍,我们只要有了解就好了.

app.json总体

我们先看看微信给我们的满配的app.json(☺)

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

好了我们先对此有个了解就好了,接下来开始剖析了

下表为官方对各个字段的解释

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启 debug 模式

我们也会根据这个表格来进行相对应的解释

pages

类型 StringArray 字符串数组

必填 是

描述 设置页面路径

pages他是接受一个数组,指定小程序是由那些页面组成, 每个字符串的组成为 [路径+文件名(去掉后缀)], 第一个代表了小程序的初始页面, 而且不在这里面配置的路径是不可以访问的, 而且在这里面写个新路径微信编译器也会自动生成对应的四个文件.wxml .js .index.wxss .json, 注意微信小程序已经做好了优化, 他会自动将四个同名的文件进行关联,不需要自己做,这个在以后的开发中会有体现

自动生成没有的四个文件 在微信IDE开发环境下

window

下表为微信官方解释

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如#000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮	微信版本 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
backgroundColorTop	String	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信版本 6.5.16
backgroundColorBottom	String	#ffffff	底部窗口的背景色，仅 iOS 支持	微信版本 6.5.16
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

附带官方解释图片

1. navigationBarBackgroundColor
   类型  HexColor 使用十六进制来表示颜色,具体的可以上网查看
   默认  #000000 作用  设置导航栏的背景颜色
   测试  我将我的导航栏设计为天依蓝 #66ccff

"window":{
    "navigationBarBackgroundColor": "#66ccff"
  }

1. navigationBarTextStyle
   类型  String 仅支持 black/white 默认  white 作用  设置标题字体颜色
   测试  默认的是白的,但生成的时候是黑色的,我要将他调回来,而且为了防止将来发生改变,建议默认的是写上比较好,发现其实白色的也挺好看的

"window":{
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTextStyle":"white"
  }

1. navigationBarTitleText
   类型  String 默认  无
   作用  作为导航栏标题
   测试  将 Hello,World 作为标题

"window":{
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "Hello,World"
  }

1. navigationStyle
   类型  String 仅支持default以及custom 默认  default 作用  设置导航栏样式
   default 模式就是我们默认显示的那个标题栏
   custom   模式可自定义导航栏，只保留右上角胶囊状的按钮
   测试   我感觉还是使用默认的比较好

"window":{
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "Hello,World",
    "navigationStyle": "default"
  }

1. enablePullDownRefresh
   类型   Boolean 默认   false 作用   是否开启下拉刷新
   测试   设置为true

"window":{
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "Hello,World",
    "navigationStyle": "default",
    "enablePullDownRefresh" : true
  }

1. backgroundColor
   类型  HexColor 使用十六进制来表示颜色
   默认  #ffffff 白色
   作用   调整窗体的背景颜色. 知道么? 本来我是把这个作为第五个的但是我发现写了以后没有地方可以用这就很尴尬了…, 我一直在找那个 background 在哪, 之后在我看到下拉刷新后就明白了
   测试   将背景设为灰色 #F1F1F1

"window":{
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "Hello,World",
    "navigationStyle": "default",
    "enablePullDownRefresh" : true,
    "backgroundColor": "#F1F1F1"
  }

1. backgroundTextStyle
   类型   String 可选值dark / light 默认   dark 作用   影响下拉loading 的样式
   测试   在经过测试后我发现还是 dark 这个样式好看,给人一种在加载的感觉

"window":{
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "Hello,World",
    "navigationStyle": "default",
    "enablePullDownRefresh" : true,
    "backgroundColor": "#F1F1F1",
    "backgroundTextStyle" : "dark"
  }

接下来的是ios支持的

1. backgroundColorTop
   类型   String 默认   #ffffff 白色
   作用   顶部窗口的背景色, 其实他会覆盖掉我们上面设计的 backgroundColor 目前是这样的, 而且说是只会在ios中启用我只是在虚拟机中测试了,切换不同的手机, 发现还是启用了而且覆盖掉了,很神奇
   测试   我将这个设置为#ff0000 展示覆盖

"window":{
        "navigationBarBackgroundColor": "#66ccff",
        "navigationBarTextStyle":"white",
        "navigationBarTitleText": "Hello,World",
        "navigationStyle": "default",
        "enablePullDownRefresh" : true,
        "backgroundColor": "#F1F1F1",
        "backgroundTextStyle" : "dark",
        "backgroundColorTop" : "#ff0000"
      }

1. backgroundColorBottom
   类型   String 默认   #ffffff 白色
   作用   底部窗口的背景色, 而且因为backgroundColorTop的原因,说是只会在ios中启用我对此表示不相信
   测试   我将这个设置为#ffffff

"window":{
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "Hello,World",
    "navigationStyle": "default",
    "enablePullDownRefresh" : true,
    "backgroundColor": "#F1F1F1",
    "backgroundTextStyle" : "dark",
    "backgroundColorTop" : "#ff0000",
    "backgroundColorBottom" : "#ffffff"
  }

1. onReachBottomDistance
   类型   Number 单位 px 默认   50
   作用   说是上拉触底事件,但是我也没法上拉啊,等我回来学到了再说
   演示代码效果
   
   代码展示

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/mypage/mypage"
  ],
  "window":{
    "navigationBarBackgroundColor": "#66ccff",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "Hello,World",
    "navigationStyle": "default",
    "enablePullDownRefresh" : true,
    "backgroundColor": "#F1F1F1",
    "backgroundTextStyle" : "dark",
    "backgroundColorTop" : "#ff0000",
    "backgroundColorBottom" : "#ffffff",
    "onReachBottomDistance" : 50
  }
}

tabBar

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上边框的颜色， 仅支持 black/white
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否	bottom	可选值 bottom、top

1. list
   类型   Array 必填
   默认   无
   作用   在顶部或底部创建按钮组
   测试   我将系统原生的两个页面,作为按钮组

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }

1. color
   类型   HexColor 默认   无
   作用   tab上的文字默认颜色
   测试   我采用了黑色的字 #000000

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ],
    "color" : "#000000"
  }
}

1. selectedColor
   类型   HexColor 必填
   默认   无
   作用   tab上的文字被选中的颜色
   测试   我将被选中的颜色设置为 绿色 #009900

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ],
    "color" : "#000000",
    "selectedColor" : "#009900"
  }

1. backgroundColor
   类型   HexColor 必填
   默认   无
   作用   tab的背景色
   测试   我将背景色设置为白色 #ffffff

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ],
    "color" : "#000000",
    "selectedColor" : "#009900",
    "backgroundColor" : "#ffffff"
  }

1. borderStyle
   类型   String 非必填
   默认   black 作用   tab按钮组容器的边框
   测试   我试图调为白色但是感觉不好看,然后我又调为默认的黑色

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ],
    "color" : "#000000",
    "selectedColor" : "#009900",
    "backgroundColor" : "#ffffff",
    "borderStyle" : "black"
  }

1. position
   类型   String 支持bottom / top 默认   bottom 作用   设置tabBar是在顶部还是底部
   测试   设置为底部,其实顶部也很好看,但是为了接下来我还是设置为底部

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ],
    "color" : "#000000",
    "selectedColor" : "#009900",
    "backgroundColor" : "#ffffff",
    "borderStyle" : "black",
    "position" : "bottom" 
  }

效果演示

list解析

这个主要是用于对你的tabBar里面的list中的item进行定制操作

下表为官方文档

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为top 时，此参数无效

对于前两个很简单, 一个是这个item对应的页面, 一个是要显示的文字,现在我要把我自己创建的一个页面添加进来

"list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "pagePath": "pages/mypage/mypage",
        "text": "我"
      }
    ]

演示

后两个应当也是成组出现的, 一个是未选中的图标, 一个是已选中的图标
在此打个广告 iconfont 阿里巴巴矢量图库 我采用的是这里的图标,挺好的

我将下下来的用户设置为 user.png, 填充的设置为 userUse.png
首先我设置了 iconPath,当点击时会没有图片

{
        "pagePath": "pages/mypage/mypage",
        "text": "我",
        "iconPath" : "imgs/user.png"
      }

演示

我们发现在选中时图片没了, 这是肯定的,因为我们只设置了没选中的, 那么接下来我们设置下选中图片selectedIconPath

{
        "pagePath": "pages/mypage/mypage",
        "text": "我",
        "iconPath" : "imgs/user.png",
        "selectedIconPath" :"imgs/userUse.png"
      }

演示

我们还记得 假如position值为top时图标不会显现, 让我们试试

networkTimeout

这个因为暂时我们并没有学习对应的js,我们先把官方文档搞到手

属性	类型	必填	说明
request	Number	否	wx.request的超时时间，单位毫秒，默认为：60000
connectSocket	Number	否	wx.connectSocket的超时时间，单位毫秒，默认为：60000
uploadFile	Number	否	wx.uploadFile的超时时间，单位毫秒，默认为：60000
downloadFile	Number	否	wx.downloadFile的超时时间，单位毫秒，默认为：60000

我只解释里面的三个因为有一个我也没看懂. 或许后面就懂了

1. request
   类型   Number 单位 毫秒 否
   默认   无
   作用   设置request请求超时时间
   测试   我设为10秒吧,原本是60秒

"networkTimeout" : {
    "request" : 10000
  }

1. uploadFile
   类型   Number 单位 毫秒 否
   默认   无
   作用   设置上传文件请求超时时间
   测试   这个设为20秒,原本是60秒

"networkTimeout" : {
    "request" : 10000,
    "uploadFile" : 20000
  }

1. downloadFile
   类型   Number 单位 毫秒 否
   默认   无
   作用   设置下载文件超时时间
   测试   这个设为20秒,原本是60秒

"networkTimeout" : {
    "request" : 10000,
    "uploadFile" : 20000,
    "downloadFile" : 20000
  }

这个也没什么演示的,等我回来做网络访问时一起做了

debug

关于debug 我给出官方解释

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info
的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

在使用debug 后我们会发现控制台提示量会显著提升,示例