今天,说一下项目开发中遇到的一些问题,和一些效果。如果大家遇到了一些效果不好实现的,也可以给我留言,移动猿不怕尝试。
这个似乎不是个问题,但其实是的,先来看一个请求的代码。
wx.request({
url: 'https://test.wisely.com/index.html?latitude=36.8962&longitude=132.5730',
data: {},
method: 'GET',
success: function(res){
// success
},
fail: function(res) {
// fail
},
complete: function(res) {
// complete
}
})
直接将地址和参数都拼接起来,赋给url,行不行?可以。但这么写不规范,正确地写法应该是下面这样
wx.request({
url: 'https://test.wisely.com/index.html',
data: {
latitude:36.8962,
longitude:132.5730
},
method: 'GET',
success: function(res){
// success
},
fail: function(res) {
// fail
},
complete: function(res) {
// complete
}
})
第二种书写方式,将get请求的参数,放在data中,url中只保留地址,这样的好处显而易见,当url+参数很长时,并且参数都是变量,将参数写在data中,非常容易修改。
相信我,真的很容易修改!
这个似乎是个很傻的问题,用navigator标签啊,或者用wx.navigateTo方法啊,但是,在项目中,怎么实现呢?navigator标签该怎么用,wx.navigateTo方法该怎么写?
先来看下要实现的效果
先是一个列表页,然后点击item,跳转到另一个页面,并且将item中的数据传递给了第2个页面。
好,我们先来看列表页
<view wx:for="{{list}}">
<navigator url="../wiselyer/wisely?text={{item}}">
<text>{{item}}text>
navigator>
view>
js中的变量不在给出。
注意看navigator标签中的url,它的后面是拼接了一个text变量的,并且值为所点击的item的数据。
我们来看下第2个页面
<text>{{text}}text>
Page({
data:{
text:"",
},
onLoad:function(options){
var text = options.text
this.setData({
text:text
})
}
}
在js方法中,onLoad中有参数options,通过它,可以获取到前一页面传递过来的参数,参数名就是navigator标签中写的。
so easy!!
那么问题来了,navigator标签的写法会了,wx.navigateTo该怎么写?
简单,绑定点击事件啊!
将列表页的wxml改改,如下
<view wx:for="{{list}}">
<text bindtap="itemClick" data-item="{{item}}"{{item}}</text>
view>
Page({
data:{
list:[
"aa",
"bb",
"cc"
]
},
itemClick:function(args){
var item = args.currentTarget.dataset.item
wx.navigateTo({
url: '../wiselyer/wisely?text='+item,
success: function(res){
// success
},
fail: function(res) {
// fail
},
complete: function(res) {
// complete
}
})
}
})
第2个页面不用动,运行效果是一模一样的。至于从wxml中向js中传值没搞懂的,看一下前面一篇文章。
比如说一个轮播图,结果没获取到图片,那也不能留着一片空白,是不,需要显示一张默认图片,默认图片该怎么显示呢?
好办,看下面
<view class="container">
<image wx:if="{{url.length == 0}}" src="../../images/index_bg.png">image>
<image wx:else src="{{url}}">image>
view>
Page({
data:{
url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494250838736&di=49c4ea7869bc39ca26ceccdf978ed493&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F56%2F99%2F88f58PICuBh_1024.jpg"
},
})
当url的长度为0时,显示默认图片,不为0时,显示url对应的图片。
<view class="container">
<view class="demo" style="background-color:#f2f2f2;width:400rpx;height:100rpx;">
<text class="text">ababcabcdabcdeabcdefabcdefgtext>
<text>bbbbbtext>
view>
<view class="demo_2" style="background-color:#d2d2d2;width:400rpx;height:100rpx;">
<text class="text">ababcabcdabcdeabcdefabcdefgtext>
view>
view>
.demo{
display: flex;
justify-content: space-between;
}
.demo_2{
display: flex;
flex-direction: column;
}
.text{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
在写的时候,效果一直出不来,后来发现,在wxss中的class为demo_2,在wxml中写成了demo-2,所以不对
来看布局
<view class="container">
<view class="demo_2" style="background-color:#a2a2a2;width:400rpx;height:200rpx;">
<text class="text_3">{{content}}text>
view>
<view class="demo_2" style="background-color:#828282;width:400rpx;height:200rpx;">
<text class="text_5">{{content}}text>
view>
view>
.demo_2{
display: flex;
flex-direction: column;
}
.text_3{
display: -webkit-box ;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
}
.text_5{
display: -webkit-box ;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:5;
}
Page({
data:{
content:"ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ"
}
})
<view class="container">
<button type="primary" bindtap="click">点击拼接字符串button>
<view wx:for="{{list}}">
<text>{{item}}text>
view>
view>
Page({
data:{
list:[
"aa"
]
},
click:function(){
var list = [
"bb"
]
var l = this.data.list
for(var i=0;ivar item = list[i]
l.push(item)
}
this.setData({
list:l
})
}
})
点击按钮后调用click方法,拼接数组,我之前一直用的是push方法,但后来发现,还有更好的方法concat方法,如下
Page({
data:{
list:[
"aa"
]
},
click:function(){
var list = [
"bb"
]
var that = this
this.setData({
list:that.data.list.concat(list)
})
}
})
虽然这个技巧大家可能都知道,但我之前真的不知道啊….
在我们的项目中,很多网络接口的访问都需要传入经纬度,所以准备在app.js中获取一次经纬度,然后赋值给变量,这样就不用每次调用获取经纬度的方法了。
貌似思路没错,对不?
但是,真正实现的时候有问题,不管将访问接口的操作放在onShow方法还是onLoad方法中,都可能在app.js中的经纬度还没获取到,就完成了生命周期方法的调用,所以,访问接口就出问题了。
于是,在每次调用有关经纬度的接口之前,都会先判断一样是否已经获取到了经纬度(可以通过变量的长度),如果没有,就再次调用获取经纬度的接口。
获取经纬度的api是wx.getLocation方法
坑1:scroll-view不显示
如果你设置了scroll-view标签,一切看上去都没问题,但就是不显示,那么最大的可能是没有为scroll-view设置高度(或者设置成了100%),因为,它的默认高度为0,不设置高度,当然显示不出来。(貌似有时候不用设置高度也行,原因搞不清了,暂且这么记录吧)
坑2:scroll-view标签设置了bindscrolltolower,实现上拉加载时,数据重复加载。
scroll-view标签中有属性bindscrolltolower,当滑动到底部时,就会触发,我们可以用来实现上拉加载。但是,在实现的时候有一个问题,在上拉的过程中,因为分页加载也是需要时间的,这就导致可能多次触发bindscrolltolower对应的方法,所以,我们需要设置一个标识符,只有当一次分页加载完成后,才能进行下一次,避免加载到重复数据。
坑3:上拉加载更多时,加载更多之类的文字,要写在scroll-view标签内部(记忆模糊了,又不想再验证…)
在正式项目中,域名必须是https协议的。如果你的域名是https协议,但还是在真机上获取不到接口数据,那么最大的可能就是域名缺少中间证书,可以在这里检测。
另一点,正式项目中,是否可以使用http地址的图片?答案是可以!
如果设置background属性或者background-image属性时,使用了本地的图片,那么在真机上是不显示的,所以,尽量避免使用background或background-image来设置图片,如果必须使用的话,那么需要将图片放在服务器上,通过网络路径来设置。
当初看到要实现这个效果,我是很懵逼的,这怎么搞,旋转动画?后来还是一个前端的哥们儿实现了这个效果,如下
<view class="container">
<view>
<text>正在加载text>
<view class="weui-loading">view>
view>
view>
.weui-loading {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;
background-size: 100%;
}
挺长的一个长串,不明觉厉,记录在这里。
实现如下
<view class="container">
<view class="toptab flex-wrp flex-tab ">
<view class="tobtab {{index==0?'active':''}}" data-current="0" bindtap="switchTab">
距离最近
view>
<view class="tobtab {{index==1?'active':''}}" data-current="1" bindtap="switchTab">
热门推荐
view>
view>
view>
<view class="container">
<view class="toptab flex-tab ">
<view class="tobtab {{index==0?'active':''}}" data-current="0" bindtap="switchTab">
距离最近
view>
<view class="tobtab {{index==1?'active':''}}" data-current="1" bindtap="switchTab">
热门推荐
view>
view>
view>
.toptab{
width: 100%;
background-color: #fff;
height: 90rpx;
line-height: 90rpx;
font-size: 30rpx;
}
.tobtab.active{
color: #75b74d;
font-weight: bold;
border-bottom: 2px solid #75b74d;
}
.flex-tab{
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: stretch;
}
Page({
data:{
index:0
},
switchTab:function(e){
var i = e.currentTarget.dataset.current
this.setData({
index:i
})
}
})
这是tab的效果,如果tab中为icon+文字,那么实现起来会复杂一些,大家自行实现。