微信小程序之helloWord

深藏阁楼爱情的钟 2022-05-12 10:26 171阅读 0赞

当我们不使用模板生成一个项目，项目里只有project.config.json文件，这个文件是帮助我们配置项目的信息，实现一些个性化配置  
一个微信小程序应用必须包含两个文件，一个是app.js文件，一个是app.json文件 （一般包括四个：app.js。app.json，wxml文件，wxss文件）  
app.js是帮助我们去注册一个微信小程序的应用  
app.json是对微信小程序应用的饿一个全局配置  
helloword.wxml： 描述网页的内容  
helloworld.wxss: 鸟叔网页的样式  
先来创建app.js  
那这个文件是怎么帮助我们去注册一个微信小程序的应用呢？  
我们需要调用一个APP函数  
在这个函数中我们需要传入一个对象，在这个参数里面我们主要可以传入一些生命周期钩子和一些事件处理函数以及我们全局的一个数据  
在app.json文件，我们需要去注册我们微信小程序所有页面的一个路径，我么通过配置的属性来注册，它的值是一个list类型的，这个list是我们所有页面的一个页面路径  
helloword.js文件是帮助我们去注册一个微信小程序的页面，它类似于app.js，通过一个配置函数去帮我们注册的，要去传入一个参数，参数也是object类型，我们可以在这个参数传入我们一些页面的生命周期钩子和数据处理函数，以及我们页面的一些默认数据等等  
helloword.json文件是我们HelloWord页面的一些配置，这里至少要传入一个空的配置对象  
helloword.wxss: 描述我们小程序的一个样式  
如此helloword页面就算创建完成了  
helloworld.js  
helloworld.json  
helloworld.wxml  
helloworld.wxss  
这四个文件我们必须保持它们的命名一致  
然后我们在app.json文件注册一个helloworld的页面路径就可以了  
保存之后，可以看到在开发者工具编译之后，模拟器上显示了helloworld页面  
![这里写图片描述][70]  
当然这是最简单的开发，如果后续页面太多，不能都放在根目录，要设置一个专门管理小程序页面的文件夹  
![这里写图片描述][70 1]  
改成这个样子就很明了了

我们在wxss中修改样式

view {
      width: 100%;
      height: 40rpx;
      text-align: center;
    }
    // rpx 响应式的屏幕像素

![这里写图片描述][70 2]  
ok ,最简单的helloworld就完成了。

[70]: /images/20220512/b4ce60ae637046fe98c4579d0d200624.png
[70 1]: /images/20220512/df81a48b8dc043e9a59fc59791ab32d6.png
[70 2]: /images/20220512/1e22171f287c422585c7fb7388027b35.png