效果

app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#ffd1b3",
"navigationBarTitleText": "我的小程序",
"navigationBarTextStyle":"black",
"enablePullDownRefresh": true
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
index.js
const app = getApp()
Page({
data: {
key: "hellow world",
id: "number",
flag: false,
num1: 2,
num2: 3,
show: false,
array:[
{message:'qi'},
{message:'chao'},
{message:'fan'}
],
item1:{
city: "北京",
encode: '100000'
},
item2:{
city: "上海",
encode: '200000'
},
content:[
{"name":"蛰雪华", "phone":"153059154774"},
{"name":"里希冯","phone":"13214265505"}
]
},
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
wx.getUserProfile({
desc: '展示用户信息',
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
index.wxml
<view class="container">
{{key}}
</view>
<view id="item-{{id}}">
hello
</view>
<view hidden="{{flag?true:false}}">
隐藏
</view>
<view>
{{num1 + num2}}
</view>
<view>
{{"hello" + key}}
</view>
<view wx:if="{{show}}">
show
</view>
<view wx:else>
hidden
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}} : {{itemName.message}}
</view>
<template name="tempName">
<view>
<text>城市:{{city}}`</text>
<text>邮编:{{encode}}</text>
</view>
</template>
<template is="tempName" data="{{...item1}}"/>
<template is="tempName" data="{{...item2}}"/>
<block wx:for="{{content}}" wx:key="{{index}}">
<view class="content">
<view class="name">
姓名:{{item.name}}
</view>
<view class="phone">
手机号:{{item.phone}}
</view>
</view>
</block>
index.wxss
.container{
text-align: center;
background: blue;
padding: 0;
}
#item-number{
background: orange;
padding: 10px 30px;
text-align: center;
}
.content{
width: 100%;
padding: 10px 20px;
border-radius: 1px solid lightgray;
}
.content .name{
color: blue;
font-size: 17px;
}
.content .phone{
color: red;
font-size: 14px;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!