小程序开发常见问题

Q: new Date(”2020-09-10 12:34:56“).getTime() 获取的时间戳在ios下不正确

A: 时间格式为：2017-12-12 12:00:00在苹果上获取时间戳有兼容性问题  需要转换成2017/12/12 12:00:00  才可以正确获取到时间戳 

new Date(”2020-09-10 12:34:56“.replace(/-/g,'/')).getTime()才可以

Q：在IOS下可滚动的列表页滚动不生效

A:（1）  排查页面配置是否配置了disabledScroll:true （这种情况下安卓下及开发者工具均不能滚动）

    （2） 页面可滚动列表部分的视图是否采用flex布局，flex布局会导致overflow失效，可以更换布局，或者如下设置

      flex布局中，父元素：

 parent:{ display: flex;
   }

      子元素：

 child:{ flex: 1; overflow: auto;
   }

      子元素默认占满父元素；
      子元素内容超过后，没有出现滚动条；

      子元素：

 child:{ flex: 1; overflow: auto; width: 0;//横向需要滚动条的话 height: 0;//纵向需要滚动条的话 }

Q:小程序滚动页面使用scroll-view

A:scroll-view中如果没有使用分页，可以给页面设置scroll-top=值，回到顶部时设置该值为0，但是如果使用分页的清空，设置该值之后，可能造成上拉加载更多后页面反复回到顶部，影响用户体验 【解决办法】不使用scroll-top=0回到顶部的方式，为scroll-view组件添加wx:if=“rerender“，先设置reRender=false再设置reRender=true，让滚动列表重新绘制实现回到顶部

Q:【问题描述】 在iphone7(7plus,6等均可稳定复现)设备当中，小程序跳转某个通用h5页面填写表单登记时，当携带路由和路由跳转参数跳转时，出现h5页面显示白屏，无法正常显示的问题，将链接转发出来，发现浏览器和其他用户均可以正常打开，证明登记页显示正常
A: (1)此种情况首先排查是否是网络问题，注册页面在测试环境中，只能通过内网网络进行访问 (2)之前跳转时，为了在登记后跳转回对应的页面，携带了转json后的路由参数，在转json串后对整个参数部分encodeuri后成功跳转

Q:小程序跳转小程序

A:

• 小程序跳转小程序，官方文档看这里（wx.navigateToMiniProgram(Object object) | 微信开放文档）我的基础库是2.3.0以上的，在用户点击小程序的任意位置的情况下，不支持跳转，2.3.0以下版本自带提示；为了让用户点击一下，曲线救国，在逻辑判断里面添加了modal确认跳转提示框，在确认事件里引入了跳转，多了一步确认，实现用户点击

• 跳转还需要在app.json中配置navigateToMiniProgramAppIdList,可跳转的小程序的id集合，官方文档（小程序配置 | 微信开放文档），否则高版本无法支持

• 示例代码

''wx.showModal({
    title: '提示',
    content: '您已xxx,将跳转至xxxx',
    confirmColor: "#1aad19",//设置确认按钮为绿色
    showCancel: false,//不显示取消按钮
    success: function (sm) {
        wx.navigateToMiniProgram({
            appId: "需要跳转的小程序的appId",
             path: '跳转页面的路径如path/index/index',
             extraData: {//传递的参数
               id: id
             },
             envVersion: "develop",//线上版固定为release，开发为develop，体验版为trial
             success(res) {
               // 打开成功
               console.log("跳转成功");
             }
         });
        }
    })''
 

这个如果跳转成功的话，在开发者工具中就可以得到验证，2.3.0以上会提示将打开xx小程序，是否同意，成功~ 

Q: H5跳回小程序

• 我们需要引用微信的jssdk执行这项操作

• jssdk官方文档请看这里（概述 | 微信开放文档）虽然官方文档提示不进行wx.config无法使用jssdk，实际情况，使用wx.miniProgram的一系列方法只需要引入jssdk就好了，并不需要进行复杂的注册（跳转调用的是navigateTo方法，不需 要注册，不需要注册，不需要注册），如果你需要使用jssdk的其他接口方法，请务必按api进行注册。

• 引入jssdk可以通过script直接引入，也可以通过npm 安装后进行导入，
  script导入：<script type=“text/javascript” src=“https://res.wx.qq.com/open/js/jweixin-1.3.2.js”></script>
  npm 安装后导入（yarn不支持安装，试过了）：（文档看这里weixin-js-sdk - npm）
  安装：npm install weixin-js-sdk;
  使用：vue中导入方式为import wx from “weixin-js-sdk”;引入jssdk * 接下来就可以使用跳转了，
示例代码如下，注意路径一定要有/path/xxx  直接写path/xxx会跳转失败 let path = '/pages/xxx?id=111';wx.miniProgram.navigateTo({url: path});''

Q:小程序中加载H5页面

A:

• 在小程序中加载H5页面需要通过小程序提供的<web-view> （官方文档看这里web-view | 微信开放文档） 主要是在src中绑定相应的H5页面url地址，如https://www.baidu.com这种；

• 注意:在web-view中加载的页面的域名，需要在微信公共平台中配置业务域名，否则会在加载页面时给出非法业务域的安全提示，个人和海外账号暂时不支持 （可参考这篇腾讯官方文档小程序支持内嵌网页文档说明 - 腾讯客服）
  几个注意项需要关注：一个小程序最多配置20个安全业务域名；每个域名最多绑定20个小程序；一年内修改域名的次数不能超过50次（次数这个限制要注意了，所以输入域名的时候一定要谨慎一点)
  添加成功后可以在微信开发者工具中详情信息中的域名信息中进行查看，分为几个分类包括request啊文件上传下载啊各种，建议都添加上，各个分类中相同的域名配置是算作一个的，不用担心在不同分类中配置相同的域名会占用20个业务域名的名额。

• 之后，通过访问你设置的web-view的路由加上?url=encode之后的url就可以访问web-view页面了，不过在开发者工具里面有接口的页面在调试的时候预览存在问题，真机上是ok的。

Q:拨号接口wx.makePhoneCall()或者uni.makePhoneCall(),在安卓上和ios上调用的效果不一样

A:

• 1 安卓会直接调起系统拨号

• 2 ios会先调起一个确认弹窗，确认之后再调起一个确认弹窗，确认之后调起系统拨号

• 所以得判断是不是ios：
  1 如果不是ios，就得手动调起一个确认弹窗，再调用makePhoneCall()

  2 如果是ios，直接调用makePhoneCall()

• 示例

  //点击客服按钮 handleTapContact() { let isIphone = false; try { const res = uni.getSystemInfoSync(); isIphone = res.model.search("iPhone") !== -1; console.log(isIphone); } catch (e) { console.log(e); } if (isIphone) { //iphone直接拨号 uni.makePhoneCall({ phoneNumber: this.phoneNumber, }); } else { //安卓先弹窗后拨号 wx.showActionSheet({ alertText: this.phoneNumber, itemList: ["呼叫"], success: (res) => { if (res && res.tapIndex == 0) { uni.makePhoneCall({ phoneNumber: this.phoneNumber, }); } }, }); } },