5分钟

任务 1 小程序云开发项目创建

任务目的

下面的情感分析示例基于小程序实现,所以这一步的目标就是引导学员实现小程序云开发项目的创建。创建小程序需要用到小程序ID,所以第一步先要进行小程序的注册,注册好小程序后便可以获取到小程序ID。接下来需要下载微信开发者工具,用来进行小程序的开发,下载并安装完成后,便可以创建一个新的小程序项目,依次填入小程序的项目信息后,即完成了小程序的创建工作。

任务步骤

关于小程序的注册和创建过程,在腾讯云官方的课程 小程序开发-开发小程序的准备工作 一节中有详细的介绍。观看下面的任务步骤前,请学员先通过视频学习此节的课程内容,再结合下方的辅助说明进行实际操作。

1.注册小程序

(1)登录 微信公众平台官方网站

4-1-1 登录微信公众平台

(2)找到立即注册,选择注册小程序:

4-1-2 选择注册账号类型

(3)依照注册页面的提示信息,完成小程序的注册。

完成小程序的注册后,将会自动跳转到小程序主页,界面如下:

4-1-3 跳转到小程序主页

建议在开始小程序的开发以前,对小程序的基本信息进行简单的填写补充,帮助开发者更好的辨认自己创建的小程序。

经过这一步的操作,学员就已经完成了小程序的注册,下一步将会引导学员获取小程序ID,用于在微信开发者工具中进行小程序的创建。

注:更多小程序学习的相关视频,可以再在 小程序学习路径课 中查看学习。

2.获取小程序ID

停留在刚才跳转到的小程序主页,点击左侧的 “开发” 功能,然后点击上方的 “开发设置” ,便可以在开发者ID页面获取到小程序ID。小程序的创建和开发均需要用到此ID,请妥善保存。

4-1-4 获取小程序ID

注:如果学员不慎关闭了上方的小程序主页,可以通过访问 小程序官网 ,完成登录操作后进入到上方的小程序主页。

3.下载微信开发者工具

(1)进入微信开发者工具 下载页面

4-1-5 微信开发者工具下载

根据学员的运行环境,选择适合的软件版本进行下载。第一次进行小程序开发,建议选择 稳定版 进行下载。

(2)打开下载好的微信开发者工具安装软件,根据提示信息进行软件安装。

注:建议使用纯英文目录作为微信开发者工具的安装目录。

完成微信开发者工具的下载和安装后,便可以创建小程序项目。

4.创建小程序项目

(1)打开微信开发者工具

(2)扫码登录微信账号

注:登录的微信账号应与注册小程序时绑定的微信账号保持一致。

(3)选择 “新建项目” ,创建一个名称“nlp_demo”的小程序项目

4-1-6 新建一个小程序项目

(4)填写项目信息(项目名称、项目目录、APPID、开发模式),后端服务选择 “小程序·云开发” :

4-1-7 填写项目信息

(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版本。

4-1-8 Node.js下载页面

下载完成后双击安装软件即可安装。

注:安装 Node.js,是因为本地开发调试时需要用到。在微信中运行的小程序,环境在云端构建,无需开发者手动配置。

6.引入Vant组件。

这一步将会引入Vant组件,借助此组件,学员可以快速实现小程序界面的搭建。

引入Vant组件一共分为5步操作:

  • 终端打开项目
  • 构建package.json
  • npm安装Vant组件
  • 小程序中构建npm
  • 小程序开启 “使用npm模块”

下面会对详细的操作步骤进行介绍。

(1)在小程序中选择miniprogram目录,右键选择 “在终端中打开” :

4-1-8 在终端中打开

(2)构建package.json

引入Vant前需要先构建package.json文件,执行命令:

npm init -y

可以完成初始化操作,接下来便可以引入Vant组件。

(3)引入Vant组件。

在终端中执行下方命令,便可以引入Vant组件,引入命令如下:

npm i @vant/weapp -S --production

输入上方的命令并按下回车,等待组件安装完成,即可实现Vant组件的引入操作。

(4)进入小程序开发者工具,在项目中点击 “工具” 菜单,选择 “构建npm” ,完成npm项目构建:

4-1-9 构建npm

注:此时miniprogram目录中可能包含两个引入Vant组件的目录,保留其中的miniprogram_npm目录即可,如果项目中还包含node_modules目录,可以直接将其删除。

(5)在 “详情 - 本地设置” 中,勾选 “使用 npm 模块”

4-1-10 勾选使用npm模块

至此Vant组件已经成功引入,并可以在小程序中直接使用。

附:关于Vant组件的更多介绍,可以参考Vant组件小程序版 开发指南

7.云开发环境配置

如果是首次使用小程序·云开发,需要先开通小程序的云开发功能。关于云开发的介绍和具体的开通步骤,可以参考视频 云开发项目-云开发环境开通

注:如果已经完成云开发环境的开通,可以跳过此步的操作。

开通小程序·云开发后,便可点击上方的 “云开发” 按钮,进入云开发控制台:

4-1-11 打开云开发控制台

至此小程序项目初始环境的配置已经完成,接下来便可以开始在小程序中实现具体的功能。