微信小程序微信小程序开发者小程序开发技术知识

小程序教学一(工具介绍)

2018-05-20  本文已影响16人  遛遛食

微信小程序是是一种不需要安装,就可以使用的应用。
小程序注册网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1

小程序开发工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载安装后打开,首次需要用手机扫描二维码,在手机上进行确认登录


扫码登录

进入之后就是启动页了,上面为开发工具的版本号,下面为登录的用户,可以点切换账号进行切换,中间为你要创建的项目类型


启动页

公众号项目界面

公众号网页项目点击打开后在上面输入网页的网址即可


网页调试

最上面为要调试的网页地址
左侧为在手机端显示的效果,可以切换手机类型
右侧和网页调试工具一样,进行网页的调试
当然网页的代码编写还是需要自己用其他的工具来编写。

小程序项目界面

点选小程序项目需要看是创建还是打开原来的项目

首次打开小程序

小程序项目创建

目前项目路径只能进行点选,不能手动输入路径
"建立普通快速启动模板"--创建小程序的基本结构
“建立插件快速启动模板”--用来开发小程序插件的
也可以不勾选,之创建一个配置文件

AppID为注册小程序的唯一标识符
登录公众号网址:https://mp.weixin.qq.com/
在“设置”->"开发设置"里面的“AppID(小程序ID)”就是AppID

AppID查看地址
项目名称就是你创建的项目名称了,注意最好是英文名称

已经存在小程序

如果你已经创建过小程序的话,那么下次打开左侧和原来一样,右侧多了创建过的项目


选择项目

右下角的“➕”可以创建新的项目
管理项目点击勾选“删除”已经存在的项目,也可以点击后面的垃圾篓删除项目,还可以点击右下角“新建”,新建项目


管理项目界面

小程序窗口介绍

小程序窗口
最上面为工具条界面,控制怎么小程序状态
左侧为模拟器界面,查看在手机界面上的效果,注意:在模拟器上查看的效果可能会与真机上有一些差距,所以建议最后在真机上在查看一遍效果
右侧上部为编写代码的界面和文档的目录结构
右侧下部为调试界面与浏览器的调试完全一样

工具栏介绍

工具条上的“模拟器”、“编辑器”、“调试器”分别控制模拟器界面是否显示,代码编辑界面是否显示,调试界面是否显示。
工具条上的“编译”按钮则是进行项目的编译,运行。
工具条上的“清缓存”按钮可以清空项目的一些授权等信息。
工具条上的“上传”按钮可以把项目提交到小程序后台,进行测试、发布等功能。
工具条上的“详情”按钮可以查看和配置项目的信息,


详情页

模拟器界面介绍

模拟器界面的右上角可以切换不同设备的显示屏幕比例,方便发开者查看不同手机设备上的显示效果


显示选择

代码编写界面

这个界面左侧就是项目的文件目录,右侧就是进行代码编写的界面。

调试界面

因为小程序本身就是一个对网页进行封装的结构,所以小程序的调试界面与网页的调试界面时一样的

持续更新中...

上一篇 下一篇

猜你喜欢

热点阅读