以下为《作业2 第一个手工编写的微信小程序》的无排版文字预览，完整格式请下载

下载前请仔细阅读文字预览以及下方图片预览。图片预览是什么样的，下载的文档就是什么样的。

作业2 第一个手工编写的微信小程序

【实验目的】

掌握微信Web开发工具的安装和使用

开发第一个手工编写的微信小程序项目

微信扫码预览小程序

PART I 准备工作

确保电脑中已安装微信Web开发工具

确保事先已经注册好小程序账号在FTP中下载相关素材



PART II 微信Web开发工具的下载与安装

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

/

根据自己电脑操作系统的版本，选择对应的下载链接。解释如下：

windows64：适用于windows 64位操作系统

windows32：适用于windows32位操作系统

mac：适用于苹果mac操作系统

以windows相关版本为例，下载后的文件如下图所示。

/

下载完成后进行安装，如下图所示。

/

安装完毕后，我们就可以在开发者工具中，新建小程序工程项目了。



PART III开发第一个小程序项目

当熟悉了小程序的目录结构和微信开发者工具的基本使用后，不妨尝试独立动手创建第一个小程序。

项目创建

本次项目创建选择空白文件夹myDemo，注意请取消勾选“建立普通快速启动模板”选项，以免自动生成代码影响手动编写。效果如图所示。

/

小程序项目填写效果示意图

点击“确定”按钮后，系统会自动生成项目配置文件project.config.json，如图所示。

/

自动生成项目配置文件project.config.json

此时在Console控制台有报错提示，如图所示。

/

未找到app.json文件报错提示

这是由于app.json是项目的入口文件，下一节将介绍如何手动创建页面配置文件。

页面配置

创建应用文件

应用文件主要有：app.json、app.js和app.wxss，其中app.wxss是可选文件，用于存放公共样式。这三个文件的作用域是整个小程序项目。

首先进行app.json文件的创建，点击编辑器目录结构左上角的+号按钮，在下拉菜单中选择“JSON”选项新建文件，并录入文件名app然后按回车键。

/

新建JSON文件

在app.json文件中输入一对{}符号，然后Ctrl+S快捷键进行保存，如图所示。

/

app.json文件初始代码

此时Console控制台仍有报错，这是由于app.json中还没有进行页面配置。稍后创建页面文件时系统会自动更新app.json的代码，然后错误将消失。

后面用同样的方法新建app.js和app.wxss文件进行新建应用文件的练习，这两个文件本次项目暂不需要使用，可以保持空白状态关闭即可。全部完成后的目录结构如图所示。

/

应用文件创建完成

创建页面文件

应用文件创建完毕后，需要继续创建页面文件。页面文件一般来说会统一放在pages文件夹中，每个页面有自己独立的二级目录，里面包含wxml、wxss、js和json四个同名文件。

同样是点击左上角的+号按钮，选择“目录”选项新建文件夹，命名为pages然后按回车键完成创建，如图所示。

/

新建目录文件夹

一般来说首页默认命名为index，表示小程序运行的第一个页面；其他页面名称可以自定义。本次项目只有一个页面文件，因此只需要创建index页面即可。

现在需要在pages目录内部创建index文件夹，这次是在pages目录上右击，选择“新建”—“目录”，然后输入index名称后按回车键完成创建，如图所示。

/

新建二级目录

完成后的目录结构如图所示。

/

应用文件创建完成

内容过长，仅展示头部和尾部部分文字预览，全文请查看图片预览。 加这两个动态数据的值，使其仍然可以显示原先的内容。代码片段如下：

data: {

userInfo: {

avatarUrl: '/images/logo.png',

nickName: 'Hello World'

} ,

isLogin: false

},





此时就已全部完成，保存后重新预览项目，最终效果图如图所示。

/

初始页面效果

/

点击按钮后效果



最终效果图



PART IV课后练习

请按照上述步骤，自己手工创建微信小程序，将运行结果截图。

练习将项目发送到手机端进行预览或调试。如果成功了，请将手机端的运行效果截图。

/





[文章尾部最后300字内容到此结束,中间部分内容请查看底下的图片预览]

以上为《作业2 第一个手工编写的微信小程序》的无排版文字预览，完整格式请下载

下载前请仔细阅读上面文字预览以及下方图片预览。图片预览是什么样的，下载的文档就是什么样的。