任务 1 小程序云开发项目创建
任务目的
下面的情感分析示例基于小程序实现,所以这一步的目标就是引导学员实现小程序云开发项目的创建。创建小程序需要用到小程序ID,所以第一步先要进行小程序的注册,注册好小程序后便可以获取到小程序ID。接下来需要下载微信开发者工具,用来进行小程序的开发,下载并安装完成后,便可以创建一个新的小程序项目,依次填入小程序的项目信息后,即完成了小程序的创建工作。
任务步骤
关于小程序的注册和创建过程,在腾讯云官方的课程 小程序开发-开发小程序的准备工作 一节中有详细的介绍。观看下面的任务步骤前,请学员先通过视频学习此节的课程内容,再结合下方的辅助说明进行实际操作。
1.注册小程序
(1)登录 微信公众平台官方网站 :
(2)找到立即注册,选择注册小程序:
(3)依照注册页面的提示信息,完成小程序的注册。
完成小程序的注册后,将会自动跳转到小程序主页,界面如下:
建议在开始小程序的开发以前,对小程序的基本信息进行简单的填写补充,帮助开发者更好的辨认自己创建的小程序。
经过这一步的操作,学员就已经完成了小程序的注册,下一步将会引导学员获取小程序ID,用于在微信开发者工具中进行小程序的创建。
注:更多小程序学习的相关视频,可以再在 小程序学习路径课 中查看学习。
2.获取小程序ID
停留在刚才跳转到的小程序主页,点击左侧的 “开发” 功能,然后点击上方的 “开发设置” ,便可以在开发者ID页面获取到小程序ID。小程序的创建和开发均需要用到此ID,请妥善保存。
注:如果学员不慎关闭了上方的小程序主页,可以通过访问 小程序官网 ,完成登录操作后进入到上方的小程序主页。
3.下载微信开发者工具
(1)进入微信开发者工具 下载页面 :
根据学员的运行环境,选择适合的软件版本进行下载。第一次进行小程序开发,建议选择 稳定版 进行下载。
(2)打开下载好的微信开发者工具安装软件,根据提示信息进行软件安装。
注:建议使用纯英文目录作为微信开发者工具的安装目录。
完成微信开发者工具的下载和安装后,便可以创建小程序项目。
4.创建小程序项目
(1)打开微信开发者工具
(2)扫码登录微信账号
注:登录的微信账号应与注册小程序时绑定的微信账号保持一致。
(3)选择 “新建项目” ,创建一个名称“nlp_demo”的小程序项目
(4)填写项目信息(项目名称、项目目录、APPID、开发模式),后端服务选择 “小程序·云开发” :
(5)点击“新建”按钮,创建小程序项目。
至此一个小程序项目已经创建完成,接下来将会进行小程序项目的初始化工作。
5.小程序项目初始化
首先需要对小程序项目的项目目录进行初始化,初始化的过程请参考 小程序开发-初始化项目 视频中的操作,下面为关键步骤的展示说明。
(1)app.json
配置。
app.json
文件是小程序的全局配置文件,这一步将会通过修改此文件中的代码,完成部分的项目初始化工作。
打开app.json
,清除pages
中多余的页面条目,仅保留index页面:
【修改文件:app.json,所在对象:pages】
"pages": [
"pages/index/index"
],
修改下方window
中的navigationBarTitleText
,对应默认的页面展示标题,将其修改为 “自然语言处理” :
【修改文件:app.json,所在对象:window】
"window": {
...
"navigationBarTitleText": "自然语言处理",
...
},
(2)项目目录初始化。
清除项目目录中多余的目录、文件和代码,仅保留项目开发所需的关键内容。
初始化完成的小程序目录,以及保留文件的修改说明如下:
.
├── README.md
├── cloudfunctions # 清空目录
├── miniprogram
│ ├── app.js
│ ├── app.json # 删除pages数组中index外的所有页面
│ ├── app.wxss # 清空文件
│ ├── pages
│ │ └── index
│ │ ├── index.js # 仅保留Page({})对象
│ │ ├── index.json # 清空文件
│ │ ├── index.wxml # 清空文件
│ │ └── index.wxss # 清空文件
│ └── sitemap.json
└── project.config.json
(3)安装Node.js
。
进入 Node.js 下载页面,按自己的操作系统下载所需安装包。建议大于8.0版本,本实验使用的是 12.13.0版本。
下载完成后双击安装软件即可安装。
注:安装 Node.js,是因为本地开发调试时需要用到。在微信中运行的小程序,环境在云端构建,无需开发者手动配置。
6.引入Vant组件。
这一步将会引入Vant组件,借助此组件,学员可以快速实现小程序界面的搭建。
引入Vant组件一共分为5步操作:
- 终端打开项目
- 构建
package.json
- npm安装Vant组件
- 小程序中构建npm
- 小程序开启 “使用npm模块”
下面会对详细的操作步骤进行介绍。
(1)在小程序中选择miniprogram
目录,右键选择 “在终端中打开” :
(2)构建package.json
。
引入Vant前需要先构建package.json
文件,执行命令:
npm init -y
可以完成初始化操作,接下来便可以引入Vant组件。
(3)引入Vant组件。
在终端中执行下方命令,便可以引入Vant组件,引入命令如下:
npm i @vant/weapp -S --production
输入上方的命令并按下回车,等待组件安装完成,即可实现Vant组件的引入操作。
(4)进入小程序开发者工具,在项目中点击 “工具” 菜单,选择 “构建npm” ,完成npm项目构建:
注:此时
miniprogram
目录中可能包含两个引入Vant组件的目录,保留其中的miniprogram_npm
目录即可,如果项目中还包含node_modules
目录,可以直接将其删除。
(5)在 “详情 - 本地设置” 中,勾选 “使用 npm 模块” :
至此Vant组件已经成功引入,并可以在小程序中直接使用。
附:关于Vant组件的更多介绍,可以参考Vant组件小程序版 开发指南 。
7.云开发环境配置
如果是首次使用小程序·云开发,需要先开通小程序的云开发功能。关于云开发的介绍和具体的开通步骤,可以参考视频 云开发项目-云开发环境开通 。
注:如果已经完成云开发环境的开通,可以跳过此步的操作。
开通小程序·云开发后,便可点击上方的 “云开发” 按钮,进入云开发控制台:
至此小程序项目初始环境的配置已经完成,接下来便可以开始在小程序中实现具体的功能。
学员评价