微信小程序（开发工具、项目创建）

红太狼 2023-06-12 11:21 10阅读 0赞

# 课程大纲 #

1.  账号申请
2.  后台小程序完善
3.  安装开发工具IDE
4.  小程序项目搭建
5.  项目翻译
6.  真机预览调试

## 开发前准备 ##

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。  
小程序开发前准备：

*  申请账号
 *  安装开发工具

#### 1.申请账号 ####

开发小程序之前需要先注册一个小程序账号，通过这个帐号你就可以管理你的小程序。  
账号申请：  
进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。  
网址：**https://mp.weixin.qq.com**

#### 2.小程序APPID ####

注册完毕后即可登录小程序后台  
**AppID**：  
在菜单 “开发”-“开发设置” 可以看到个人的小程序 AppID，这个在开发会用到，相当于微信小程序给开发人员的通行证。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]

## 小程序基本信息 ##

接下来设置小程序基本信息：  
小程序名称、简介、简称、头像、服务类目等

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

## 小程序开发工具 ##

编写小程序代码需要专门安装小程序开发工具，**下载版本**：Windows 64、Windows 32、macOS  
注意：**小程序开发工具兼容问题**  
需要注意的是小程序开发工具在 Windows上仅支持 Windows 7 及以上版，在 Mac 上支持 OS X 10.8 及以上版本

双击下载完成的安装文件，根据提示点击下一步，即可完成安装，安装成功后，可以在桌面或者开始菜单中找到小程序开发工具的快捷方式，打开即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]

## 开启小程序之旅 ##

接下来打开微信小程序开发工具，开始创建小程序项目，使用之前注册小程序所使用的微信扫码登录。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]

1.  项目名称，英文命名，避免中文及其他特殊符号开头
2.  目录下最后一级，最好改成项目名，方便后期管理浏览
3.  AppID在小程序后台的设置中查看
4.  后端服务选择不使用服务器
5.  选择完毕后点击创建，即可生成小程序项目

初次打开后一般都会自动编译预览，如果没有，则点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]

## 真机预览 ##

小程序开发工具提供了预览和真机测试两种途径来供开发人员在手机上浏览测试项目，俗称“真机测试/调试”  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191112184349736.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191112184206487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191112184955504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191112185027933.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191112185552986.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191112185913132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70