微信小程序开发day01——小程序的页面基本认识和属性

微信小程序学习笔记（1）

一、申请个人账号

二、安装开发者工具

三、申请程序

四、阅读帮助文档

1.简单认识基本结构以及页面

app.json【全局配置】

页面路径、界面表现、网络超时时间、底部 tab 等

摘自微信小程序开发者文档的帮助内容：

app.json 配置项列表

描述小程序的页面信息，第一项即红色细线框中的一项为首页路径

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 `black` / `white`
navigationBarTitleText	String		导航栏标题文字内容
navigationStyle	String	default	导航栏样式，仅支持以下值： `default` 默认样式 `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	是否全局开启下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom

以上就是json配置的基本信息。

Wxml模板

类似网页中的html,由标签、属性等组成。将常用的小组件进行打包，供开发者使用，有各种各样的组件，如<map></map> 、<button></button>等类似的，进行组合使用，大大提高开发效率。这也是微信小程序进行开发时候的简便性。如下图所示，就是微信的一个比较简单的wxml的页面。

微信参考vue和react框架，优化了部分语法，如下所示，就是进行文本渲染。通过在{{变量}}内设置一个变量，然后js在对这个变量进行赋值。（具体内容接下来会学习）

Wxss样式

类似css的样式，不过为开发者省去了有关不同屏幕移动端兼容性的问题，提供了一个新的换算单位rpx.

App.wxss样式作用于所有页面，而特定页面的如page.wxss则只作用于page页面。

JS 交互逻辑

优化了部分功能，同时可以通过js调用许多api

以上，就是对微信小程序的各个页面的功能之间的初步认识了。