小程序学习：第一波初识小程序-官方案例

    闲来无事研究研究小程序,毕竟如今辣么火的一个产品,可是做为前端盲的我不得不一步一步的跟随去学习,没有大神的那种快速入口,跟着官方文档循序渐进的走吧,本想在小程序中针对每个字段进行注释描述方便本身去定义学习,可是在小程序里面的json中不支持,我的又懒得每次登录微信官方去查看,因此在这里就进行偷师注释下,也算是记录下本身的学习过程了。

  第一步咱们必定是须要一个微信开发者工具：开发者工具下载地址请移步 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 进行工具下载,你可能还须要一个开发者帐号若是你想把你所开发的小程序发布出来供你们使用的话,小程序帐号注册请移步https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=1528300445 进行帐号注册.更详细的请百度下吧,度娘很强大的说.（其实官方文档讲的很细致了）

  废话很少说了,跟着官方所提供的案例进行实现下吧

  这个就是按照官方步骤所实现后的效果,此篇幅主要记录一些参数的含义

 app.json配置项列表

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

 

pages:用于描述当前小程序全部页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪一个目录。

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 支持
enablePullDownRefresh	Boolean	false	是否开启下拉刷新	微信版本 6.5.16
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

 

tabBar:若是小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏能够切换页面），能够经过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

Tip:

当设置 position 为 top 时，将不会显示 icon
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

Tip参数描述

属性	类型	必填	默认值	描述
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

其中 list 接受一个数组，数组中的每一个项都是一个对象，其属性值以下：

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

networkTimeout

能够设置各类网络请求的超时时间。

属性说明：

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

debug

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

page.json

每个小程序页面也可使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，因此无需写 window 这个键，如：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如"#000000"
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black/white
navigationBarTitleText	String		导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark/light
enablePullDownRefresh	Boolean	false	是否开启下拉刷新，详见页面相关事件处理函数。
disableScroll	Boolean	false	设置为 true 则页面总体不能上下滚动；只在 page.json 中有效，没法在 app.json 中设置该项
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

 

先这样记录下吧