创建第一个微信小程序——简明教程(四)

 

在之前的章节中小程序代码结构——简明教程(二)我们说到微信小程序至少有两个文件,一个是app.js文件,另外一个是app.json文件。app.js文件是帮我注册微信小程序的文件。app.json文件是小程序的一些全局配置。

一、app.js

在创建一个小程序的时候,我们的目录是一个空的目录。所以首先要去创建一个app.js文件。app.js是怎么帮我们去注册微信小程序的呢?其实app.js是需要调用一个APP函数,APP函数里面需要传入一个参数,这个参数是一个object类型的参数,在这函数里面我们主要是传入一些生命周期钩子和一些事件处理函数和全局的一些数据。本例中我们要创建一个helloworld小程序,所以先传入空的参数。

APP({})

二、app.json

然后我们开始创建app.json文件,在app.json文件我们需要注册微信小程序所有页面的路径。我们通过pages属性来注册。这里我们通过pages属性类注册,它是一个list数组类型的值,里面是小程序的所有页面的页面路径。要页面路径首先我们要有页面。接下来是创建页面。

例如:

{
	"pages":[
		"pages/helloworld/helloworld"
	]
}

三、创建页面

我们之前说过,创建一个微信小程序的页面需要四个文件,这四个文件都是放到同一个文件夹里面,这四个文件都是文件名相同,文件格式不同,分别是js文件,json文件,wxml文件和wxss文件。这个文件夹的名称就是这个页面的名称。为了好管理页面,我们还需创建一个pages文件夹,用来放置所有页面。所以刚刚创建的helloworld文件夹也可以放到pages文件夹里面去。

回到上面的app.json配置文件,我们就可以填写页面的路径了。

创建helloworld.wxml文件:

<view>hello world</view>

image-20200120145502239

具体的样式可以在helloworld.wxss文件中去设置,这里使用的是<view></view>标签,所以直接使用view{ }来设置样式样式就好。

四、关于单位

设置wxss文件的时候最好就是使用rpx单位,因为rpx是一个响应式的屏幕像素,

上面就是一个微信小程序hello world的小程序创建和项目的编写。

推荐阅读:

本文为博主原创文章,知识共享,开源精神,转载注明出处。