实训第三天

建立相关文件夹与文件

app.json

{

"pages": [

"pages/index/index",

"pages/logs/logs",

"pages/aa/aa",

"pages/bb/bb",

"pages/mine/mine",

"pages/map/map"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#ddd",

"navigationBarTitleText": "一剑天涯",

"navigationBarTextStyle": "white",

"enablePullDownRefresh": true,

"backgroundColor": "#000000"

},

"tabBar": {

"color": "#000000",

"selectedColor": "#6A5ACD",

"list": [

{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath": "image/timg2.png",

"selectedIconPath": "image/timg.jpg"

},

{

"pagePath": "pages/map/map",

"text": "地图",

"iconPath": "image/aa.jpg",

"selectedIconPath": "image/aa2.jpg"

},

{

"pagePath": "pages/bb/bb",

"text": "购物车",

"iconPath": "image/buy1.png",

"selectedIconPath": "image/buy.jpg"

},

{

"pagePath": "pages/mine/mine",

"text": "我的",

"iconPath": "image/my1.jpg",

"selectedIconPath": "image/my2.png"

}

]

},

"sitemapLocation": "sitemap.json"

}

 

index.js

//index.js

//获取应用实例

const app = getApp()

 

Page({

data: {

ay:"你好",

name:"\名字：黑暗之魂3 全境封锁 古墓丽影\n 杀出重围:人类分裂 黑手党3",

flag:true,

imageurl:[{

url:"../../image/1.jpg"

}, {

url: "../../image/2.jpg"

}, {

url: "../../image/3.jpg"

}, {

url: "../../image/4.jpg"

}, {

url: "../../image/5.jpg"

},

],

obj:{

name:"华为mate20pro",

index:0,

price:5000,

},

index:"10"

},

ya:function(){

console.log(this.data.flag);

//更改属性

this.setData({

flag:!this.data.flag

})

},

onLoad: function () {

//获取手机信息

wx.getSystemInfo({

success: function (res) {

console.log(res)

},

})

}

})

 

index.wxml

<!--index.wxml-->

 

<swiper indicator-dots="true" indicator-color="#fff" indicator-active-color="#ff0000" autoplay="ture" circular="true" interval="5000" skip-hidden-item-layout="true">

<block wx:for="{{imageurl}}" wx:key="{{index}}">

<swiper-item>

<image src='{{item.url}}' style='width:100%;height:100%'></image>

</swiper-item>

</block>

</swiper>

<text id='{{id}}' wx:if="{{flag}}">{{ay}}</text>

<view class='name'><image src="../../image/name.jpg" style='width:87px;height:66px;' wx:if="{{!flag}}"></image></view>

<text wx:if="{{!flag}}">{{name}}</text>

<button bindtap='ya' style='width:30%'>点一点</button>

<view wx:for="{{imageurl}}" wx:key="{{i}}"

wx:for-index="i" wx:for-item="val">{{i}}{{val.url}}</view>

<template name="msgItem">

<view>

<text> {{index}}: {{msg}} </text>

<text> Time: {{time}} </text>

</view>

</template>

<text wx:if="{{index==10 ? true : false}}">序号 手机型号 价格</text>

<!--定义模板-->

<template name="model">

<view>

{{index}} {{name}}

<text>{{price}}</text>

</view>

</template>

<!--引用模板-->

<template is="model" data="{{...obj}}"></template>

<!--导入模板-->

<import src="../aa/aa.wxml"/>

<template is="aa" data="{{...obj}}"/>

 

index.wxss

/**index.wxss**/

.name{

display:flex;

justify-content: center;

 

}

在map.js中以下类加入

data: {

longitude:0,

latitude:0,

windowHeight: 0

},

onReady: function () {

console.log(this)

},

onShow: function () {

var _this = this;

wx.getLocation({

success: function(res) {

console.log(res)

_this.setData({

longitude: res.longitude,

latitude: res.latitude

})

}

})

wx.getSystemInfo({

success: function (res) {

console.log(res)

_this.setData({

windowHeight: res.windowHeight

})

},

})

},

 

map.wxml

<!--pages/map/map.wxml-->

<view >

<map longitude='{{longitude}}' latitude='{{latitude}}'

scale='14' style='width:100%;height:{{ windowHeight}}px'show-location="true"></map>

</view>

 

mine.js中改变

 

data: {

model:"",

system:"",

windowHeight:0 ,

windowWidth: 0

},

onLoad: function (options) {

console.log(this)

},

onReady: function () {

var _this = this;

wx.getSystemInfo({

success: function (res) {

console.log(res)

_this.setData({

model: res.model,

system: res.system,

windowHeight: res.windowHeight,

windowWidth: res.windowWidth

})

},

})

},

 

mine.wxml

<!--pages/mine/mine.wxml-->

<text>手机型号{{model}}\n</text>

<text>手机系统{{system}}\n</text>

<text>手机高度{{windowHeight}}px\n</text>

<text>手机宽度{{windowWidth}}px</text>