小程序教学一(工具介绍)
微信小程序是是一种不需要安装,就可以使用的应用。
小程序注册网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
小程序开发工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
下载安装后打开,首次需要用手机扫描二维码,在手机上进行确认登录
![](https://img.haomeiwen.com/i1727268/6eba1ebfaa693c30.png)
进入之后就是启动页了,上面为开发工具的版本号,下面为登录的用户,可以点切换账号进行切换,中间为你要创建的项目类型
![](https://img.haomeiwen.com/i1727268/dbe0204c7a333e52.png)
公众号项目界面
公众号网页项目点击打开后在上面输入网页的网址即可
![](https://img.haomeiwen.com/i1727268/95e4deef78684fbb.png)
最上面为要调试的网页地址
左侧为在手机端显示的效果,可以切换手机类型
右侧和网页调试工具一样,进行网页的调试
当然网页的代码编写还是需要自己用其他的工具来编写。
小程序项目界面
点选小程序项目需要看是创建还是打开原来的项目
首次打开小程序
![](https://img.haomeiwen.com/i1727268/db500709f8378b6f.png)
目前项目路径只能进行点选,不能手动输入路径
"建立普通快速启动模板"--创建小程序的基本结构
“建立插件快速启动模板”--用来开发小程序插件的
也可以不勾选,之创建一个配置文件
AppID为注册小程序的唯一标识符
登录公众号网址:https://mp.weixin.qq.com/
在“设置”->"开发设置"里面的“AppID(小程序ID)”就是AppID
![](https://img.haomeiwen.com/i1727268/6b1d85d1bb267f47.png)
项目名称就是你创建的项目名称了,注意最好是英文名称
已经存在小程序
如果你已经创建过小程序的话,那么下次打开左侧和原来一样,右侧多了创建过的项目
![](https://img.haomeiwen.com/i1727268/0a7e9a487799089a.png)
右下角的“➕”可以创建新的项目
管理项目点击勾选“删除”已经存在的项目,也可以点击后面的垃圾篓删除项目,还可以点击右下角“新建”,新建项目
![](https://img.haomeiwen.com/i1727268/4246e2ebc7de2d8e.png)
小程序窗口介绍
![](https://img.haomeiwen.com/i1727268/5cd7adea1fa9a7f3.png)
最上面为工具条界面,控制怎么小程序状态
左侧为模拟器界面,查看在手机界面上的效果,注意:在模拟器上查看的效果可能会与真机上有一些差距,所以建议最后在真机上在查看一遍效果
右侧上部为编写代码的界面和文档的目录结构
右侧下部为调试界面与浏览器的调试完全一样
工具栏介绍
工具条上的“模拟器”、“编辑器”、“调试器”分别控制模拟器界面是否显示,代码编辑界面是否显示,调试界面是否显示。
工具条上的“编译”按钮则是进行项目的编译,运行。
工具条上的“清缓存”按钮可以清空项目的一些授权等信息。
工具条上的“上传”按钮可以把项目提交到小程序后台,进行测试、发布等功能。
工具条上的“详情”按钮可以查看和配置项目的信息,
![](https://img.haomeiwen.com/i1727268/0b7412ed5c7bea0e.png)
模拟器界面介绍
模拟器界面的右上角可以切换不同设备的显示屏幕比例,方便发开者查看不同手机设备上的显示效果
![](https://img.haomeiwen.com/i1727268/650188099399f73a.png)
代码编写界面
这个界面左侧就是项目的文件目录,右侧就是进行代码编写的界面。
调试界面
因为小程序本身就是一个对网页进行封装的结构,所以小程序的调试界面与网页的调试界面时一样的
持续更新中...