个人小程序笔记 - 持续收录自己一年的小程序开发注意事项

记录小程序常见问题

组件(标签)问题

textarea

表单页面经常遇到ios和andriod表现出来的边距不同问题

Q: textarea自带padding - 多端不统一
wxml: 
<textarea style="{{system=='ios'? 'margin-top: 14rpx;':'margin-top: 28rpx;'}}"></textarea>

js: 
wx.getSystemInfo({
    success: function (res) {
        that.globalData.system = !!~res.system.indexOf('Android') ? 'android' : 'ios';
    }
})

☆ 注意： wx:if和hidden 与 textarea的focus、auto-focus (会有不自动弹起) 还有 ios，android之间的表现形式 结合view组件(标签)处理
wx:if - ios正常隐藏显示自动聚焦
placeholder位置错乱, 穿透弹窗或遮罩层
☆ 尽可能说服产品和ui, 在长表单页面中, 最好不要如下图一样的设计
textarea(②)从超过一屏幕的下方出现, 且页面有提交悬浮块③的设计, 在滚动(①)时会出现textarea内容层级问题.

• 表单一般都是从上而下填写的, 悬浮设计为非必要. 因笔主说不过, 只能麻烦的隐藏显示, ios没事,但安卓切换显示表现不友好.

textarea 在 position:fixed的元素中时要给 textarea 增加属性 fixed：<textarea fixed>

小程序js问题

小程序IOS不支持1970-01-01格式的时间

let time1 = '1970-01-01 11:00:00'; 
// ios需要替换掉'-'改为'/'
mydata = data.replace(/-/g, '/');
console.log("返回时间：" + mydata);

异步请求, onLaunch,onLoad执行问题

由于异步异步, 页面的onLoad的一些内容可能会先于onLaunch的(异步回调)内容执行执行

web-view 有时需要跳转前将参数转义，然后使用前在重新转义

传参

toUrl(event) {
    // 打开页面(只能打开白名单的域名)
    var url = event.target.dataset.url;
    if(!url){
      return;
    }
    url = encodeURIComponent(url);
    url = '/pages/web/web?url=' + url;
    wx.navigateTo({
      url: url
    })
}

收参

onLoad: function (options) {
    // 页面渲染后 执行
    var page = this;
    var url = options.url;
    url = decodeURIComponent(url);
    
    // 页面初始化 options为页面
    var newUrl = "https://www.yugi.com";
    if (url.indexOf('http://yugi.com')>-1){
      url = url.replace('http://yugi.com', newUrl);
    } else if (url.indexOf('http://www.yugi.com')>-1) {
      url = url.replace('http://www.yugi.com', newUrl);
    }
    //isPassArea=1&xcx=1
    if (url.indexOf('isPassArea')<0) {
      url = url +'&isPassArea=1';// 二级域名不过滤
    }
    if (url.indexOf('xcx') < 0) {
      url = url + '&xcx=1';// 小程序标识，如果有需要特殊处理，可以用此判断
    }
    if (url.indexOf('flag=1') < 0) {
      url = url.replace('flag=1','flag=2');
    }
    if (url.indexOf('flag') < 0) {
      url = url + '&flag=2';// 取消一键下载
    }
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      url: url
    }) 
  }