微信小程序

[qingfengmy]

微信小程序文档 微信小程序社区 微信小程序开放平台-代小程序实现业务 微信支付开发文档

[qingfengmy]

ios不支持webp格式的图片

因为ios不支持，所以小程序在ios端也不支持，注意有些图片是 图片服务器返回的，你保存下来是png格式，但因为链接里带webp，就是webp的图片，这个问题很坑。 参考地址：https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=fd379c10cc80e3317800ba4d029539bd&highline=webp&token=&lang=zh_CN

[qingfengmy]

get请求带汉字问题

get请求带汉字，需要先进行url编码，后台接到参数后再url解码。 （这个问题只在vivo和oppo手机上出现过，get请求，C端未编码，后台收到的是乱码）

如果是post请求则没有这个问题。另外，header.contentType设置为'application/json'时，会对数据进行json序列化。设置为'application/x-www-form-urlencoded'会将数据转为query string。对java而言，get请求的参数也是query string的，这样他们可以通用处理get和post请求。

[qingfengmy]

path带参数为undefined的问题

有时候我们从当前页带参数到下一个页面，如果参数id为undefined，那么下一个页面options.id就是字符串‘undefined’，此时用if去判断，它是true。这个很坑。解决方式是url编码再传，或者再传之前处理undefined问题。

[qingfengmy]

tab上的path删掉后已分享出去的tab页面如何展示？

比如tab\cart分享出去，然后把tab上的cart页面删掉，此时点击已分享出去的tab\cart，cart页面会以一般的page展示，也就是说只要配在pages里面，他就有页面展示，如果配在tabBar上则在tabBar上展示。

[qingfengmy]

data-areanum

区号字段，字段定义为驼峰式areaNum

<view data-areaNum="010" bindtap="handleTap" />

handleTap(e){
  // e.currentTarget.dataset.areanum 有值为010
  // e.currentTarget.dataset.areaNum 没值为undefined
}

看到了什么，在data-自定义属性时，驼峰式不识别。

html标签属性中是-连接式；js中使用驼峰式

[qingfengmy]

小程序自定义组件的properties

properties中的数据和data中的数据都会统一放在data中，通过setData修改。

properties中的数据，和react不同，是可以改的。通过setData修改。

observer是再properties的字段改变时的回调，不设置observer，父组件的字段改变，子组件properties也会跟着改，然后刷新页面。

相比而言，observer的用处是有新值和旧值，可以做其他处理。

其他：properties的字段名用驼峰如myName，wxml中组件props传值用my-name，setData也用驼峰。

[qingfengmy]

options和JSON.stringify的问题

// 第一个页面
const data = {name:'michael',age:15};
 wx.navigateTo({
   url: '/pages/second/index?status=1&data='+JSON.stringify(data),
 })

// 第二个页面
onLoad: function (options) {
    console.log('---options--',options);
    const status = options.status;
    const data = JSON.parse(options.data);
    console.log('--options--',status,data);
}

这样是没问题的，最后打印的是

--options-- 1 {name: "michael", age: 15}

但如果name中有&的符号，就会出错，本质原因是&出现在了url的query中。

// 第一个页面
const data = { name: 'a&b', age: 15 };
wx.navigateTo({
  url: '/pages/services/order_create/index?status=1&data=' + JSON.stringify(data),
})

// 第二个页面 同上

结果报错，options中的对象就已经错了，如下：

{status: "1", data: "{"name":"a", b","age":15}: "undefined"}

解决这个问题，就需要使用url编码。js的url编解码如下：

// 编码
encodeURIComponent(JSON.stringify(obj));
// 解码
return JSON.parse(decodeURIComponent(str));

[qingfengmy]

苹果手机video播放视频卡顿绿屏问题

官方回答：加个custom-cache="{{false}}"属性，但文档中没有该属性。

参考地址：https://developers.weixin.qq.com/search?action=list&t=search/index&search_type=1&key=custom-cache&token=&lang=zh_CN

[qingfengmy]

ios不支持new Date('2017-11-17 12:20:00')的问题

// 不支持
const date = new Date('2017-11-17 12:20:00');
// 支持
const date1 = new Date('2017/11/17 12:20:00');

解决方式：

    var reg = getRegExp("-", "g")
    var newDate = date.replace(reg, '/')

参考地址：https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=c148160d9d7f24b7e8271778de57864b&highline=Date&token=&lang=zh_CN

[qingfengmy]

页面中操作组件

this.selectAllComponents()
this.selectComponent('#abc');

[qingfengmy]

弹窗，事件穿透问题

1. catch: touchmove，只针对view和view，catch后无法再滚动，小程序也没有提供调用系统默认滚动的方式。如：e.defaultEvent();

2. 如果加入了scrollview，则即使父组件catch，子组件因为在scrollview中，也可滚动，但有穿透问题，父组件在一定情况下，还会滚动，这是小程序bug问题。

3. 弹窗问题，弹窗因为是view，无法遮住原生组件，如video等。

4. css解决该类问题是，弹窗出现时，后面的滚动页面要设为overflow:hidden

[qingfengmy]

微信tap事件重复点击

https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=e2ccfd86e8a405549c4353ddbd8f3875&highline=tap%E9%87%8D%E5%A4%8D

const diff = e.timeStamp - parseInt(this.lastTime||0)
this.lastTime = e.timeStamp
const { showTotal } = this.data
if (diff < 500) {
   return
}

[qingfengmy]

px2rpx

  function rpx2px(rpx, sw) {
    console.log('sw', sw)
    return sw / 375 / 2 * rpx
  }

  function px2rpx(px, sw) {
    return 375 / sw * 2 * px
  }

[qingfengmy]

Please do not register multiple Pages in undefined.js

小程序会在加载时，会遍历所有js文件，把Page({})注入到页面，并且和app.json中的路径去比对。

如果js中有Page()而json中没有配置，会报如上错误，重复注册。json中的路径提供了路径唯一性。

如果json中有，而相应路径没有Page()，则会提示

未找到 app.json 中的定义的 pages "pages/xxx" 对应的 WXML 文件

[qingfengmy]

微信小程序启动流程

https://juejin.im/post/5afaaef4f265da0b8336e6c3?utm_source=gold_browser_extension

[qingfengmy]

const {index} = e.currentTarget.dataset
this.setData({[`list[${index}].hasOpen`]: true})