(三)定义app.js/app.json/app.wxss

本文介绍如何在小程序的app.js中定义全局变量来存储公共数据,并在其他js文件中使用这些变量。同时,还介绍了如何在app.json中进行页面跳转URL及底部菜单栏的配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在app.js中编写全局变量用来存储一些公共的数据

this.globalData = {
      host:'url',
      isLogin:false,
      userinfo:{},
      userData:{},
      openid:''
      }

在其他js中定义
const app = getApp()
app.globalData.userInfo = xxx -->赋值

在app.json中编写一些小程序的配置
pages–>跳转的url
tabBar底部菜单栏

app.wxss 编写全局样式

### 微信小程序个人页面的设计 #### 页面文件概述 在一个微信小程序项目中,创建一个新的页面通常涉及四个主要类型的文件:`.js`、`.json`、`.wxml` 和 `.wxss`。这些文件各自承担着不同的职责以共同构建起一个完整的用户交互界面。 #### JavaScript 文件 (.js) 此文件主要用于定义逻辑层的行为,包括但不限于初始化函数、生命周期回调以及其他业务处理流程。对于个人资料页而言,可能涉及到获取并展示用户的个人信息等内容[^1]。 ```javascript Page({ data: { userName: '张', avatarUrl: '/images/default-avatar.png' }, onLoad() { console.log('页面加载'); } }) ``` #### JSON 配置文件 (.json)配置项允许开发者设定诸如导航栏文字颜色等样式属性或是指定是否启用下拉刷新等功能特性。值得注意的是,单个页面级别的设置将会覆盖应用全局(`app.json`)里的同名参数值[^2]。 ```json { "navigationBarTitleText": "我的主页", "usingComponents": {} } ``` #### WXML 结构模板 (.wxml) 作为视图层描述语言的一部分,WXML 负责搭建页面布局框架并通过特定语法实现组件化开发模式下的元素嵌套关系表达;同时支持简单的条件渲染与循环列表生成机制[^3]。 ```html <view class="container"> <image src="{{avatarUrl}}" mode="aspectFill"></image> <text>{{userName}}</text> </view> ``` #### WXSS 样式表 (.wxss) 类似于传统网页前端技术栈中的 CSS 规则集,WXSS 提供了一种方式用于控制 HTML-like 组件外观表现形式及其尺寸定位等方面的信息。需要注意的是,尽管两者存在相似之处但也存在一定差异性。 ```css .container { display: flex; justify-content: center; align-items: center; } image { width: 80px; height: 80px; border-radius: 50%; } ``` 通过上述四类资源的有效组合运用,便能够成功打造出满足需求的功能模块——即具备基本显示效果和个人信息呈现能力的小程序“个人中心”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值