| 微信小程序 | 您所在的位置：网站首页 › 微信小程序资源文件在哪 › 微信小程序 |
微信小程序
|
一、文件类型介绍
新建微信小程序后会默认生成一些文件，文件类型分为四种：xxx.js、xxx.json、xxx.wxml、xxx.wxss 文件类型描述.js文件存放逻辑方法的地方；页面的生命周期、App的声明周期都在这个文件中.json文件配置文件.wxml页面布局文件.wxss用于控制wxml文件视图的样式二、文件介绍 1、App相关文件 新建项目后，会默认生成app.js、app.json、app.wxss三个文件： app.js中包含小程序的生命周期函数 App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { }, /** * 当小程序启动，或从后台进入前台显示，会触发 onShow */ onShow: function (options) { }, /** * 当小程序从前台进入后台，会触发 onHide */ onHide: function () { }, /** * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 */ onError: function (msg) { } })app.wxss 中主要用于全局样式的设置 /*全局公共样式*/ page { height: 100%; }app.json 中主要用于全局配置 { "pages": [ "pages/homePage" ], "window": { "navigationBarBackgroundColor": "#f0f", "navigationBarTextStyle": "white", "navigationBarTitleText": "home" } }pages：页面注册列表，左右的页面都会在这里注册 navigationBarBackgroundColor：导航栏背景颜色 navigationBarTextStyle：状态栏和导航栏文字颜色
navigationBarTitleText：标题文案 2、页面page相关文件新建一个page，名字叫homePage，IDE会自动帮我们新建四个文件，分别是：homePage.js、homePage.json、homePage.wxml、homePage.wxss
写一个简单的页面，最终效果如下： homePage.wxml 中布局代码 lxy hello worldhomePage.wxss 中样式代码 /* pages/homePage.wxss */ .homeView{ display: flex; flex-direction: column; align-items: center; background-color: #f0f; height: 100%; } .headerImageView { width: 200rpx; height: 200rpx; border-radius: 50%; margin: 100rpx 0rpx; } .nameTeatView{ font-size: 32rpx; margin: 100rpx 0; } .helloView{ width: 300rpx; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 28rpx; border: 1rpx solid #333; border-radius :10rpx; }注意：rpx单位，它是动态的，会根据设备屏幕的大小变化而变化 此时页面的样式
特殊处理：由于页面的主视图是自动伸展的，所以无法全屏设置背景色 查看控制台：
发现主视图的父视图是page，所以可以通过设置配置的大小来控制子视图的大小，此时用到全局样式设置，在app.wxss中设置page的样式，代码如下： /*全局公共样式*/ page { height: 100%; }此时，页面注释图的大小就是页面的大小了 |
【本文地址】
公司简介
联系我们