综合程序设计课程二（小程序开发）

综合程序设计课程二（小程序开发）

<处于更新当中>

1.软件的安装与注册

1.1使用软件：

①phpstudy（win版）

②微信开发者工具（稳定版）👉下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq)

请下载对应系统的版本，然后安装在C盘之外的盘里面(●'◡'●)

1.2软件的注册

1.2.1phpstudy的注册

首先下载了之后，打开后的样子，请看下图；

其中的MySQL的选项，可能不会成功启动。

解决方法：

①使用的端口可能已经被占用，这时点击MySQL后面的配置按钮，在跳转出的页面里会看到有一个端口，重新输入一个端口值。

②可能在电脑中已经有了一个单独的MySQL软件，将单独的MySQL软件卸载。（两个会起冲突）

③实在不行，就重装(●'◡'●)

在解决了以上问题后，点击软件管理（上图中所示位置），然后滚动鼠标轮去寻找下图红线标出来的组件，点击安装。

安装完后，点击管理按钮，会蹦出下面所示页面。

账号在phpstudy软件中的数据库选项中，如需更改，可点击<修改root密码>进行修改。（这个页面暂时用不到，你可以登陆进去之后就退出来）

1.2.2 微信开发者平台的注册

开发辅助 / 测试号 (qq)

点击上方网址，按照官方文档进行注册。

只需要申请测试号，然后登陆一下平台即可。

在平台页面的左侧，如下图所示，点击图中绿色标识的按钮，页面跳转出的页面会出现你的APPID

APPID是你开发的小程序对应的相当于身份证吧。

2.开始学习(●'◡'●)

2.1创建项目

在图片红线的左边有个模板选择可以选择不同的初始模板，红线右边的是你当前选中模板的预览。

如果你想要改变默认存储目录的话可以点击红线左边部分的右上角的齿轮，里面可以更改默认存储目录。（如果不将项目存储在默认存储目录的话，是不能使用模板的）

在这里我们选择第一个模板即可。（记得选择AppID，不然创建不了项目）

如图中所示，我们先将红线圈住的部分以外的文件全部删掉（保留的这两个文件，暂时不需要我们自己去手写，用现成的即可）

2.1.1初始化全局文件

首先，我们先创建三个控制全局变量的文件。（我们取名为app）

接着，在空白的三个文件夹中，输入固定的框架代码。（如下面三行图所示）

app.js文件对应代码：

微信开发者平台这个软件，可以在打出相应框架的代码名时，可以跳出对应代码框架，选择自己需要的代码框架，按回车即可。

在这里我们选择如图所示的第一个选项的代码框架。

app.json文件对应代码：

这个需要自己手打了。然后这个代码的意思是：存储页面的文件位置，相当于它承认了这个页面的存在，承认之后，你才能将你想要的页面显示出来。(※注：记得一定要把页面的文件位置存在这个里面)

app.wxss文件对应代码

这个文件的代码，你可以根据自己想要的页面效果去更改。

它影响的是“部门”的整体风貌(●'◡'●)

图中的代码，是为了在改变页面背景颜色时，能够覆盖全局。

注：app命名的文件都是针对于整个小程序的，它相当于是一个领导，它会下指示，但是具体的每个页面的功能就需要Pages这个文件中的不同的“部门”去实现了

然后创建一个文件夹Pages，来存储各种你后续可能会写出的各种页面。

创建完Pages文件夹后，我们就要去创建不同的”部门了“，首先我们创建一个叫做index的”部门“（文件夹），这个”部门“管的就是我们想要的初始页面。（你可以不取index这个名字，取一个自己习惯的就行🤭）

创建完文件夹后，我们右键点击index文件夹，会蹦出如下面左图所示的选项，我们点击”新建Page“可以同时创建出我们所需要的四个文件。（四个文件如下面右图所示）

注：新建page操作，在全局的app.json中会自动添加文件位置，但如果是单独创建一个文件时，记得手动在app.json中添加一下文件位置。

注：在我们完成这个操作后，在app.json中会储存我们这个部门的位置，所以如果我们错误地创建了一个部门，之后又删除的话，请记得在app.json中删除这个部门的"信息"(如下图所示，储存部门位置)。

2.1.2编写初始页面

2.1.2.1页面组件美工设计

首先我们要先在index.wxss文件中编写出index页面的美术排版。

1.百分比显示：

下面代码中出现height:100%;中的100%的实际显示是由.wxml文件中使用此类排版的模块的上级模块决定。

比如说，我的上级模块的显示区域高度只有整个屏幕的一半大小，如果此时它的子模块使用的类中的height为100%，那么这个子模块的显示区域高度就会是屏幕的一半大小。

2.像素点显示：

rpx会适配不同手机的屏幕分辨率（根据手机的分辨率自动调整合适的像素大小）

/* Pages/index/index.wxss */
/*修改区块间的布局（仅限于当前目录下的模块）*/
.indexContainer{/*整个页面的主背景*/display:flex;flex-direction: column;/*页面排列方式；这里是将子组件竖直排列*/align-items: center;/*子组件在侧轴（竖直）方向上的对齐方式；这里是剧中*/background-color: rgb(190, 248, 231);/*背景颜色*/height: 100%;/*占据屏幕的百分比，在这里我们选择全覆盖*/
}.avatarUrl{/*用户头像*/width: 300rpx;height: 300rpx;border-radius: 50%;margin: 10%;
}.userName{/*用户名*/font-size: 40rpx;/*margin: 10%;*/
}.sentence{/*问候语*/margin: 10rem;/**/width: 300rpx;/*改变区域的宽度*/height: 100rpx;/*改变区域的高度*/line-height: 90rpx;/*文本在该模块中距离顶端区域的距离*/text-align: center;/*改变文本居中、靠右或靠左*/font-size: 38rpx;/*字体大小*/border: 1rpx solid #333;/*添加边框*/border-radius: 10%;/*可以使边框的四个角，有一定的弧度*/
}

注：我们在index. wxss中定义的每一个模块，都可以看作是一个类。在index.wxml文件中会用到这些类来使页面的布局变得更加合理和美观。

2.1.2.2页面布局

在下面的代码中，我们可以看到有多个模块。

<view>：创建一个没有任何特殊功能的普通模块

<image>：创建一个图片模块

<text>：创建一个文本模块（页面会显示此模块中的文字）

代码中的class传入的参数就是.wxss文件中设计的美术排版

src传入的是图片地址

<view class="indexContainer"><image class="avatarUrl" src="../../images/小小格温.png"></image><text class="userName">KD</text><view class="sentence"><text>Hello!!!</text></view>
</view>

2.1.3点击触发事件

※点击触发事件，其实就是👉👉👉当你点击某模块时，会调用js文件中对应的函数，从而实现某项功能。

图中划线部分(bind:tap)为触发事件的组件。（wxml文件）

在划线部分后面的"User_name_change"即为点击该代码对应页面区域时，会触发的事件代码。（该事件代码在js文件中）

上图即为触发的事件代码（js文件中），其中setTimeout代码可以使它其中的程序延时运行，this.setData代码可以修改变量或者创建变量。（修改变量前，别忘了在js文件中的data中创建变量）

console.log()代码的作用是在调试台中显示一下数据。

2.1.4页面跳转以及生命周期函数的运行

2.1.4.1页面跳转

首先，我们要新建一个页面（文件夹），来作为我们接下来要跳转的演示页面。（创建过程，请看前面2.1.1初始化全局文件部分）

创建之后，我们要在初始页面index文件夹下修改index.js文件，编写一个跳转页面的代码。

tologs(){wx.navigateTo({url: '/Pages/logs/logs',})},

有了跳转代码后，就要添加到页面布局文件中，这里，我们用到了上一小节的触发事件的功能。

<view class="sentence" bind:tap="tologs"><text>Hello!!!</text>
</view>

当我们在index初始页面中，点击该模块时，小程序会跳转到logs页面中

在这里我设置的跳转模块是图中的Hello!!!，当我点击该模块时，页面会跳转到logs页面中。

2.1.4.2 生命周期函数

在js文件中，onLoad、onReady、onShow、onHide和onUnload都是生命周期函数，他会根据页面的情况而运行。（在你创建js文件时，这些函数都是直接出现的且会有注释指明这些函数的作用）

我们在每个生命周期函数中都加入类似于下面的代码，就可以在调试台中看到，它们的运行情况了。（该函数会在程序运行该函数时，在调试台中显示括号中字符串的内容）

console.log('onReady() 监听页面初次渲染完成')//注意不同的生命周期函数的展示内容要区分一下

以下为调试台中的显示

2.1.5获取用户信息

首先我们要在index.js文件中编写获取用户信息的代码程序。

这里我们用到了wx.getUsetProfile函数来获取用户信息。

然后我们在index.wxml文件中会用到button组件（按钮），来作为未登录状态时的状态。

下面的代码中我们用到了wx:if和 wx.else代码，其功能就是判断当前userInfo是否存在，如果存在就会获取变量中的avatarUrl，不存在就会使页面出button状态（未授权状态）。

<image wx:if="{{userInfo.avatarUrl}}" class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
<button wx:else bind:tap="getUser_Info">
//当我们点击页面中button按钮，就会触发getUser_Info函数获取用户信息<text>获取用户信息</text>
</button>

我们为了它的排版与获取信息后的页面排版一致，需要给button组件进行排版。

对于button组件，我们可以在wxss文件中，直接以其名字命名，然后改变它的排版。（具体看下方代码）

当然，你也可以直接运用我们在2.1.2中展示过的avatarUrl类，来实现该效果。

button{width: 300rpx;height: 300rpx;border-radius: 50%;margin: 10%;
}

点击下图中的白色圆圈位置，小程序就会跳转出授权页面。（我们可以发现，未获取信息时的排版是与获取后的排版是一致的）

2.1.6轮播图

要想实现轮播图的效果，我们要用到swiper组件。（官方文档👉视图容器 / swiper (qq)）

这里我们将在logs文件夹里，实现该功能。

首先我们要找到一些图片，存放在小程序项目文件夹里面。（或者你也可以选择使用网上的图片的URL👉请查看我的另一篇如何获取图片的URL的文章）

接着就要在logs.wxml文件中使用swiper实现轮播图效果。(src后面的是图片地址)

<swiper class="SWIPER" indicator-dots="true" indicator-color="blue"><swiper-item><image src="../../images/kudos-productions-set8-chibi-base-annie-3d-binliugangzheng-01.jpg"></image></swiper-item><swiper-item><image src="../../images/kudos-productions-set8-chibi-panda-annie-3d-binliugangzheng-02.jpg"></image></swiper-item>
</swiper>

排版代码（wxss）

.SWIPER{width: 100%;height: 700rpx;
}
.SWIPER image{//运用了SWIPER的模块中的，所有子模块（image）都会应用下面的排版/*此类定义可以将logs.wxml文件中应用了SWIPER类的模块中的所有<image>的子模块都应用如下的显示格式*/width: 100%;height: 100%;
}

效果如下图所示（※注：不要忘记在wxss文件中编写页面排版）

2.1.7封装请求功能函数

首先我们新建一个文件夹：

①在项目文件夹中创建utils文件夹。

②在utils创建page，取名requests。

然后在request.js文件中编写请求功能的代码程序。

export default (url,method='post') => {return new Promise((resolve,reject) => {wx.request({url,method,success: (res) => {console.log('请求成功:',res);resolve(res.data);},fail: (err)=>{console.log('请求失败：',err);reject(err);}})})
}

其中，我们用到了wx.request(网络 / 发起请求 / wx.request (qq))

URL传入的是网页的API，method传入的是HTTP 请求方法。