微信小程序爬坑之路

最近一个多月断断续续的写了个小程序,就记录下之前遇到过的坑。
首先放一个微信小程序爬坑的一个查询网站:http://www.wxapp-union.com,这里挺多的问题都能找到,我也差不多都是这里看到

1.关于微信https的问题
微信在接口的调试上限制挺多的,在模拟器上调试的话把开发者工具详情里的不校验Https勾上,那么非https的地址确实可以访问了,但是在真机上测试的话,需要在右上角的三个点里把调试工具打开再重新打开项目才会有数据接入,否则的话是没有效果的,
webview的话那就必须是真实环境的调试,因为公司一般会有一个或多个https的域名,那么测试只能在这个上面进行,比如一些详情页和小程序的交互;注意在一些外部链接放入的话会有一些问题。

2.关于用户授权的问题
在小程序之前的版本里,询问授权的api是可以直接发起的,而之后官方在这个api上做了修改,导致我一度以为是我自己调用的方法不对,具体可以去官方的文档查询wx.getUserInfo,然后去社区可以看看相应的问题。基本上在第一次的时候要用Button组件设置属性open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo",前面是设置成发起授权的属性,后面是回调,官方觉得可能直接问用户要权限显的不是非常友好,也能理解;
所以基本上都会是一个授权按钮页面,或者你可以说是绑定之前的账号或者,可以放一个红包页面,然后提示用户授权登录即可领取红包,我暂时用的是单独一个绑定页面让用户去授权并绑定我们平台对应的账号,。。对。。。因为我们是要通过unionId来同步以前已经注册过的用户的相关资料。这里的绑定的问题来稍微说明一下:
首先你要通过wx.login来获取用户的code(一般传给后端消费一次就要重新调用来使用),这个不用授权,登录就有,然后传给后台,他会给你自己平台的校验token什么的,具体要和后端讨论,然后获取回来后就能通过token来确定用户的相关信息了。
还有就是授权设置界面是能通过wx.openSetting来跳转,不过快要废掉了,也要用button组件来发起了,可以先通过wx.getSetting来查看用户给来哪些权限。

3.微信是不支持div这些标签的,虽然div放进去也不会报错,但是最好不要用。。其实小程序的布局感觉借鉴好多框架的,,至少rn使用view,text等。。
我一般会在app.wxss里放入view==》

box-sizing: border-box;
  word-break: break-all;

/* 防止纯数字不换行 */
来把盒子模式自己设置过,还有就是如果是纯数字微信默认是不换行的,所以就自己加一个,可以把统一的样式放入这个文件。

我公司是做电商的,商品详情的很多图肯定都是Html格式的,,我推荐用wxParse,好使,简单,无脑,直接放入项目,他有个Icon的文件好像,我删掉了,太大了

微信不支持Dom操作,可以通过下面这个api去操作:这个是例子,具体去文档看
wx.createSelectorQuery()

4.tabBar的设置。。
你可以选择自己写,如果想偷懒那么就直接用他的,也挺方便的,就是要注意图片的路径什么的,;
关于头部的东西,,我是不怎么推荐自己写,挺麻烦的,当然闲的话可以自己写,把navigationStyle设置成custom 模式就能隐藏默认的头(全局的),注意三个点和圈是还在的,我看贝贝都是自己写的;不支持渐变!!!!!

5.微信不支持想vue一样的管道过滤器,所以只能自己写方法,在数据获取后自己过滤,要先过滤在set进去,一般在untils里加入个时间过滤方法或者其他什么的

6.关于webview的用法,就直接好了。要穿什么参数么,在onload里的options自己处理嘛

7.关于一些自己写的浮层弹窗
小程序不支持就是类似boot那种在body里可以加内容的组件,官方回复是自己写咯。。。自己写的话,如果你的弹窗出现后,弹窗盖住的页面依旧能够滚动的,所以我建议是吧下面的东西用scroll-view包住,如果弹窗出现,那么scroll-y什么的设置成false,弹窗现实再设置成true,注意,,用了scroll-view,那么在json文件里最好把disableScroll设置成true。

8.请求的方法request最好统一封装一个,否则要修改就听麻烦的,放一个我写的:有点垃圾,不过能用至少,哈哈

var baseUrl = getApp().globalData.apiBaseUrl;
function ajaxFetch(url, data, type) {
  let sendObj = data || {};
  let tmp = Date.parse(new Date()).toString().substr(0, 10);
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      data: sendObj,
      header: {
        'FYH-App-Key': '',
        'accept-Language': 'zh_CN',
        'FYH-Session-Id': wx.getStorageSync('sessionId'),
        'content-type': 'application/x-www-form-urlencoded',
        'FYH-App-Timestamp': tmp
      },
      method: type,
      success: function (res) {
        if (res.statusCode == 302) {
       // 这里是校验凭证过去
        } else {
          resolve(res);
        }
      },
      fail: function (err) {
        reject(err)
      }
    })
  })
}
module.exports = {
  get: (url, data) => {
    return ajaxFetch(url, data, 'GET')
  },
  post: (url, data) => {
    return ajaxFetch(url, data, 'POST')
  }
}
// 调用方法
var fetch = require("../../utils/fetch.js");// 先引入
 fetch.get(url).then((res) => {
 }).catch((err) => {
 })
fetch.post(url, obj).then((res) => {
}).catch((err) => {
})

对对对,,可以用。。
9.关于wx.uploadFile(OBJECT)
Fuker,传图片的地方我暂时只能一张一张传,不会批量传。。有点坑的,Loading能好久,如果网速差一点就超时了,,目前我就传的是压缩图,然后规定了最多5张,递归传嘛,还有就是如果还要传参数,要注意编码问题,还有就是返回的字段要先调用JSON.parse(res);

10.关于生成小程序码进入对应的页面。。。//先贴个生成小程序菊花码的地址:https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html
里面有对应path的字段,要后端去批量生成,然后我们前端需要
var id = decodeURIComponent(options.scene);获取对应id
options.scene是生成小程序码的参数
其实主要是小程序的扫一扫二维码匹配规则的地方只有5条的限制才去搞这个小程序码的,,
这里还有就是我把商品图片和小程序码合成一张图。。
这里会涉及canvas,我就提一点,其他都没啥大问题,文档也说的挺详细的,就是网络图片地址不能直接放入canvas,不然读不出来的。。要先调用 wx.getImageInfo来获取具体Path然后在绘制

11.关于Input没有类似v-model的功能,

wxModel(e) {
    let nowData = e.currentTarget.dataset.model;
    var temData = {};
    temData[nowData] = e.detail.value;
    this.setData(temData)
  }

自己写一个双向绑定的咯。。小程序的set数据是同步更新的,不过能在setData的后面加回调,保证数据渲染了再去执行你想执行的东西

example:
this.setData({
  obj:obj
},()=>{
// do something
})

12.关于textarea组件,都不想吐槽了,,一直这样,官方也没有优化,估计就是你爱用就用,不爱拉倒咯。。
其他功能其实也都差不多,不过有几点我真的烦
一.各种样式无法调整,边距大小什么的,
二.对应的层级是最高的,如果一个页面里有textarea组件,还有自己的弹框,,那么问题就来了,你的textarea会完全盖过你的弹框,无论怎么设置z-index都没有用,还有就是如果把他设置成disable为true,模拟器上没啥问题,,真机上依旧如此
我的建议是,,,最好不要用啊。。贼烦

13.关于input的一个坑
password的属性如果来回切换的话会出现无法选中Input的情况,并且第一次成功切换的话也会出现闪现,效果并不是很好,不建议使用这个,社区也问了,至今没有解决,如果有的就留个言,谢谢啦~~~

14关于支付方面的
有坑的地方就是,刚接触的时候不用看下面注意事项,,因为其实根本不会有那么多手机给你测试,用户取消支付触发失败就是fail的里面调用,complete里的回调最好不要用。。我自己碰到的贼菜哈哈,
还有就是wx.requestPayment的参数问题。
其实各种参数都需要后端去走公共支付接口获取,前端只要通过接口把订单ID告诉后端就好了,,注意,,消费一次就要重新获取哦

15.关于数据默认为true后又要设置成false的情况,一些数据是要异步数据设置,会出现如果有,但是会闪一下,最好先都是false,在去设置对应的显示效果

16,关于数据设置顺序的问题,首先setData的都是同步发生的,并没有所谓的异步,有的回调也只是监听他渲染结束的一个动作,如果是一个数组的,最好是先concat()一个数组在去操作,最后在赋值回来,这个不想vue一想更新之后能自动更新,没有数据监听的概念。

17,关于图片背景
如果有些场景要用图片,要么就是用Image,要么就是背景图把图片转成base64位的情况,如果把大图放入背景图,那么又出问题。千万====一定要闭合!!!(///////)这个东西

18.关于提交审核的问题
我前几次没有涉及到钱的版本,基本上2-3个小时就过了,,这次加了个我的资产,,就单显示了一个数据,,审核居然2天。。
所以,最好不要有金额方面的东西。

19.登录绑定的测试基本都是在真实环境,用自己号多次几次吧~~

20.小程序view组件无法是被\n或者后台返回的↵字符串,只能使用text组件

21.最近换了个安卓机,发现以前一直用Oppo vivo测,并没有拿华为测试,有个小毛病,就华为上有,如果一个父div下子div右浮动并且里面包含了Input,那么这个定位会跑走,清除浮动也没有用,最后都改成后边有输入用absolute解决的。一直没发现,老板没看到还好,不然要被扣工资了

22.今天朋友给我发了个奇怪的bug


微信小程序爬坑之路_第1张图片
36584245750271665.png

社区里也有碰到自定义组件在某些版本里出现问题,目前我还没想到啥解决办法,先记录下,等知道方法了在更

你可能感兴趣的:(微信小程序爬坑之路)