- 介绍微信开发者工具它的一些功能之后,我们一起来动手开发一个Helloworld的小程序
-
可以看到我们代码编辑区这里
image.png
- 有一个project.config.json文件,这个文件是开发者工具,自动帮我们项目生成的,一个开发者工具的配置文件,这个配置文件主要是保存了我们对开发者工具的一些个性化设置,那么我们前面讲到,我们目录结构的时候,我们有提到一个微信小程序应用,它至少要有两个文件,一个是我们的app.js和我们app.json文件,
- app.js是帮我们 去注册一个微信小程序的应用,
- app.json是对我们微信小程序应用的一个全局配置,那么我们先来创建一个app.js文件
image.png
image.png
image.png
那么这个文件是怎么去帮我们去注册一个微信小程序的应用,我们需要去调用一个APP函数,这个APP函数里面,我们可以看到我们需要去传入一个参数,这个参数是一个Object类型的一个参数,我们主要可以传入一些生命周期钩子,和我们一些事件处理函数以及我们全局的一个数据,在这里我们可以,先传入一个空的类型参数
image.png
-
然后我们需要去创建一个app.json文件,在app.json文件我们需要去注册我们微信小程序所有页面的一个路径,我们通过配置的属性来注册,它的值是一个list类型的
image.png
-
这个list里面是我们所有页面的一个页面路径,那么我们要写一个Helloworld,必须至少要有一个页面,所以说我们需要去创建一个Helloworld的页面
image.png
- 那么我们前面说过,我们要创建一个微信小程序的页面,我们需要有四个文件,分别是:js文件, json文件, wxml文件和我们的wxss文件
- 这里我们创建一个helloworld.wxml文件,wxml文件就是描述我们页面上要有哪些内容.这里我们可以写一个简单的helloworld,我们可以通过view标签来写,view标签我们在后面讲我们小程序的框架的时候和组件的时候我们会提到.
image.png
image.png
- 我们再来创建一个helloworld.js文件,那么helloworld.js文件是帮助我们去注册一个微信小程序的页面,它类似于我们app.js一样,它是通过一个配置函数去帮我们注册的,这个配置函数也需要去传入一个参数,这个参数的类型也是object类型,我们可以在这个参数,传入我们的一些页面的生命周期钩子和我们事件处理函数以及我们页面的一些默认数据等等,我们可以暂时先传入一个空的对象参数
image.png
- 我们再来创建一个helloworld.json文件,这个helloworld.json文件是我们helloworld的页面的一些配置,这里我们至少要传入一个空的配置对象
image.png
- 我们再来创建一个helloworld.wxss文件,这个文件用来描述,我们小程序页面的一个样式,那么我们helloworld页面就算是创建完成了,这里我们可以看到
image.png
-
这四个文件我们需要保持他们的命名一致,然后我们在我们的app.json文件,我们去注册我们刚刚创建的Helloworld,这个页面的路径,因为我们这个helloworld页面是在我们的根目录下,所以我们就填入,它们这个根目录里面对应的文件路径,我们保存之后(Ctrl+S)
image.png
-
可以看到在开发者工具编译之后.我们模拟器上显示了一个helloworld,我们刚刚写的helloworld的一个页面,但是大家可以思考一下,,如果我们的页面过多,我们都放在根目录下,会不会显得杂乱无章,这里我们建议是要有一个专门去管理微信小程序页面的文件夹,因为这个微信开发者工具,它的这个编译器,不太符合我的使用习惯,所以说我就在我们的外面去,创建它们这样的一个文件目录,首先我们来创建一个pages文件目录,然后我们再来创建一个Helloworld这个页面的目录,这个目录是管理我们这个页面对应的四个代码文件
image.png
image.png
image.png
我们将它拖入到我们的helloworld这个目录下,然后我们再把我们这个helloworld的页面目录,拖到我们的pages目录下
image.png
我们可以看到,在我们的文件路径更改后,其实开发者工具它会在自动地去编译一次,编译之后我们可以看到,控制台报出了一个,没有找到我们app.json中定义的这个helloworld的页面对应的wxml文件,那么我们需要重新去配置一下 我们helloworld的页面对应的路径,这里我们先把他们这些窗口关闭掉
image.png
image.png
- 在我们输入完之后我们点击保存之后,我们可以看到我们开发者工具左侧的模拟器中,已经出现我们刚刚的helloworld的页面,这样看起来我们的代码结构是不是很清晰明了.,那么我们一般helloworld这样显示,大家肯定都会觉得不太好看,我们可以把它调成居中显示,
- 我们刚刚在wxml文件中用到来view标签,那么我们在wxss就对这个view标签进行一个样式定义
- 我们可以给它分配占满我们屏幕的宽度,设置成百分之百,然后我们给它一个高度,我们给它来一个40rpx的高度,这个rpx和我们平常看到的px是不太一样的.,rpx它指的是我们的一个响应式的一个屏幕像素,然后我们在设置完它的宽度之后,我们需要把我们的这个元素居中显示,我们可以通过text-align这个属性,让它居中显示,然后我们点击保存
image.png
- 大家可以看到我们的helloworld已经在我们的页面上居中显示了,上面就是我们一个简单的helloworld小程序的项目创建.以及我们代码的编写
- 后面会介绍我们微信小程序的一个完整的开发框架,以及我们微信小程序有哪些丰富的组件和API
网友评论