/**index.wxss**/ page { background: #f6f6f6; display: flex; flex-direction: column; justify-content: center; } .userinfo, .uploader, .tunnel { margin-top: 40rpx; height: 140rpx; width: 100%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-left: none; border-right: none; display: flex; flex-direction: row; align-items: center; transition: all 300ms ease; } .userinfo-avatar { width: 100rpx; height: 100rpx; margin: 20rpx; border-radius: 50%; background-size: cover; background-color: white; } .userinfo-avatar:after { border: none; } .userinfo-nickname { font-size: 32rpx; color: #007aff; background-color: white; background-size: cover; } .userinfo-nickname::after { border: none; } .uploader, .tunnel { height: auto; padding: 0 0 0 40rpx; flex-direction: column; align-items: flex-start; box-sizing: border-box; } .uploader-text, .tunnel-text { width: 100%; line-height: 52px; font-size: 34rpx; color: #007aff; } .uploader-container { width: 100%; height: 400rpx; padding: 20rpx 20rpx 20rpx 0; display: flex; align-content: center; justify-content: center; box-sizing: border-box; border-top: 1px solid rgba(0, 0, 0, 0.1); } .uploader-image { width: 100%; height: 360rpx; } .tunnel { padding: 0 0 0 40rpx; } .tunnel-text { position: relative; color: #222; display: flex; flex-direction: row; align-content: center; justify-content: space-between; box-sizing: border-box; border-top: 1px solid rgba(0, 0, 0, 0.1); } .tunnel-text:first-child { border-top: none; } .tunnel-switch { position: absolute; right: 20rpx; top: -2rpx; } .disable { color: #888; } .service { position: fixed; right: 40rpx; bottom: 40rpx; width: 140rpx; height: 140rpx; border-radius: 50%; background: linear-gradient(#007aff, #0063ce); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); display: flex; align-content: center; justify-content: center; transition: all 300ms ease; } .service-button { position: absolute; top: 40rpx; } .service:active { box-shadow: none; } .request-text { padding: 20rpx 0; font-size: 24rpx; line-height: 36rpx; word-break: break-all; } .text-title{ margin-top: 50%; } .text-title text{ font-size: 96rpx; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; }
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json 是页面的配置文件：
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
{ "pages": [ "pages/index/index", "pages/userConsole/userConsole", "pages/storageConsole/storageConsole", "pages/databaseGuide/databaseGuide", "pages/addFunction/addFunction", "pages/deployFunctions/deployFunctions", "pages/chooseLib/chooseLib" ], "window": { "backgroundColor": "#F6F6F6", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#F6F6F6", "navigationBarTitleText": "jackson影琪", "navigationBarTextStyle": "black" } }
运行结果如下：
手机预览
开发者工具上侧菜单栏，点击"预览"，扫码后即可在微信客户端中体验。
