微信小程序简单入门2

底部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，再来一个列表页