微信小程序爬坑之路

最近一个多月断断续续的写了个小程序,就记录下之前遇到过的坑。
首先放一个微信小程序爬坑的一个查询网站: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的用法,就直接<web-view src="{{url}}"></web-view>好了。要穿什么参数么,在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位的情况,如果把大图放入背景图,那么又出问题。千万====<image src=""/>一定要闭合!!!(///////)这个东西

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

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

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

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

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


36584245750271665.png

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,099评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,828评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,540评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,848评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,971评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,132评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,193评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,934评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,376评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,687评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,846评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,537评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,175评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,887评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,134评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,674评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,741评论 2 351

推荐阅读更多精彩内容

  • 微信小程序在无论在功能、文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们...
    未央大佬阅读 2,297评论 0 12
  • 写在前面 微信小程序出来也蛮久了,经过了市场的考验,已经站稳脚跟,融入到了各行各业,市场需求激增打来的是开发人员的...
    月梦佳期阅读 1,684评论 1 1
  • 转载链接 注:本文转载知乎上的回答 作者:初雪 链接:https://www.zhihu.com/question...
    pengshuangta阅读 28,514评论 9 295
  • 每一样你所渴望的事物,我也同样渴望过。 玛格丽特.阿特伍德 从十七岁开始,她每天在眼皮和卧蚕处打三种不同颜色的眼影...
    沙河早德阅读 306评论 0 0
  • 在旅行途中,与夕阳的剪影照片总是显得很富有诗意,给人感觉充满了遐想的空间。今天就教大家一点拍摄夕阳人像剪影的小技巧...
    高鑫丽阅读 752评论 0 2