小程序学习记录（一）——基本样式介绍

这些天到处跑面试，结果屡屡碰壁。原因除了技术问题、生活上的问题外，遇到的最大的问题就是没有 小程序 开发经验了。于是我搜集了一些小程序的资料，结合慕课网、微信开放平台相关内容进行学习。这个系列将会从我实际学习中出发，去讲述我从学习小程序过程中获得的内容。

 详细安装、申请小程序开发KEY的可直接看微信公众平台，在这里我是想直接进行中大型的小程序项目开发，所以我直接把该申请的都申请了。而对于一般入门学习的初学者，我建议可以先不申请APPID等，直接下载安装微信开发者工具即可。

下图是开发工具的一个样式。

简要说一下，微信小程序和传统web前端组成其实差不多。

小程序项目由 多个 page 组件 + app.js + app.wxss + app.json + app.wxss 组成。其中 app.js 是公用的 js 代码块， app.wxss 是公用的样式表，app.json 是对整个小程序的全局配置，内容不能有注释语句 。

而每个 page 组件中是由 wxml、wxss、js、json 四个文件组成。

前三个文件对应web项目中的 HTML、css、js 文件，wxml 进行页面 DOM 结构编写， wxss 进行页面样式编写， js 进行页面逻辑业务编写。而 json 则负责导入相关组件的编写。

界面解析：

开发界面由三部分组成，顶部导航栏、下拉刷新界面 background、以及内容区域 pages

设置导航栏API都封装在这里了。

以下都是转至官方API，分别是设置程序标题、程序背景、以及 background 颜色 API

wx.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

OBJECT参数说明：

参数	类型	必填	说明
title	String	是	页面标题
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.setNavigationBarColor(OBJECT)

基础库 1.4.0 开始支持，低版本需做兼容处理。

OBJECT参数说明：

参数名	类型	必填	说明
frontColor	String	是	前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundColor	String	是	背景颜色值，有效值为十六进制颜色
animation	Object	否	动画效果
animation.duration	Number	否	动画变化时间，默认0，单位：毫秒
animation.timingFunc	String	否	动画变化方式，默认 linear
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.setBackgroundColor(OBJECT)

基础库 2.1.0 开始支持，低版本需做兼容处理。

动态设置窗口的背景色

OBJECT 参数说明：

参数	类型	说明
backgroundColor	HexColor	窗口的背景色
backgroundColorTop	HexColor	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	HexColor	底部窗口的背景色，仅 iOS 支持

 通过上面这些 API 我们就可以设置出我们想要的各种样式的小程序