微信小程序开发手记之八:一个小程序上线后的总结(下)

今天,说一下项目开发中遇到的一些问题,和一些效果。如果大家遇到了一些效果不好实现的,也可以给我留言,移动猿不怕尝试。

网络请求该怎么写

这个似乎不是个问题,但其实是的,先来看一个请求的代码。

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中,非常容易修改。
相信我,真的很容易修改!

点击列表组件的item,跳转到另一个页面

这个似乎是个很傻的问题,用navigator标签啊,或者用wx.navigateTo方法啊,但是,在项目中,怎么实现呢?navigator标签该怎么用,wx.navigateTo方法该怎么写?
先来看下要实现的效果
微信小程序开发手记之八:一个小程序上线后的总结(下)_第1张图片

先是一个列表页,然后点击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对应的图片。

文本显示一行,多出的文字显示省略号

先看下效果图
微信小程序开发手记之八:一个小程序上线后的总结(下)_第2张图片

<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,所以不对

控制文本显示的行数

国际惯例,先看张图
微信小程序开发手记之八:一个小程序上线后的总结(下)_第3张图片

来看布局

<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"
  }

})

数组拼接技巧

微信小程序开发手记之八:一个小程序上线后的总结(下)_第4张图片 微信小程序开发手记之八:一个小程序上线后的总结(下)_第5张图片

<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中获取经纬度的问题

在我们的项目中,很多网络接口的访问都需要传入经纬度,所以准备在app.js中获取一次经纬度,然后赋值给变量,这样就不用每次调用获取经纬度的方法了。
貌似思路没错,对不?
但是,真正实现的时候有问题,不管将访问接口的操作放在onShow方法还是onLoad方法中,都可能在app.js中的经纬度还没获取到,就完成了生命周期方法的调用,所以,访问接口就出问题了。
于是,在每次调用有关经纬度的接口之前,都会先判断一样是否已经获取到了经纬度(可以通过变量的长度),如果没有,就再次调用获取经纬度的接口。

获取经纬度的api是wx.getLocation方法

scroll-view标签

坑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属性或者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%;
}

挺长的一个长串,不明觉厉,记录在这里。

tab效果

效果图如下
这里写图片描述

实现如下

<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+文字,那么实现起来会复杂一些,大家自行实现。

其它的一些小技巧与备忘

  • 抽取模版,尤其是一些列表的模版,一模一样,抽取出来方便你我他。
  • 一些字符串的操作,可以搜索js中的字符串操作,曾经一度很茫然,不知道小程序中的字符串操作的方法是啥,后来才知道,就是js的字符串操作
  • 数组操作的一些方法,其实就是js的数组操作。
  • 本地资源无法通过 css 获取
    background-image:可以使用网络图片,或者 base64,或者使用标签,
    你要用自己的图片的话只能先把它放到网上或者自己的服务器(有外部域名,能访问)上,用网络地址访问(PS:这句话来自网络)
  • 小程序最多打开5个页面,所以如果发现一直点击一个页面点击不开,有可能是已经达到了页面的上限。
  • 从提交审核到审核通过,大概花了不到1个工作日时间(第一天下班的时候提交,第二天下午4,5点左右就审核通过)

资料链接

  • 小程序联盟,这是我见过的最全面的网站,很多问题都能找到。尤其是跳坑指南的71,直接解决了我遇到的一个问题

你可能感兴趣的:(微信开发)