收藏
评论

微信开发者工具三大核心功能官方


首先,我介绍一下微信开发者工具的核心功能。大家和我一起打开微信开发者工具,先微信扫码,扫码后进入了这样一个界面。接着,可以点击侧边栏的小程序,可以看到本地的小程序项目。

今天会给大家演示从零开始创建一个小程序,大概会做成如下图所示,会带大家手把手写一个这样的小程序,当点赞时会有“点赞成功”的效果,很简单的一个小程序。

那么,小程序要怎么创建,就是点这个+号。

进入创建页面,下滑可以看到各种各样的模板,大家可以复制模板后再进行改写。这里的模板分为两种类型,一种是含有微信云开发的,一种是不含微信云开发的。默认情况下都是带有微信云开发,它会有比较强的功能,比如数据存储等。微信云开发的简单介绍可以看下本专题课程的最后一节

今天会给大家简单演示两个跟学生生活贴近的小程序,一个是活动报名。大家可以扫描这个二维码进入体验版,在手机体验该小程序的实际运行效果和功能。

我们先创建一个不使用云开发的模板,选择“JavaScript基础模板”,选“不使用云服务”。AppID这里点击下拉菜单,已经注册过的小程序AppID会出现在此处,可进行选择。若未注册过小程序,可点击选择“测试号”。

随后点击“确定”,即可看到小程序最基础的一个界面。

接下来,会简单介绍微信开发者工具这几个界面到底用于做什么的。

首先,大家可以看到,最左边这个是模拟器,它可以让你在本地就可以看到小程序在手机上运行的效果,是可以相对直观地显示小程序的真实效果,代码改了什么,会直接反馈到这个模拟器上。它是微信开发者工具最主要的功能。在模拟器的顶部左上角,可以切换常用机型,比如iPhone 12Pro等。这个功能一般用于机型兼容问题,大部分情况大家保持默认即可。

右侧这一块是编辑器区域,顾名思义,是IDE的最核心部分,用于写代码。后续课程会介绍一下目录里这些文件是干什么的。编辑器支持代码的增删改查,适应小程序的开发语法,还可以做到代码的自动补全,让你的代码编写更加方便。

最后一块比较复杂的是调试器,这块是作为比较深入、比较难的课程内容,不会深入讲。今天课程内容主要是围绕模拟器和编辑器。

调试器有几个比较重要的面板。

Wxml,主要用来查看小程序的节点数,节点树就是每个小程序都有不同的界面,这些界面都在一棵节点树排列而成的。

Console,用于查看代码运行日志,在别的IDE里也有。

Storage,可以看到微信的内置存储,存储信息。

Network,用来看小程序发的一些网络请求,比如请求后台的一条接口,要看它请求过来的数据是否正确时,可以通过该面板进行查看。

AppData,用来查看当前页面的data数据,小程序每个页面都会有相应数据,可以通过该面板来查看当前页面的data数据。

微信开发者工具里每个布局都是可以按住进行拖拽的,可根据自身需求进行边界调整。也可以通过这几个按钮开关来选择是否隐藏调试器、编辑器、模拟器。

接下来,我们要怎么写出一个小程序界面。大家可以看到这个界面含有的元素,是一个头像、一个文案。点开pages→index→index.wxml,在这里大家可以看到整个小程序的布局。wxml的布局是可以通过布局树进行查看,wxml是用来描述小程序节点树的语言,跟前端html是类似的。

js文件主要用于设计小程序的执行逻辑,比如点一个按钮应该触发什么样的逻辑,是出现弹窗还是跳到哪个页面等。这些逻辑是需要我们到js文件里面去写的。

wxss用来写小程序的样式,描述页面中有哪些元素、每个元素的位置、每个元素的颜色等,跟前端css是类似的。

json文件,小程序比较关键的文件,用来描述小程序页面全局信息。

此处大家主要了解.js文件、.wxml文件、.wxss文件这三个文件即可。

因为小程序是有界面的,所以除了js文件外,还需要其他两种语言来描述它的界面。如果不写js文件也是可以的,可以写一个小程序界面,但没有任何执行逻辑,无法实现跳转、弹窗等功能。如果只写js文件,不想写wxml文件和wxss文件的话,就会变成一个没有界面的小程序,可以弹窗、跳转,但没有界面。所以这三种文件是相辅相成的,你要开发一个小程序,最少是需要这三种文件的配合,才可以写出一个能交互的小程序。

微信开发者社区有小程序框架、语法参考等相关文档,可点击进行查看

最后一次编辑于  2022-10-09
赞 1
收藏
登录 后发表内容
课程标签