申明：本文纯属资料整理，如有违规请评论联系作者删除。
1. navigator点击出现阴影，如何去除阴影
做法：将navigator组件的hover-class设置为none：hover-class="none"
<navigator url='index' class="nav" hover-class='none'>
.....
</navigator>
2. 页面可以左右滑动且出现白色部分
做法：因为页面有元素总宽度超出 750rpx，所以导致页面可以左右滑动且出现白色部分。需要检查好样式，找出超过750rpx的原因，进行修改。
3. 如何进行针对某个页面的下拉刷新：enablePullDownRefresh:true
在小程序的 app.json 中配置 window 项的enablePullDownRefresh为true，小程序的所有页面都可以下拉刷新
如果只要某个页面可以下拉刷新，只要配置这个页面的config项enablePullDownRefresh:true即可。
同时配置 backgroundTextStyle: "dark"，实现下拉刷新的点是黑色的
config = {
navigationBarTitleText: '....',
enablePullDownRefresh:true,
backgroundTextStyle: "dark"
}
监听页面的下拉刷新事件
onPullDownRefresh(){
....
this.loadOrderList(1,true); //做一些异步请求，更新页面数据
....
}
async loadOrderList(page,pullrefresh){
let result = await getOrderList(page);
.....
if (pullrefresh) { // 异步请求函数内写明，如果该函数是通过下拉刷新触发的，请求结束后，需要关闭下拉刷新的动画效果
wx.stopPullDownRefresh();
}
this.$apply();
}
4. 如何禁止组件swiper手动滑动
有时候因为需求，不希望用户可以手动滑动swiper-item
<swiper autoplay="true" circular="true" duration="2000" interval="7000" vertical="true" catchtouchmove='catchTouchMove'>
<swiper-item wx:for-items="{{list}}" wx:for-index="index" wx:key="index" catchtouchmove='catchTouchMove'>
....
</swiper-item>
</swiper>
methods = {
catchTouchMove(e){
return false;
}
}
5. IOS系统与Android系统Date数据类型比较不兼容
https://blog.csdn.net/qq_30604453/article/details/82021634
6. position：absolute布局IOS系统与Android系统不兼容
https://blog.csdn.net/qq_30604453/article/details/82116427
7. 如何解决map组件设置z-index无效
https://blog.csdn.net/qq_30604453/article/details/81670740
8. 改变数据然后通过$apply更新到视图层（用到wepy框架）微信开发者工具正常，但是真机测试视图层数据却无更新
https://blog.csdn.net/qq_30604453/article/details/81670509
9. wepy：官方demo报错 pages/index.js 出现脚本错误或者未正确调用 Page()
https://blog.csdn.net/qq_30604453/article/details/80968909
10. 去除button按钮的默认边框线
小程序就是这么神奇，直接 border:none 是没有办法去除按钮的边框线的。得这样写：
button::after{
border: none;
}
11. 增加按钮的点击反馈效果
wx.vibrateLong():使手机发生较短时间的振动（400ms）
wx.vibrateShort():使手机发生较短时间的振动（15ms）
但是该效果只支持iPhone7及以上机型以及少部分安卓机型
bindtap(){
wx.vibrateShort();
}
12. 优化输入为空时候的提示:利用input的属性placeholder-class
<input placeholder-class="{{isNull?'color-red':''}}"/>
.color-red{
color:red;
}
testIsNull(val){
if(val==''){
this.isNull = true;
this.$apply();
}
}
13.chooseLocation无反应
存在一种情况，就是当首次申请授权使用用户地理位置时被拒绝，接下来每次点击chooseLocation都会没有反应。因为授权被拒后，都不会再弹出授权弹框了。授权弹框只弹一次，所以必须考虑授权被拒的处理情况。授权被拒，只能打开设置页面，让用户手动授权。
一般我们在onLoad页面的时候就申请授权
当使用chooseLocation的时候需要进行fail处理
wx.chooseLocation({
success:function(res){
...//成功
},
fail:function(){
...//失败
this.authorizationAgain(); // 提醒用户再次授权
}
});
authorizationAgain(){
wx.getSetting({
success:function(res) {
if (!res.authSetting['scope.userLocation']) {
console.log('已经拒绝过授权');
wx.showToast({
title:'您已经拒绝过使用地理位置授权请求，请前往设置开启授权',
icon:'none'
})
setTimeout(function(){
wx.openSetting({
success (res) {
console.log(res.authSetting)
}
})
},1500)
}
}
})
}
14.### input组件opacity设置为0，无效
就是这么神奇，微信开发者工具一切正常，但是真机测试 opacity:0 根本不起作用。这是小程序官方组件的bug。当inpu focus时 opacity:0就失效了。blur时又生效了。
所以要实现input隐藏的功能还不能使用opacity，得考虑其他途径。
我是通过设置padding-left当它变得很大，内容被挤掉达到隐藏的效果。可以看到绿色那一块就是padding-left,
.input{
position: absolute;
top: 0;
left: 0;
height:80rpx;
font-size: 1rpx;
color:gray;
letter-spacing: 880rpx;
opacity: 0;
overflow: hidden;
padding-left:600rpx;
}
<view class="mask" wx:if='{{showPayModal}}' >
<view class="modal col">
<icon class='close' type="clear" size="26" bindtap='clickCloseMask'/>
<view class="title">输入支付码</view>
<view class="col input-panel " bindtap='inputpay'>
<view class="rect row">
<text class="fang row">{{paycodeText[0]}}</text>
<text class="fang row">{{paycodeText[1]}}</text>
<text class="fang row">{{paycodeText[2]}}</text>
<text class="fang row">{{paycodeText[3]}}</text>
<text class="fang row">{{paycodeText[4]}}</text>
<text class="fang row">{{paycodeText[5]}}</text>
</view>
<input bindinput='bindinput' class='input' type='number' password='true' maxlength='6' focus="{{focus}}"/>
</view>
</view>
</view>
.mask{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
z-index: 99;
.modal{
position: fixed;
top: 42%;
left: 50%;
background: #fff;
width: 630rpx;
height: 342rpx;
border-radius: 8rpx;
transform: translate(-50%,-50%);
}
.input-panel{
justify-content: center;
position: relative;
margin-left: 12rpx;
}
.rect{
/* margin-left: -12rpx; */
}
.title{
font-size: 36rpx;
margin-top: 70rpx;margin-bottom: 60rpx;
font-weight: bold;
}
.close{
position: absolute;
top: 20rpx;
right: 20rpx;
}
.input{
position: absolute;
top: 0;
left: 0;
height:80rpx;
/* border: 1rpx solid red; */
font-size: 1rpx;
color:gray;
letter-spacing: 880rpx;
opacity: 0;
overflow: hidden;
padding-left:600rpx;
}
.fang{
width: 80rpx;
height: 80rpx;
border: 1rpx solid #ddd;
margin-right: 12rpx;
justify-content: center;
font-size: 36rpx;
color: #888;
}
}
15. chooseLocation API设计超级不合理而且返回结果极其随意
chooseLocation返回数据的关键字段分别是address：用来描述省市区街道，name：用来描述具体某个建筑物。当我们点击某一列数据时，拿到的返回结果就是如上描述。从省市区街道建筑物，该有的数据都有，而且排列整齐，符合预期结果。
但是，如果用户只是通过移动地图上的点，移动完后看下列默认选择的第一列数据刚好符合预期，直接点了确定，拿到的 address = name（基本相等，并不完全相等，是不是完全相等还是看缘分的） 其字符串组成大致为 “建筑物(市区街道)”。为什么说大致，这恰恰是我想吐槽的返回数据的随意性！取到什么数据完全看缘分！()里可能有市也可能没有，可能有区街道描述，也可能没有。不信的小伙伴多划拉几下测试几遍你就知道了！！！！
这两种情况取到的数据有一个poiid可以区分。当我们默认选择第一项数据时，poiid为‘City’，可以看到address与name基本相等。当通过点击除第一项数据以外的数据，poiid是一个具体的qqmap_id，address刚好描述其具体位置，name刚好是建筑物的名称。
对于地址表设计谨慎精确的来说，这简直是烂到爆的API。没有分割省市区街道，返回数据有没有省市区全看缘分。这时候还是需要引入第三方地图。怕其他地图产品跟微信小程序地图产生结果会有细小的差别，只能选择跟微信小程序出自同一个爸爸的腾讯地图。
通过chooseLocation拿到经纬度，再通过腾讯地图进行逆地址解析，取得province/city/district/street三个值。
具体教程查看 API 文档 https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
其返回结果res.data.result.address_component含有nation（国家）/province（省）/city（市）/district（区）/street（街）这是可以取用的数据。
但是formatted_addresses描述的数据会跟小程序chooseLocation显示给用户的数据有细小的差别，其描述的建筑物不一定是chooseLocation默认第一项描述的建筑物，所以这一部分数据不能取用。所以我们需要“湖景1号”的数据只能通过js截取字符串去截取
selectLocation(){
let that = this;
wx.chooseLocation({
success:function(res){
console.log(res);
that.form.longitude = res.longitude;
that.form.latitude = res.latitude;
let ischoose = res.poiid=='City';
that.form.street = res.address;
that.form.desc = res.name;
if (ischoose) {
that.form.desc = res.name.substring(0,res.name.lastIndexOf('('));
}
that.$apply();
that.loadCity(res.longitude,res.latitude,ischoose); //省市区
console.log('chooseLocation',res);
},
fail:function(){
that.authorizationAgain();
}
});
}
loadCity(longitude,latitude,flag){
var that = this;
wx.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
`${latitude},${longitude}&key=腾讯地图Key`,
success(res) {
let info = res.data.result;
console.log(info);
let pro = info.address_component;
that.form.province = pro.province;
that.form.city = pro.city;
that.form.district = pro.district;
if (flag) {
that.form.street = info.address;
}
that.$apply();
}
})
16.数据绑定 Mustache 语法（双大括号）
这个 {{}} 里面不能执行任何的方法，只能做简单的四则运算和Boolen判断，比如：
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{parseInt(i)}}
</view>
你这么干是不行的，你只能在拿到数据的时候就先对数据格式化一遍。
但是你如果非要在渲染的时候再格式化的话也行，你就只能通过WXS来处理了，比如：
<wxs module="m1">
var parse = function(str) {
return parseInt(str);
};
module.exports.parse = parse;
</wxs>
<view wx:for="{{['1.22', '2.22', '3.222']}}" wx:for-item="i">
{{m1.parse(i)}}
</view>
17. wx.navigateBack() 无法向回退的页面传参
小程序的几个导航api,都可以通过 url 给对应的页面传参。而 w x.navigateBack({delta}), 只接受一个delta（返回的页面数）参数。但是有时候确确实实有向回退页面传参数的情况，这时候就只能通过localstorage或是redux等来处理了。
18. rpx 单位适配问题
小程序提供的 rpx 单位确实让我们开发的时候在高精度还原设计稿上省了很多事情。但是小记发现当你使用1rpx在一些机型上特别容易出问题。
.border {
border: 1rpx solid #000;
}
如果你这样设置边框的时候，大多数情况下它都能正常显示，但是在一些机器上尤其是 iPhone X 边框有时候根本不显示。所以我现在都改成 2rpx
19. 绑定事件获取的target与currentTarget是有区别的
在绑定事件获取当前组件数据的时候，拿到的event里面有target和currentTarget 这两个玩意儿里面都有一个dataset，而我们需要获取的数据就在dataset对象里面。正确的我们应该取 currentTarget 里面的就行，但是有时候这两个的数据是完全一样的，一不小心你就取错了。
那这个 target 和 currentTarget 有什么区别呢，官方的解释：
- target：触发事件的源组件;
- currentTarget： 事件绑定的当前组件;
看个例子:
<view id="outer" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。
其实很容易区分，target就是事件开始的地方，currentTarget就是你绑定事件的地方。可以去看看小程序事件。
20. CSS引用静态资源问题
iconfont, 图片不能通过css，哦～应该该叫 wxss 本地引入。
1、iconfont @font-face 引用的ttf等文件在小程序中不支持，可以使用线上或转base64 参考 微信小程序wxss样式文件中引用iconfont素材。
2、图片可以使用base64或者线上链接。或者<image>哦，对了图片链接一定要带 https 协议头，形如：//cdn.xxx.com/jflkadsjf.png 是不行的
21. view 添加点击效果
需要主动开启
<view hover hover-class="view-hover">
22. page wxss样式层级
下面是一个page 示例：
<!-- wxml -->
<view class="page-layout">
<view class="page__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item green">1</view>
<view class="flex-item red">2</view>
<view class="flex-item blue">3</view>
</view>
</view>
/* wxss */
.page-layout {
color: #000;
}
/* 下面这种写法 .red 是不生效的 */
.red {
color: #f00;
}
/* 必须这么写 */
.page-layout .red {
color: #f00;
}
23. 其他注意点
- 任何情况下的视图更新只能通过setData()
- 路径只能是五层，请尽量避免多层级的交互方式。
- 不要直接对 Page.data 进行修改，请使用 Page.setData
- 跳转到tabbar页面一定要用 wx.switchTab()
- 使用wx:for遍历的时候最好加上wx:key=”{{index}}”
七牛云存储整理的小程序坑
- 1、 不能执行方法，只能处理简单的运算如 “+ - * /”，比如遇到遍历list，每个item的金额需要格式化，只能在js里预先格式化好再setData一遍( ╯□╰ )
- 2、只能通过,只能通过,只能通过setData()更新视图，坑……….
- 3、我们规定页面路径只能是五层，请尽量避免多层级的交互方式。
- 4、A页面–>B页面，B页面返回A，如何触发A的刷新，不增加页面层级。 暂时想到的方案：在A页面的onshow事件里写A的初始化数据逻辑。
- 5、
undefined 当作字符串处理 if(xxx == “undefined”) 【后期版本迭代优化了】 - 6、遇到奇怪的问题（如样式等）先重启工具，百试不爽
- 7、不支持本地web字体(需要使用线上字体),经测试发现一些安卓就是不能正常显示。几经折腾才发现原来还要存放字体的服务器要支持跨域。尼玛，手机上调试也不报错，差点放弃web字体了。卡了好久，坑………….
- 8、本地资源无法通过 css 获取 可以使用网络图片，或者 base64，或者使用
<image/>标签 - 9、不能直接操作 Page.data 【避免在直接对 Page.data 进行赋值修改，请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染】
- 10、数字键盘用 type=”digit”
- 11、已用 https，但报无法建立与该服务器的安全连接是什么情况【需要 nginx 配置一下 https 的加密标准为tls1.2及以上】
- 12、wx.setStorage(OBJECT) 【目前每个小程序限制5M】
- 13、数据监控【微信后台：事实访问次数/昨日概况/累计访问用户数/TOP受访页】
- 14、微信调试神器，ngrok，见 ngrok
- 15、view 添加点击效果[需要开启hover效果]：
<view hover hover-class="item-hover">
- 16、用户授权调试方法【开发工具-》清除手机授权数据 (缓存-清除手机授权数据) 】
- 17、安卓手机上小程序第一次加载时候首页时候， onshow方法会莫名其妙加载两遍，而同样在iphone下却不会，由于需要在onshow里面触发获取用户信息，所以系统加载两次onshow会导致后台报错。。。
- 18、禁止页面下拉： 设置 “disableScroll”: true 。
- 19、安卓下会出现getAppConfig:fail，无法获取userInfo。微信问题，下载最新的微信安装包
- 20、后台不能接受POST数据，但是可以接收GET请求参数
url: url,
data: data,
method: "POST",
dataType: "json",
header: {
'content-type': 'application/x-www-form-urlencoded' //==> 此处若为application/json则服务端无法获取POST的参数
}
- 21、小程序第一次启动用户拒绝授权后，下一次无法唤起授权弹框，默认记住上一次用户的选择。暂时没有找到解决方法，微信也没有相关解析。【2017-01-10】
- 22、跳转到有tabbar的页面一定要用 wx.switchTab().这个在各个群里几乎每天都有人问到！！！
- 22、绑定开发者/体验者时记得去手机上确认邀请。（超多人问）
- 23、 微信后台更新了request合法域名，可以直接去微信开发工具–>项目–>配置信息–>刷新，立马生效。
- 24、 小程序官方没有提供java版登录信息解密示例，可以用这个demo java版解密demo
- 25、 使用wx:for遍历的时候最好加上wx:key=”“，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略，但是如果遍历的数组会发生改变，则有可能导致数据顺序会改变。
