一、编写目的

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

二、问题总结

Ø  函数重复

    当有两个方法重名时，位于后面的方法会覆盖前面的方法， 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、小程序的页面内容中，不能存在测试类内容；示例：算命，抽签，星座运势等。

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