软件开发小程序实习内容.pdfVIP

软件开发小程序实习内容

开发微信小程序，首先肯定需要去微信公众平台上注册一个微

信小程序了，我们在微信公众平台的注册页面选择“小程序”进行

注册。

接着有三个步骤：邮箱注册、邮箱激活和信息登记：

完成上述三个步骤后，就可以登录进入管理中心：

在基本设置中，我们可以设置微信小程序的名称、头像、说明

等基本信息。

在开发设置中，我们可以获取到小程序的AppID和

AppSecret，这在后续的开发中会使用到，同时我们可以在此设置小

程序服务器的域名：

安装和使用微信Web开发者工具

开发微信小程序需要使用到微信Web开发工具这一软件。我们

下载并安装好。

启动之后，需要我们使用微信扫码进行登录：

之后，新建一个小程序项目：

指定小程序的项目目录、输入小程序的AppID（管理页面中获

取）、输入项目名称，之后我们就进入了微信开发工具的主界面了：

因为我们使用了快速启动的模板，所以自动生成了一个

HelloWorld的Demo。接下来，我们创建我们的票圈神器的小程序页

面。

创建微信小程序页面

在创建小程序的页面之前，我们先来了解一下微信小程序的代

码结构。

根据微信小程序开发文档的介绍：小程序包含一个描述整体程

序的app和多个描述各自页面的page。

一个小程序主体部分由以下三个文件组成，必须放在项目的根

目录。app.js（定义小程序的逻辑）

app.json（定义小程序的公共配置）

app.wxss（定义小程序的公共样式表）

同时，一个小程序的页面由四个文件组成：JavaScript文件

（定义页面逻辑）

WXML文件（定义页面结构）

WXSS文件（定义页面样式）

JSON文件（定义页面配置）

微信小程序的视图层负责页面的展示，由WXML文件描述页面结

构和WXSS文件描述页面的样式。

WXML和WXSS是什么东西呢？我们可以拿HTML和CSS来与之进

行类比。虽然它们不一样，但是它们真的很相似。

WXML是一套微信定义的可嵌套的标记语言，而WXSS则具备CSS

的大部分特性，并对CSS进行了扩充和修改。

接下来我们来规划一下我们的小程序的页面构成：首页列表

页：用于显示可用于制作照片的条目；

详情表单页：用于显示照片效果以及接收用户输入信息；

照片结果页：用于显示生成的照片以及提供保存按钮；

创建页面目录和文件

首先，我们在项目目录结构的pages路径下新建一个detail目

录，其下包含三个同名的JS文件、WXML文件、WXSS文件；一个

result目录，其下包含三个同名的JS文件、WXML文件、WXSS文

件；最后pages目录下的结构如下图所示：

然后，在创建的JS文件中输入以下代码：Page({/**

*页面的初始数据

*/

data:{

},/**

*生命周期函数--监听页面加载

*/

onLoad:function(options){

},/**

*生命周期函数--监听页面初次渲染完成

*/

onReady:function(){

},/**

*生命周期函数--监听页面显示

*/

onShow:function(){

},/**

*生命周期函数--监听页面隐藏

*/

onHide:function(){

},/**

*生命周期函数--监听页面卸载

*/

onUnload:function(){

},/**

*页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh:function(){

},/**

*页面上拉触底事件的处理函数

*/

onReachBottom:function(){

},/**

*用户点击右上角分享

*/

onShareAppMessage:functi