根目录下 app.js
, app.json
, app.wxss
解释
2.1 app.js 小程序的逻辑
2.2 app.json小程序的公共设置
2.3 app.wxss 小程序的公共样式表
在app.json 配置个tab ( 类似于iOS tabbar)
{
"pages":[
// 文件所在目录结构
// index.js logs.js setup.js
"pages/index/index",
"pages/logs/logs",
"pages/setup/setup"
],
// 整个的window
"window":{
// 设置导航栏样式
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "夏小天",
"navigationBarTextStyle":"black"
},
// tabbar对象
"tabBar": {
"color": "#dddddd",
"selectedColor": "#1296db",
"borderStyle": "yellow",
"backgroundColor": "#ffffff",
// 这里是个 .js数组
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "pages/images/icon3.png",
"selectedIconPath": "pages/images/icon3.png"
},
{
"pagePath": "pages/logs/logs",
"text": "搜索",
"iconPath": "pages/images/icon1.png",
"selectedIconPath": "pages/images/icon1.png"
},
{
"pagePath": "pages/setup/setup",
"text": "设置",
"iconPath": "pages/images/icon2.png",
"selectedIconPath": "pages/images/icon2.png"
}]}
}
一个页面包含的文件结构包含四个文件 .js
文件.json
文件 .wxml
文件 wuss
文件(类似于想要布局出iOS中的一个界面需要view
model
controller
协同工作)
.js文件 功能类似于 iOS中
Controller
的作用 起到协同的作用, 也就是页面的逻辑
.json 页面配置 比如我想要配置一下logs界面的导航栏文字
.wxml 页面结构 (也就是有view btn等控件)
.wxss 页面样式表(可以配置页面控件的位置, 颜色, 圆角等等属性)
接下来用地图控件写一个简单界面
.js 进行网络请求, 解析数据, 重新赋值data
// 声明一个数组数组
var dataArray = new Array()
Page({
data: {
// 标注的数组, 这个markers最终会在 .wxml中直接被使用, 初始为空, 后面会通过setData方法对他进行赋值.
markers: [],
// 地图上控件数组
controls: [{
// id号 方便找到是哪个控件
id: 2000,
// 图片路径
iconPath: '/pages/images/tuijian.png',
// 相对于地图的位置
position: {
left: 375 - 120,
top: 50,
width: 100,
height: 40
},
// 是否可以点击
clickable: true
}]
},
// header: {'content-type': 'application/json'}
onLoad: function () {
var that = this
// 调用网络请求, 请求停车场数据
// list: [{ header: '今日热闻' }].concat(res.data.stories)
// 进行一个网络请求
wx.request({
url: '',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: { 'content-type': 'application/json' }, // 设置请求的 header
success: function(res){
// success
dataArray = res.data // 数据数组
var markers = new Array()
for (var i = 0; i < dataArray.length; i ++)
{
var dic = dataArray[i]
// console.log(dic.coordinateAmap) // 得到高德经纬度坐标点字符串
// 声明一个对象, 用于放置markers的一些参数, 就是iOS中类或者结构体
var info =
{
iconPath: "",
id: 0,
latitude: 31.237524,
longitude: 121.5128895,
width: 25,
height: 25,
name: ""
};
info.id = i
info.width = 25
info.height = 25
// 通过 , 号分割字符串
var arrLongLa = new Array()
arrLongLa = dic.coordinateAmap.split(",")
var longitude = arrLongLa[0]
var latitude = arrLongLa[1]
// 赋值相关信息
info.latitude = latitude
info.longitude = longitude
info.name = dic.address
// 状态判断
if (dic.status == "空")
{
info.iconPath = "/pages/images/markers_icon3.png"
}else if (dic.status == "忙") {
info.iconPath = "/pages/images/markers_icon1.png"
}else if (dic.status == "满") {
info.iconPath = "/pages/images/markers_icon2.png"
}else if (dic.status == "关") {
}else {
info.iconPath = "/pages/images/markers_icon5.png"
}
// 添加对象到数组
markers.push(info)
}
console.log(markers)
// 执行setData, 对markers进行赋值, 之后在 .wxml中引用
that.setData(
{markers: markers}
)
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
// 地图相关动作的几个方法
regionchange(e) {
console.log(e.type)
},
// markers的点击事件
markertap(e) {
// 点击相应的坐标点取出相应的信息
console.log(dataArray[e.markerId])
console.log(e.markerId)
},
// control的点击事件
controltap(e) {
console.log(e.controlId)
},
})
.json文件页面配置
{
"navigationBarTitleText": "logs"
}
.wxml文件 页面UI
<map id="map" longitude="121.5128895" latitude="31.237524" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 578px;">
</map>
.wxss 配置位置
这篇没有使用这个文件, 因为基于地图操作
今天这篇大致 布局了一个如下如所示的界面
Good! 工作流程不太明白的可以评论, 我能解答的 一定抽空回答!