微信小程序开发手记之八：一个小程序上线后的总结（下）
Posted 王梵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序开发手记之八：一个小程序上线后的总结（下）相关的知识，希望对你有一定的参考价值。
今天，说一下项目开发中遇到的一些问题，和一些效果。如果大家遇到了一些效果不好实现的，也可以给我留言，移动猿不怕尝试。
网络请求该怎么写
这个似乎不是个问题，但其实是的，先来看一个请求的代码。
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方法该怎么写？
先来看下要实现的效果
先是一个列表页，然后点击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">ababcabcdabcdeabcdefabcdefg</text>
<text>bbbbb</text>
</view>
<!--省略为...-->
<view class="demo_2" style="background-color:#d2d2d2;width:400rpx;height:100rpx;">
<text class="text">ababcabcdabcdeabcdefabcdefg</text>
</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">
<!--限制显示行数为3行，超出显示...-->
<view class="demo_2" style="background-color:#a2a2a2;width:400rpx;height:200rpx;">
<text class="text_3">content</text>
</view>
<!--限制显示行数为5行，其实内容只有4行的情况-->
<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;i<list.length;i++)
var 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点左右就审核通过）
资料链接
以上是关于微信小程序开发手记之八：一个小程序上线后的总结（下）的主要内容，如果未能解决你的问题，请参考以下文章