微信小程序简单入门2

╰+攻爆jí腚メ 2022-01-05 13:03 258阅读 0赞

底部tab

"tabBar": \{  
"list": \[\{  
"pagePath": "pages/lists/lists",  
"text": "首页",  
"iconPath":"images/1.png",//默认图片路径  
"selectedIconPath":"images/2.png"//点击时图片路径  
\},  
\{  
"pagePath": "pages/aboutme/aboutme",  
"text": "关于我们",  
"iconPath":"images/3.png",  
"selectedIconPath":"images/4.png"  
\}  
\]  
\}

最多有五个tab;

在app.jsop里面进行页面注册

\{  
"pages":\[  
"pages/obtume/obtume",  
"pages/index/index",  
"pages/logs/logs"  
\],

然后进行编译页面就出来了

2，替换数据

把页面里面的数据换成非固定的

初始化数据

初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。

示例：

<view>\{ \{text\}\}</view>  
<view>\{ \{array\[0\].msg\}\}</view>

Page(\{  
data: \{  
text: 'init data',  
array: \[\{msg: '1'\}, \{msg: '2'\}\]  
\}  
\})

.js文件更改

var app = getApp()  
Page(\{  
data: \{  
img: '../../images/logo.png',  
title: "千峰科技有限公司",  
intro:"驻马店位于河南中南部北接漯河南临信阳地处淮河上游",  
contab:"联系方式",  
address:"北京昌平区老牛湾10号",  
mobile:"0755-23729769",  
email:"weiphp@weiphp.cn"  
\},

.wxml更改

<view class="about">  
<view class="about-wei">  
<view class="about-img"><image src="\{ \{img\}\}" class="in-img" background-size="cover" model="scaleToFill"></image></view>  
<view class="about-title">\{ \{title\}\}</view>  
</view>  
<view class="about-content">\{ \{intro\}\}</view>  
  
<view class="about-addr">  
<view class="about-tab">\{ \{contab\}\}</view>  
<view>地址: \{ \{address\}\}</view>  
<view>联系电话：\{ \{mobile\}\}</view>  
<view>商务合作：\{ \{email\}\}</view>  
</view>  
</view>

然后刷新就OK了

3，再来一个列表页

转载于:https://www.cnblogs.com/wyfeng1/p/6028313.html