今天唠唠第一个写的微信小程序~
我是用微信开发者工具开发的一个简单小程序,结构也很简单,app.json文件中pages声明的是每个页面,按顺序,显示是index,index就在第一个声明
"pages": [
"pages/index/index",
"pages/dispute/dispute",
"pages/logs/logs",
"pages/handle/handle"
],
windows是写小程序展示样式和内容,如图:
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "首页",
"navigationBarTextStyle": "black",
"backgroundColor": "#eff2f8"
},
toobar底部tab
"tabBar": {
"color": "#333",
"selectedColor": "#3051be",
"backgroundColor": "#fff",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/tab_home_n.png",
"selectedIconPath": "images/tab_home_s.png"
},
{
"pagePath": "pages/index/index",
"text": "消息",
"iconPath": "images/tab_message_n.png",
"selectedIconPath": "images/tab_message_s.png"
},
{
"pagePath": "pages/index/index",
"text": "我的",
"iconPath": "images/tab_me_n.png",
"selectedIconPath": "images/tab_me_s.png"
}
]
},
如图:
引入地图
接下来说说地图的引入,一开始想的麻烦,使用组件写,不仅不能满足需求,还出现bug
先看效果图:
确定后显示:
布局代码很简单:
<view class="applicant-left pull-left">纠纷地点</view>
<view class="input-box pull-left" bindtap="handleAddressClick">
{{address}}
</view>
js文件中:
//先定义
var QQMapWX = require('../../qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data: {
address: ""
}
)}
handleAddressClick() {
wx.chooseLocation({
success: this.handleChooseLocationSucc.bind(this)
})
},
handleChooseLocationSucc(res) {
this.setData({
address: res.address
})
},
onLoad: function(options) {
if (options.address != null && options.address != '') {
//设置变量 address 的值
this.setData({
address: options.address
});
} else {
// 实例化API核心类
qqmapsdk = new QQMapWX({
//此key需要用户自己申请
key: 'RBFBZ-U25WU-XJWVA-24PP3-OYZYT-PDFFB'
});
var that = this;
// 调用接口
qqmapsdk.reverseGeocoder({
success: function(res) {
console.log(res.result.address);
that.setData({
address: res.result.address,
// activity_location: res.result.address,
// activity_lat: res.result.address
});
console.log(that.data.address);
},
fail: function(res) {
console.log(res);
},
complete: function(res) {
console.log(res);
}
});
};
},
上传图片
点击上传按钮,可以上传多张,上传后可以删除,效果:
布局:
<view class='picture-count'>
<view wx:for="{{picarrayDentify}}" wx:key="{{index}}" class='photo-style pull-left'>
<view class='iconfont icon-cancel delete-icon' bindtap='deleteDentifyList' data-id='{{index}}'></view>
<image src="{{item}}" mode="aspecFill" class='choose-picture-style' />
</view>
</view>
<button class="uploading-pic pull-left" bindtap='chooseDentifyimage'>
<view class="iconfont icon-add evidence-add-icon"></view>
</button>
在开始不要忘记定义数组picarrayDentify
chooseDentifyimage方法:
chooseDentifyimage: function() {
var _this = this;
wx.chooseImage({
counts: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
let arr = _this.data.picarrayDentify;
console.log(arr)
arr.push(res.tempFilePaths);
console.log(arr)
_this.setData({
picarrayDentify: arr
})
},
})
},
deleteDentifyList删除方法:
deleteDentifyList: function(e) {
var index = e.currentTarget.dataset['id'];
console.log(e.currentTarget.dataset)
var picarrayDentify = this.data.picarrayDentify;
picarrayDentify.splice(index, 1);
console.log(picarrayDentify)
this.setData({
picarrayDentify: picarrayDentify,
})
},
tab切换
这里是两个button点击切换,内容也切换;
<view class="select-button clearfix">
<button class="button-select {{back?'button-select-after':'button-select-before'}} pull-left" data-current="0" bindtap="switchNav" bindicator-dots="{{indicatorDots}}">予以受理</button>
<button class="button-select pull-right {{back?'button-select-before':'button-select-after'}} " data-current="1" bindtap="switchNav" bindicator-dots="{{indicatorDots}}">不予受理</button>
</view>
indicatorDots开始声明为true
switchNav方法:
switchNav: function(e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
//重复点击不予处理
return false;
} else
if (e.target.dataset.current == 1) {
that.setData({
currentTab: e.target.dataset.current,
back: false
})
} else if (e.target.dataset.current == 0) {
that.setData({
currentTab: e.target.dataset.current,
back: true
})
}
},
css:
.button-select {
width: 315rpx;
height: 68rpx;
color: #9097b0;
font-size: 30rpx;
text-align: center;
}
.button-select-before {
color: #9097b0;
border-color: #9097b0;
}
.button-select-after {
color: #3984eb;
background-color: #ebf2fd;
border-color: #3984eb;
}
重点部分先写到这里,新手多看看微信开放文档