微信小程序分割字符串实现代码
关于微信小程序字符串，小编在前面两篇文章中做出了相应的介绍，但是还有人不太了解微信小程序分割字符串的相关内容，所以再来补充下。
目录下 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 modelcontroller 协同工作)
.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"
}123123
以上就是微信小程序分割字符串的实现代码，看完这串长长的小程序代码，会不会觉得实现小程序字符串分割很困难?想要获取更多相关资料请关注微信小程序素材网。
微信小程序字符串拼接操作步骤
微信小程序判断字符串怎么弄
微信小程序空格字符的处理方式
下一篇：微信小程序字符串拼接操作步骤