小程序与colorUI实战总结
先下载colorui的源文件
https://github.com/weilanwl/ColorUI 这是下载地址
下载之后，解压可以看到如下文件
使用colorUI，首先在app.wxss引入这两个文件
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
想实现下面的tabbar的效果，可以按着下面的步骤来写
99
购物车
我的
此时的tabbar就可以出现了，但是它不是固定在底部的，如何让它固定在底部呢？可以在wxss里面进行修改
.cu-bar.tabbar{
position: fixed;
bottom: 0;
left: 0;
width:100%;
}
这样就可以吧tabbar固定在屏幕的底部了！
那此时的tabbar只是一个静态的组件，没有切换变色功能，如何用css实现呢？
menuClick: function (e) {
var that=this
that.setData({
_num: e.target.dataset.num ? e.target.dataset.num:that.data._num
})
},
此时就完成了tabbar图标颜色的切换
那如何点击图标进行组件内容的切换呢？这里需要使用轮播组件
welcome come to 热点2 welcome come to 关注3 welcome come to 推荐4 welcome come to 热点5
虽然是实现了点击tabbar图标，就进行了滑动切换，但是还有一点，毕竟是轮播图的组件，即使不点击tabbar的图标按钮，用手动滑动屏幕，组件仍然可以进行切换，这就出现了bug，如何让轮播图的组件，只能通过点击tabbar来切换，而不可能手动滑动切换呢？
然后在js文件里面写上方法函数
catchTouchMove: function (res) {
return false
},
components文件夹里面放入我们需要引用的组件
1，定义组件
@import "../../app.wxss";
options:{
addGlobalClass:true,
}
这样就解决了在组件里面，引入外来样式文件的报错行为
下面一个问题
控制1
控制1
控制1
控制1
控制1
控制1
控制1
data: {
_num2:0
},
methods: {
tabSelect:function(e){
var that = this
that.setData({
_num2: e.target.dataset.num2 ? e.target.dataset.num2 : that.data._num2
})
},
// 下面这个方法，是禁止左右滑动，只能点击按键才能切换
catchTouchMove: function (res) {
return false
},
},
welcome come to 热点2 welcome come to 关注3 welcome come to 推荐4 welcome come to 热点5
微信页面里面点击跳转功能的实现方法
小程序标签和普通html标签不同的
单位换算 1px是等于0.5rpx 是rpx的两倍
用户交互弹窗功能的实现
比如，点击某个一按钮，弹出等待加载 、确定取消 、操作成功提示框等
使用方法如下
小程序里面，两个js文件的相互引用
列表页跳转到详情页面，如果传递对应的文章的id到详情页，然后让详情页根据id获得后台的详情内容呢？
如何获取当前位置的经度和纬度？
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
}
})
注意，使用getlocation 需要在app.json里面进行如下配置
"permission": {
"scope.userLocation": {
"desc": "请点击确定"
}
}
如何实现，点击按钮，打开当前位置的地图呢？
clickmap: function () {
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success(res) {
const latitude = res.latitude
const longitude = res.longitude
wx.openLocation({
latitude,
longitude,
scale: 10
})
}
})
},
如何制作指定多个固定地点的位置设置
新建一个页面文件
在wxml文件里面写
在js文件里面写
var app = getApp();
Page({
data: {
url: '',
listData: [
{
"id": 1,
"placeName": "北辛街道办事处",
"placeImageUrl": "",
"placeOpenTime": 1505854800,
"placeCloseTime": 1505919600,
"placeAddress": "北辛街道办事处新时代",
"placeLongitude": "117.1606510000",
"placeLatitude": "35.1204100000"
}, {
"id": 2,
"placeName": "龙泉街道办事处",
"placeImageUrl": "",
"placeOpenTime": 1506286800,
"placeCloseTime": 1506258000,
"placeAddress": "龙泉街道办事处",
"placeLongitude": "117.1942400000",
"placeLatitude": "35.0633500000"
}, {
"id": 3,
"placeName": "善南街道办事处",
"placeImageUrl": "",
"placeOpenTime": 1506200400,
"placeCloseTime": 1506265200,
"placeAddress": "善南街道办事处",
"placeLongitude": "117.1779400000",
"placeLatitude": "35.0646200000"
}, {
"id": 4,
"placeName": "荆河街道办事处",
"placeImageUrl": "",
"placeOpenTime": 1506243600,
"placeCloseTime": 1506265200,
"placeAddress": "荆河街道办事处",
"placeLongitude": "117.1631200000",
"placeLatitude": "35.0621400000"
}
],
scale: '15',
Height: '0',
controls: '40',
latitude: '',
longitude: '',
markers: [],
},
onReady: function (e) {
// 使用 wx.createMapContext 获取 map 上下文
this.mapCtx = wx.createMapContext('myMap')
},
onLoad: function () {
var that = this;
that.setData({
// url: app.globalData.url
})
var data = JSON.stringify({
page: 1,
pageSize: 10,
request: {
// placeLongitude: app.globalData.longitude,
// placeLatitude: app.globalData.latitude,
// userId: app.globalData.userId
}
})
wx.getLocation({
type: 'wgs84', //返回可以用于wx.openLocation的经纬度
success: (res) => {
that.setData({
markers: that.getSchoolMarkers(),
scale: 14,
longitude: res.longitude,
latitude: res.latitude
})
}
});
wx.getSystemInfo({
success: function (res) {
//设置map高度，根据当前设备宽高满屏显示
that.setData({
view: {
Height: res.windowHeight*1.4
},
})
}
})
},
controltap(e) {
this.moveToLocation()
},
getSchoolMarkers() {
var market = [];
for (let item of this.data.listData) {
let marker1 = this.createMarker(item);
market.push(marker1)
}
return market;
},
moveToLocation: function () {
this.mapCtx.moveToLocation()
},
strSub: function (a) {
var str = a.split(".")[1];
str = str.substring(0, str.length - 1)
return a.split(".")[0] + '.' + str;
},
createMarker(point) {
let latitude = this.strSub(point.placeLatitude);
let longitude = point.placeLongitude;
let marker = {
iconPath: "/image/icon1.png",
id: point.id || 0,
name: point.placeName || '',
title: point.placeName || '',
latitude: latitude,
longitude: longitude,
label: {
x: -24,
y: -26,
content: point.placeName
},
width: 24,
height: 24
};
return marker;
}
})
这样就可以调用了
地图位置的跳转
{{item.placeName}}
tiaozhuan:function(e){
var that = this;
wx.getLocation({
type: 'wgs84', //返回可以用于wx.openLocation的经纬度
success: (res) => {
that.setData({
// markers: that.getSchoolMarkers(),
scale: 14,
longitude: Number(e.currentTarget.dataset.jingdu),
latitude: Number(e.currentTarget.dataset.weidu)
})
}
});
},
页面底部上拉加载数据
页面顶部下拉刷新页面
想要使用这个功能，需要先开启下拉功能，小程序提供了设置
如何获得用户信息
先建立一个按钮，绑定一个事件
data: {
nickName:" ",
avatarUrl:"../../image/icon1.png"
},
bingGetUserInfo: function (e) {
console.log(e.detail)
this.setData({
nickName:e.detail.userInfo.nickName,
avatarUrl: e.detail.userInfo.avatarUrl
})
},
查看是否已经授权，然后在进行微信号信息获取
Page({
data: {
//判断小程序的API，回调，参数，组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// 查看是否授权
wx.getSetting({
success: function(res){
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
//用户已经授权过
}
})
}
}
})
},
bindGetUserInfo: function(e) {
console.log(e.detail.userInfo)
if (e.detail.userInfo){
//用户按了允许授权按钮
} else {
//用户按了拒绝按钮
}
}
})