• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之跳坑指南

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信小程序之跳坑指南    

    

一、编写目的

      本文档旨在说明本人在开发小程序时遇到的一些问题,对最近接触的小程序开发做出一些总结。以便以后查看并解决问题,也为和其它小程序开发者共同交流探讨。

二、问题总结

Ø  函数重复

    当有两个方法重名时,位于后面的方法会覆盖前面的方法, 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上面加一个属性id="需要得到的值"

例:

<viewbindtap=\'djLouPan\'id=\'{{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.id==1}}"

Ø  页面跳转方法解析

    页面各个跳转方法解析

      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\'style="line-height:80rpx;text-align:center;">{{item}}</view>

     </view>

解决方案:

         使用<block/>标签

例:

    <block  wx:elif="{{clickType==2}}">

         <viewwx:for="{{monthlyIncome}}"wx:key=\'this\'style="line-height:80rpx;text-align:center;">{{item}}</view>

    </block>

三、审核不通过原因收集

·        1、小程序简介没有介绍小程序功能

·        2、类目与页面提供的内容不一致

·        3、小程序提供的服务和内容必须是正式的,不能以测试内容提交,多次以测试内容提交

·        4、含有声音视频内容,请补充相关对应类目

·        5、首页图片与文字有互相重叠,建议优化

·        6、搜索框及少数下才能选中,页面评论点击无响应,页面图片分辨率尺寸失真

·        7、部分图片显示被压缩体检不好

·        8、有账号体系的小程序,除自有登录方式,必须支持微信授权登录

·        9、必须登录才能使用的服务,请提供测试账号

·        10、存在虚拟物品在线交易, ios系统需要走IAP,小程序暂不支付,请留意后续

·        11、小程序服务类目所对应的页面中的核心内容必须与该类目一致。

·        12、必须保证用户在该页面能使用该服务类目,不得隐藏,不得进行多次跳转

·        13、不得展示和推荐第三方小程序。示例:不能做小程序导航,不能做小程序链接互推,小程序排行榜等

·        14、小程序的页面内容中,存在诱导类行为,包括但不限于诱导分享、诱导添加、诱导关注公众号、诱导下载等,要求用户分享、添加、关注或下载后才可操作的程序,含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等的小程序,通过利益诱惑诱导用户分享、传播的小程序,用夸张言语来胁迫、引诱用户分享的小程序,强制或诱导用户添加小程序的,都将会被拒绝;

·        15、禁止视频、音乐、语音等多媒体的自动播放

·        16、如果小程序有账户系统,必须提供能正常使用且易于发现的“退出”账户选项

·        17、小程序内容不能包含赌博、竞猜和抽奖的。

·        18、小程序的页面内容中,不能存在测试类内容;示例:算命,抽签,星座运势等。

 注:有其它问题欢迎讨论、交流,共同进步。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
2020年启蒙及小学识字练字APP或小程序测评榜 - honglelvle发布时间:2022-07-18
下一篇:
小程序源码下载[demo整理自github]发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap