微信小程序快速入门+四个实战小程序（二）——实战项目一

一）实战项目一
  1）创建项目
  2）创建项目的目录和文件夹
  3）项目一的实现
  4）总结

————————————————————————————————————————————————————————

一）实战项目一

1）创建项目：

点击 “ 小程序 ”中的 + 号：

填写相关信息：

其中的 APPID就是在 “ 微信公众平台 ”登录后的页面中选择 “ 开发工具 ”的“ 开发管理 ”中的“ 开发设置 ”：


此时点击 “ 新建 ”就创建成功了：

此时关闭项目就会在我们的微信开发者工具中看到我们的项目test1：


2）创建项目的目录和文件夹：

如果想要把默认创建好的上面的项目文件全部删除自己创建，参见下面的方法：

先在创建项目时指定的项目保存路径下找到此项目：

其中的所有文件就是开发者工具中的文件，选择全部文件——右键“删除”，此时开发者工具中打开原本创建好的项目test1就会发现其中的文件都没了：



控制台报错 “ 未找到入口 app.json 文件 ”，那我们就创建一个 app.json 文件：

解决了 app.json 又爆出另一个错误 ：

解决方法：只需要在 app.json 文件中添加一对花括号并且点击 “ 编译 ”（或者Ctrl+s） 即可：

此时又出现另一个问题：

但是其实这个问题不用理它，这是因为我们的文件中有了{}但是没有其他内容，只要我们后面开始写代码这个问题就会被系统自动解决了。

创建一个 app.js 文件：

创建一个 app.wxss 文件：

此时，以app开头的文件就都创建完成了：

创建一个 pages目录文件（此目录文件可以自行命名，但是前面的三个app文件的名称一定不能变）：

右键点击 pages 总目录，在其中再创建一个 index 目录（一个分目录（index）下的所有文件最终是呈现一个页面的效果，所以有几个页面就有几个分目录）：

右键点击index 目录，在其中新建一个自行命名的page，习惯上此page要和目录同名所以也叫index（这样就不用再原本的index目录中创建js、json、wxss、wxml 文件了，其中已经自动包含了）：

此时我们的APP就有页面了，而且之前的报错自动解决了：

此时点击打开 app.json 文件会看到前面我们只是加了一对 {} 但是现在其中却已经自动把index目录中的文件包含进去了：

在 .wxml 文件中注释符是 <!--内容-->，或者使用快捷键 Ctrl+/ 也可以实现将光标所在的行进行注释的效果。.wxss 文件中注释符是 /*内容*/ ，或者使用快捷键 Ctrl+/ 也可以实现将光标所在的行进行注释的效果。

3）项目一的实现：

项目一的最终实现效果（项目一只有一个页面）

仔细观察成品图就会发现其实可已经我们的第一个小程序的页面分为三个部分实现：微信的图片、hello world文字、可以点击跳转的按钮。在 .wxml 中图片需要 <image></image> 标签，文字需要 <text></text> 标签，按钮需要 <button></button> 标签。

创建一个与pages目录同等级的images目录用于存放APP所需的图片：

此时会在项目存放的路径文件夹中看到新建的images文件夹，把从网上下载的微信的图片放置到images文件夹中：

此时开发者工具中在images目录中也出现了图片：

接着根据图片所在相对路径和文字、按钮提示在index.wxml 文件中进行如下代码编写（右边代码，左边效果预览）：

此时本页面所需的三个部分就都实现了，但是此时会发现我们只是在.wxml 中实现了页面“有什么”的需求，还没有在 .wxss 中实现“页面排版布局”，页面的呈现效果与我们小程序的最终效果图在排版和页面设计上存在很大的差别，而且虽然页面中已经有按钮但是当我们点击按钮时并没有实现跳转。所以，接下来我们就要进行相应设计：


微信图片、文字、按钮提示：

在.wxml 文件中的总标签 <image></image> 中添加一个自定义的名称，<view></view> 中也添加一个自定义名称：

然后在 index.wxss 文件中进行样式设计：



头部标题栏：

如果在pages的app.json文件设置标题栏那么所做的设置就对所有页面都有效，如果是在其下的index等其他页面文件中的json文件进行设置那么就只对当前页面有效。

在app.json文件中输入 win 就会出现可选的项：

我们回车就会自动补全对应的代码，之后要加上一个, ：

其中的参数值都是默认的小程序标题栏中如：背景颜色等的设置，我们根据需要进行修改：

最终效果图：

到此对于页面的设计布局就完成了，开始在 index.js 文件中设计按钮的逻辑实现，先在 index.wxml 文件中编写如下代码：

之后在 index.js 文件的代码中 data{} 代码后面添加如下代码（getMyInfo是我们在index.wxml 文件中自定义的一个函数）：

表示当我们点击按钮时就会弹出微信授权的提示，我们点击“ 允许 ”就会将获取到的信息输出：

上面已经实现了点击按钮获取用户信息的功能，但是信息并不同与我们的预期而是将信息直接输出到控制台中。其实，我们会发现页面中的hello world 是一个常量，同时图片也是一个常量，也就是已经定义就不可修改了，是一个死的设计，所以我们要使之能够在点击按钮时也一起发生变化，并且这个变化就是将获取到的用户信息显示在原本的hello world 的位置，将获取到的用户头像显示在原本的微信图片的位置，此时就需要将它们设置为一个变量。

在 index.wxml 文件中的 <text></text> 标签中设置一个名为 name 的变量：

而此变量的值就是我们在 index.js 文件的data{}中编写的代码：


接着实现点击按钮时就将获取的用户信息中的用户名显示到hello world 的位置，而用户头像显示到微信图片的位置：

解析：
1）e.detail.userInfo——获取详细的用户信息
2）let——定义变量需使用的关键字
3）let info=e.detail.userInfo——info变量的值就是获取到的用户的详细信息
4）this.setData()——用于修改data{}中变量的值的函数

成果图：

4）总结：