1.省市区三级联动
html部分：
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multIndex}}" range="{{multiArray}}" range-key="name">
<image src='./img/rights.png' class='floats'></image>
<view class='divCL' wx:if="{{vals}}">{{vals}}</view>
<view class='divCL colors' wx:else>选择服务对象城市</view>
</picker>
js 部分
page({
data: {
multiArray: [],
multIndex: [0, 0, 0],
cityAll: [],
vals: ''
},
/**
*省市区接口
**/
cityFun:function(){
city().then(res=>{
this.setData({
multiArray:[res,res[0].children,res[0].children[0].children],
multIndex:[0,0,0],
cityAll:res
})
})
},
/**
*点击确定
*此方法优点在于可获取任何你想要给后台传递的值，而且比较灵活
**/
bindMultiPickerChange:function(e){
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multIndex: e.detail.value
})
},
bindMultiPickerColumnChange: function(e){
// data.multIndex为三个列数组下标的索引
// data.multIndex为三个列数组
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
let index= e.detail.value
let nexts=e.detail.column
var data = {
multiArray: this.data.multiArray,
multIndex: this.data.multIndex
};
//更新滑动的第几列e.detail.column的数组下标值e.detail.value
data.multIndex[nexts] = index;
//如果更新的是第一列“省”，第二列“市”和第三列“区”的数组下标置为0
if (nexts == 0){
data.multIndex= [index,0,0];
} else if (nexts == 1){
//如果更新的是第二列“市”，第一列“省”的下标不变，第三列“区”的数组下标置为0
data.multIndex= [data.multIndex[0], index, 0];
} else if (nexts == 2) {
//如果更新的是第三列“区”，第一列“省”和第二列“市”的值均不变。
data.multIndex= [data.multIndex[0], data.multIndex[1], index];
}
var temp = this.data.cityAll;
data.multiArray[0] = temp;
if ((temp[data.multIndex[0]].children).length > 0){
//如果第二列“市”的个数大于0,通过multIndex变更multiArray[1]的值
data.multiArray[1] = temp[data.multIndex[0]].children;
var areaArr = (temp[data.multIndex[0]].children[data.multIndex[1]]).children;
//如果第三列“区”的个数大于0,通过multIndex变更multiArray[2]的值；否则赋值为空数组
data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
}else{
//如果第二列“市”的个数不大于0，那么第二列“市”和第三列“区”都赋值为空数组
data.multiArray[1] = [];
data.multiArray[2] = [];
}
//data.multiArray = [temp, temp[data.multIndex[0]].children, temp[data.multIndex[0]].children[data.multIndex[1]].children];
//setData更新数据
this.setData(data);
}
})
<picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}"> <image src='./img/rights.png' class='floats'></image> <view class='divCL' wx:if="{{firstServiceTime}}"> {{firstServiceTime}} </view> <view class='divCL colors' wx:else>选择首次服务时间</view> </picker>
2. 时间 年月日 十分
<picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}">
<image src='./img/rights.png' class='floats'></image>
<view class='divCL' wx:if="{{firstServiceTime}}">{{firstServiceTime}}</view>
<view class='divCL colors' wx:else>选择首次服务时间</view>
</picker>
js部分
Page({
/**
* 页面的初始数据
*/
data: {
// 时间
date: '2018-10-01',
time: '12:00',
dateTimeArray1: null,
dateTime1: null,
startYear: 2000,
endYear: 2100,
firstServiceTime: '',
},
// 初始化时间
dataTimes: function() {
// 获取完整的年月日 时分秒，以及默认显示的数组
var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
// 精确到分的处理，将数组的秒去掉
var lastArray = obj1.dateTimeArray.pop();
var lastTime = obj1.dateTime.pop();
this.setData({
dateTimeArray1: obj1.dateTimeArray,
dateTime1: obj1.dateTime
});
},
changeDateTime1(e) {
this.setData({
dateTime1: e.detail.value
});
this.setData({
firstServiceTime: this.data.dateTimeArray1[0][this.data.dateTime1[0]] + '-' + this.data.dateTimeArray1[1][this.data.dateTime1[1]] + '-' + this.data.dateTimeArray1[2][this.data.dateTime1[2]] + ' ' + this.data.dateTimeArray1[3][this.data.dateTime1[3]] + ':' + this.data.dateTimeArray1[4][this.data.dateTime1[4]] + ':00'
})
},
changeDateTimeColumn1(e) {
var arr = this.data.dateTime1,
dateArr = this.data.dateTimeArray1;
arr[e.detail.column] = e.detail.value;
dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
this.setData({
dateTimeArray1: dateArr,
dateTime1: arr
});
}
}3. 上传图片
<view class='upload'>
<view class='imgList' >
<image wx:for="{{imgList}}" wx:key="{{index}}" src='{{item}}' wx:if="{{imgList.length>0}}"></image>
<view class='upImg' bindtap='uploadImgs' wx:if="{{imgList.length<5}}">
<image src='./img/upload.png'></image>
<view>点击上传</view>
</view>
</view>
</view>
js部分
page({
data: {
productInfo: {},
ossFullName: '',
mediaType: ['image/jpeg', 'image/png'],
dir: 'oss上传路径',
imgList: []
},
//验证签名
getOssKeyFun: function(tempFilePaths) {
var nas = ''
var ImgNames = ''
var that = this
let ary = []
for (var i = 0, h = tempFilePaths.length; i < h; i++) {
nas = tempFilePaths[i]
if (i == tempFilePaths.length) {
return
}
if (nas.indexOf('.jpg') > 0) {
ImgNames = '.jpg'
} else if (nas.indexOf('.png') > 0) {
ImgNames = '.png'
}
getOssKey({path: this.data.dir,mediaType: 1}).then(r => {
let fileName = r.fileName + ImgNames
let name = fileName;
let dir = r.dir
let key = r.dir + '/' + fileName;
let policy = r.policy;
let OSSAccessKeyId = r.accessId;
let signature = r.signature;
let host = r.host;
let expire = r.expire;
//let ossFullName = r.host + '/' + r.dir + '/' + fileName + ;
var uploadImgCount = 0;
wx.uploadFile({
url: host,
filePath: nas,
name: 'file',
formData: {
name: name,
key: key, //这个是关键它是定义存放在阿里云那个目录下
policy: policy, //上传阿里云的加密策略
OSSAccessKeyId: OSSAccessKeyId, //自己阿里云的aid
success_action_status: "200",
signature: signature, //上传阿里云的签名
},
header: {"Content-Type": "multipart/form-data"},
success: function(res) {
uploadImgCount++;
let url = host + '/' + dir + '/' + fileName
ary.push(url);
that.setData({
imgList: ary
});
//如果是最后一张,则隐藏等待中
if (uploadImgCount == tempFilePaths.length) {
wx.hideToast();
}
},
fail: function(res) {
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function(res) {}
})
}
})
})
}
},
// 上传图片
uploadImgs: function() {
var that = this
wx.chooseImage({
count: 5, //最多可以选择的图片总数
// sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
//启动上传等待中...
wx.showToast({
title: '正在上传...',
icon: 'loading',
mask: true,
duration: 10000
})
that.getOssKeyFun(tempFilePaths)
}
});
},
})
4.百度地图定位
<view class='cityPoition cityPoitionName' bind:tap="getPostionts">重新定位</view>
js部分
positions function() {
let value = ''
return new Promise((resolve, param) => {
wx.getLocation({
success: function(lb) {
wx.request({
// ②百度地图API，将微信获得的经纬度传给百度，获得城市等信息
url: 'http://api.map.baidu.com/reverse_geocoding/v3/?ak='你的key'j&location=' + lb.latitude + ',' + lb.longitude + '&output=json&coordtype=wgs84ll',
data: {},
header: {'Content-Type': 'application/json'},
success: function(res) {
resolve(res.data.result.addressComponent.city)},
fail: function() {// fail},
complete: function() {// complete}
})
},
})
})
},
// 获取定位
getPostionts: function () {
this.loading = true
this.setData({
boolear: false
})
positions().then(res => {
this.setData({
city: res,
loading:false,
boolear: true
})
})
5.小程序跳转
// 正常跳转到某一页面
wx.navigateTo({
url: 'page/home/home?user_id=111'
})
// 返回前页面 delta 为返回几层
wx.navigateBack({
delta: 2
})
// 关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
url: 'page/home/home?user_id=111'
})
// 跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。
wx.switchTab({
url: 'page/index/index'
})
// 关闭所有页面，打开到应用内的某个页面。
wx.reLaunch({
url: 'page/home/home?user_id=111'
})
本文就是记录一下 当时写小程序所用的比较有用的东西 会一直补充，如有语法问题 欢迎大家随时补充
