微信小程序第一章

首先我们要先在百度中搜索微信公众平台：

然后点击进入注册我们的小程序账号：

接下来点击立即注册，然后就进入到下面的页面：

因为我们要做小程序项目，所以在这里选择小程序，接下来填写个人信息完成注册：

注册成功以后可以直接在首页登录：

登陆成功以后就跳转到首页，这里要和大家说一下，每个微信号只可以注册五个小程序号，所以要记住注册账号密码哦
接下来我们就要下载微信开发者工具了，我们进入官网下载安装好。

下载安装好在桌面打开：

点开以后我们可以看到这个界面：

我们可以在计算机中找到存放位置，并命名，AppID在微信公众平台中侧边栏点击“开发”>“开发”导航中的的二个选项“开发设置”中下滑会看到：

然后我们复制到刚才的AppID中，接下来的“开发模式”我们就选择“小程序”，如果有后台的话我们就选择“不使用云服务”，“语言”这里我们就选择“JavaScript”，然后点击新建完成

项目的准备工作就做好了，接下来我们新建项目：

一、微信小程序的基本目录结构：

1. [pages]：存放小程序的各个页面。
   小程序的每个页面都包含四个文件：
   index.wxml：相当于HTML文件。
   index.wxss：相当于CSS文件。
   index.js：相当于JS文件。
   index.json：页面的配置文件。
   ①新建页面：
   打开app.json文件，在pages键名的数组中，直接输入新页面的存放路径。
   ②删除页面：
   打开app.json文件，将需要删除的页面从pages键名的数组中删除，在从资源环境中将指定的页面右键删除掉。
   ③指定首页：
   打开app.json文件，将首页路径字符串调整到pages键名数组的第一个元素中。

2. [utils]：存放小程序开发过程中用到的第三方工具。

3. app.js：通用JS文件。

4. app.json：通用配置文件。

5. app.wxss：通用样式文件。

二、利用window配置项配置导航栏外观：

1. 打开app.json文件，找到 window的键名。
2. enablePullDownRefresh：设置是否允许用户通过下拉对页面进行刷新。（true、false）
3. backgroundColor：设置导航栏的背景颜色。
4. 、backgroundTextStyle：设置导航栏背景中显示刷新的样式。（dark、light）
5. navigationBarTitleText：设置导航栏文本内容。
6. navigationBarTextStyle：设置导航文本样式。（white、black）
7. navigationBarBackgroundColor：设置导航栏的背景颜色。
8. 在每个页面的json文件中，可以使用navigationBarTitleText设置单个页面的标题文本。

如何设置页面的背景颜色：
（1）每个页面都有一个根节点：。
（2）调试器 | Wxml
（3）可以在wxss文件中为page设置背景颜色。page{ background-color:#ff5857; }

三、微信小程序的组件：

1. 相当于原始的块级元素
2. 用于存放文本，是一个内联元素。
   3.<image src=“url”></image> 用于存放图片。
3. 例：制作一个块级元素，设置宽度和高度，以及背景颜色。
   可以设置该元素的宽度为375px，来占据iPhone 6 设备的整宽。
   可以设置该元素的看宽度为750rpx，来占据所有设备的可适配宽度。

四、微信小程序的文本插值：

1. 在页面的js文件中，有一个data区。
2. data区中的数据可以在wxml文件中利用{{}}进行文本插值。
3. data区中的数据可以在js文件中进行操作：

	（1）设置data区数据：
	     this.setData({
	        变量名:变量值   //利用this.setData()设置的变量会自动出现在data区
	})
	（2）获取data区数据：
	     this.data.变量名

4. 例：页面中有一个命令按钮，单击按钮将某个数据显示在页面的容器中。

	<button catchtap=“btnTap”></button>
	btnTap:function(){
		 this.setData({
		     book:“哈利波特系列”
		})
	}

五、微信小程序页面之间的跳转：

	1、wx.redirectTo({
	     url:‘指定跳转的目标文件地址’,
	     success:function(){ //跳转成功执行的代码},
	     fail:function(){ //跳转失败执行的代码},
	     complete:function(){ //跳转操作完成后执行的代码}
	})

	2、wx.navigateTo({
	     url:‘指定跳转的目标文件地址’
	})

两种方法的区别：
wx.navigateTo()方法进行跳转可以具备返回功能。（最多跳转5层）
wx.redirectTo()方法进行跳转不具备返回功能。