微信小程序之跳坑指南
微信小程序之跳坑指南
一、编写目的
本文档旨在说明本人在开发小程序时遇到的一些问题，对最近接触的小程序开发做出一些总结。以便以后查看并解决问题，也为和其它小程序开发者共同交流探讨。
二、问题总结
Ø 函数重复
当有两个方法重名时，位于后面的方法会覆盖前面的方法， IDE也不会报错，这个坑大家一定要注意。
Ø 背景图片加载问题
在进行微信小程序开发时开发工具自带的模拟器可以正常显示，但是手机上面体验版查看居然没有图片。因为background-image:url(本地路径) 这样设置背景图片，不管是wxss里面设置，或者wxml里面这样设置都是不行的
解决方案：
1.使用网上资源图片，即https请求过来的图片，例如：background-image:url(\'https://...\')
2.本地图片使用image组件加载
1）.并且设置高度不能为百分比
2）.图片的url里面不能有中文
3）.图片的HTTP应为小写的http以及图片的后缀为小写的.png或者.jpg（建议全部为png）
4）.图片名称没有空格
Ø 背景图片铺满全屏问题，
本地图片使用image组件加载时需设置高度，且必须为准确高度，设置height:100%是无效的，满屏设置是1334rpx。 但是1334rpx在iphone X上面显示下方会有留白。
解决方案：
当前页面onload事件获取当前手机的宽度和高度，动态绑定到wxml上面即可。
Ø 页面传值问题
需要获取view组件的值。
解决方案：
第一种解决方式：
view里面加个属性为data-value=“值” data是前缀。后面跟一个变量名。这个名字自己可以随意定义。
例：
<viewbindtap=\'djLouPan\'data-text=\'{{item}}\'class="table"wx:for="{{addList}}">{{item.areaName}}<view>
js中则使用e.currentTarget获取，event.currentTarget.dataset.变量； data后面跟的名字跟获取这里的名字一致就可以获取到
例：
djLouPan: function (e) {
var data = e.currentTarget.dataset.text;
}
第二种解决方式：
在view上面加一个属性
例：
<viewbindtap=\'djLouPan\'{{item}}\'class="table"wx:for="{{addList}}">{{item.areaName}}<view>
js中则使用e.currentTarget获取。
例：
djLouPan: function (e) {
var data = e.currentTarget.id;
}
Ø 页面传值问题二
不加载onload事件传递数据。场景：A 、B两个页面，A页面跳转到B页面 。然后B页面选择后把数据带回A页面并且不改动A页面已经输入过的值。
解决方案：
在B的js文件中给A里面的变量赋值。
例：
var pages = getCurrentPages(); //得到所有的页面
var prevPage = pages[pages.length - 2];//上一个页面。
//给上一个页面的变量赋值
prevPage.setData({
addressResult:result,
})
注：addressResult为A页面的变量。
Ø wxml页面逻辑判断问题
wxml文件里面的逻辑判断不起作用。
解决方案：
wxml文件的逻辑判断都要放在{{ }}里面。
错误写法：wx:if="{{item.id}}==1"
正确写法：wx:if="{{item.
Ø 页面跳转方法解析
页面各个跳转方法解析
1.wx.navigateTo()：
保留当前页面，跳转到应用内的某个页面，并且左上角带有返回图标，使用wx.navigateBack可以返回到原页面。但是不能跳转到tabBar页面
2. wx.redirectTo()：
关闭当前页面，跳转到应用内的某个页面，左上角不会带返回图标
3. wx.switchTab()：
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，不能跳转非tabBar页面，并且不会带有返回图标
4.wx.reLaunch()：
关闭所有页面，打开到应用内的某个页面，左上角不会带返回图标
Ø 页面深度问题
当前小程序页面深度为10,即只能跳转10个页面，超过10个页面则所以组件失效。
解决方案：
最后页面使用wx.reLaunch()跳转到不需要带有返回图标的页面或使用wx.switchTab()跳转tabBar页面。
Ø 页面跳转问题
1.使用跳转方法跳转页面时多次连击加载多次页面问题
解决方案：
增加Loading遮罩层，使其不能联系点击。
例：
wx.showLoading({
title: \'加载中\',
mask: true,
})
setTimeout(function () {
wx.hideLoading()
}, 2000);
2.使用wx.navigateBack()返回上一页时，多次点击返回多页。
解决方案：
增加开关控制是否跳转。
例：
onShow函数中设置值。
onShow: function () {
this.pageLoading = !1;
}
跳转事件中处理：
if (!this.pageLoading) {
this.pageLoading = !0;
wx.navigateBack();
}
Ø this作用域问题
在request请求回调函数等异步操作的时候，使用this.setData({})保存数据时出错。
解决方案：
在函数外部写上：var that=this;
Ø 调用外部js函数问题
引入外部js后，使用变量名调用方法无效。
例:
var util = require(\'../../utils/util.js\');
调用util.requestData(reqData, eventData)时报错；
解决方案：
调用外部js函数时，需先在外部js中输出函数。
例：
module.exports = {
formatTime: formatTime,
}
注：formatTime为函数名。
Ø tabbar页面切换问题。
tabbar在切换时页面数据无法刷新
解决方案：
tabbar的实现可能是显示和隐藏view，所以，不会一直调用page.onLoad()方法，可以尝试把代码逻辑写在page.onShow()里面。
Ø scroll-view组件滚动框问题
scroll-view组件移除滚动框
解决方案：
wxss中增加
::-webkit-scrollbar{
width:0;
height:0;
color:transparent;
}
Ø swiper组件问题
自定义swiper样式
解决方案：
/*swiper组件指示点距下高度*/
.swiper-box.wx-swiper-dots.wx-swiper-dots-horizontal {
margin-bottom:50rpx;
}
/*swiper组件指示点样式*/
.swiper-box.wx-swiper-dot {
width:10rpx;
display:inline-flex;
height:10rpx;
/* margin-left: 20rpx;//每个点的间距 */
border-radius:5rpx;
justify-content:space-between;
}
Ø 一段文字如何换行
小程序中唯一可以实现换行的标签组件是text
Ø 小程序打开事件
在小程序打开时加载一些数据
解决方案：
app.js里面增加
onLaunch:function () {
//逻辑
},
Ø 设置页面背景色问题
在框架配置文件app.json中的window里面设置所有页面的背景色不起作用，同时在页面配置文件.json中设置也不起作用。
解决方案：
app.wxss文件中设置：
page {
}
Ø 授权问题
小程序第一次启动用户拒绝授权后，下一次无法唤起授权弹框，默认记住上一次用户的选择。暂时没有找到解决方法，微信也没有相关解析。
Ø 证书问题
使用request无法请求网络，报错：errMsg: "request: fail ssl hand shake error"
解决方案：
tsl需支持1.2以上，并且手机系统证书中要有其对应的根证书，查看手机证书步骤，设置—>高级设置—>安全—>受信任的凭据
Ø 引用wxss文件问题
在页面中引入模板的wxss文件，必须采用@import引入，且需要以;结尾，否则会出错。
Ø 列表渲染问题
页面中如果使用wx:for列表渲染时，外部使用view组件时只显示一行数据。
例：
<view wx:elif="{{clickType==2}}">
<viewwx:for="{{monthlyIncome}}"wx:key=\'this\'>{{item}}</view>
</view>
解决方案：
使用<block/>标签
例：
<block wx:elif="{{clickType==2}}">
<viewwx:for="{{monthlyIncome}}"wx:key=\'this\'>{{item}}</view>
</block>
三、审核不通过原因收集
· 1、小程序简介没有介绍小程序功能
· 2、类目与页面提供的内容不一致
· 3、小程序提供的服务和内容必须是正式的，不能以测试内容提交，多次以测试内容提交
· 4、含有声音视频内容，请补充相关对应类目
· 5、首页图片与文字有互相重叠，建议优化
· 6、搜索框及少数下才能选中，页面评论点击无响应，页面图片分辨率尺寸失真
· 7、部分图片显示被压缩体检不好
· 8、有账号体系的小程序，除自有登录方式，必须支持微信授权登录
· 9、必须登录才能使用的服务，请提供测试账号
· 10、存在虚拟物品在线交易， ios系统需要走IAP,小程序暂不支付，请留意后续
· 11、小程序服务类目所对应的页面中的核心内容必须与该类目一致。
· 12、必须保证用户在该页面能使用该服务类目，不得隐藏，不得进行多次跳转
· 13、不得展示和推荐第三方小程序。示例：不能做小程序导航，不能做小程序链接互推，小程序排行榜等
· 14、小程序的页面内容中，存在诱导类行为，包括但不限于诱导分享、诱导添加、诱导关注公众号、诱导下载等，要求用户分享、添加、关注或下载后才可操作的程序，含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等的小程序，通过利益诱惑诱导用户分享、传播的小程序，用夸张言语来胁迫、引诱用户分享的小程序，强制或诱导用户添加小程序的，都将会被拒绝；
· 15、禁止视频、音乐、语音等多媒体的自动播放
· 16、如果小程序有账户系统，必须提供能正常使用且易于发现的“退出”账户选项
· 17、小程序内容不能包含赌博、竞猜和抽奖的。
· 18、小程序的页面内容中，不能存在测试类内容；示例：算命，抽签，星座运势等。
注：有其它问题欢迎讨论、交流，共同进步。