微信小程序开发的四十个技术窍门总结(推荐)
前言
微信“小程序”正式上线一周时间,相关话题持续升温。支付宝开发“小程序”的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的“app帝国”了。那么,面对如此炙手可热的小程序,wex5移动开发云也没有闲着,经过全网搜索,为大家筛选出一条小程序开发者的必读文章,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考!
q:为什么脚本内不能使用window等对象
a:页面的脚本逻辑是在jscore中运行,jscore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件
q:为什么 zepto/jquery 无法使用
a:zepto/jquery 会使用到window对象和document对象,所以无法使用。
q:wx.navigateto无法打开页面
a:一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateto
不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectto
q:样式表不支持级联选择器
a:wxss支持以.开始的类选择器。
q:本地资源无法通过 css 获取
a:background-image
:可以使用网络图片,或者 base64,或者使用<image/>标签
q:如何修改窗口的背景色
a:使用 page 标签选择器,可以修改顶层节点的样式
page { display: block; min-height: 100%; background-color: red; }
q:为什么上传不成功
a:为了提升体验流畅度,编译后的代码包大小需小于 1mb ,大于 1mb 的代码包将上传失败。
q:https 请求不成功
a:tls 仅支持 1.2 及以上版本
q:网络请求的 referer
a:网络请求的 referer 是不可以设置的,格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid}
为小程序的 appid
, {version}
为小程序的版本号,版本号为 0 表示为开发版。
q:不能直接操作 page.data
a:避免在直接对 page.data
进行赋值修改,请使用 page.setdata
进行操作才能将数据同步到页面中进行渲染怎么获取用户输入
能够获取用户输入的组件,需要使用组件的属性bindchange将用户的输入内容同步到 appservice。
<input id="myinput" bindchange="bindchange" /><checkbox id="mycheckbox" bindchange="bindchange" /> var inputcontent = {} page({ data: { inputcontent: {} }, bindchange: function(e) { inputcontent[e.currenttarget.id] = e.detail.value } })
q:微信小程序支持fetch或者promise吗?
a:promise工具目前不支持,fetch 客户端不支持 工具下个版本保持统一。
q:touchmove滑动事件里面的currenttarget. id值不变动。
a:ouchmove / touchend 事件的 target / currenttarget 会永远是 touchstart 时的 target / currenttarget 。
q:wx.request的post方法的参数传输服务器接收不到的bug。
a:wx.request post 的 content-type 默认为 ‘application/json
'
如果服务器没有用到 json 解释的话,可以把 content-type
设置回 urlencoded
。
wx.request({ .... method: "post", header: { "content-type": "application/x-www-form-urlencoded" }, ... })
q:wx.uploadfile在手机上返回http码403。
a:安卓的微信升级到6.5.2及其以上版本。
q:小程序svg支持吗?
a:image的src放远程svg可以,background-image
里也可以。
q:wx.request返回statuscode两端类型不一致。
a:确实有这个问题,稍后的版本将会修复。
q:关于组件的动态生成与销毁?
a:不支持动态生成组件,但可以用 wx:for 去渲染多个。
q:小程序支持热更吗?
a:不支持开发者自行更替。
q:一些接口的回调ios和android不一致,例如支付接口,用户取消支付后,ios只回调complete方法,android则回调fail方法,官方文档也没有任何回调说明,造成开发很困难;类似的还有图片选择接口,分享接口等等。
a:支付接口,用户取消支付后,ios只回调complete
方法,android则回调fail
方法,问题已记录,多谢反馈。
q:如果icon已经在服务器上了,想用直接访问网址的方法加载图片进来这样可以吗?
a:不能。
q:ipad不能使用小程序?
a:暂时不支持ipad打开小程序。
q:小程序音频,视频播放器问题 。1、能够只隐藏进度条跟时间吗?2、现在ios平台上的时间显示是0:00,但是android上会显示错误码,能够通过什么设置修改吗?
a:1:下个版本会修改这里的交互,不显示进度条和时间。2:6.5.3 版本已修复此问题。
q:拍照窗口可以加浮层吗?
a:暂时不支持。
q:开发者工具经常报jsenginescripterror错误,会导致页面白屏。
a:移步下载最新 0.12.130400 版本的开发工具试试
q:开发者工具里面,spa页面,更改title无效。
a:wx.setnavigationbartitle
可以通过 api 改变导航栏标题。
q:请问小程序页内支持长按保存图片或分享图片吗?
a:目前没有这个功能。
q:关于swiper中的current问题。如果在新的版本中,直接设current,会产生的效果是:无论从哪个swiper元素点击进去,都会显示swiper第一个子元素的值。
a:目前swiper在处理swiper-item
动态变化的情况时有一些bug,会很快修复的。
q:小程序能引用自己服务器上的wxss和js文件吗?
a:不能,无法执行远程代码。
q:苹果7,提示内部错误,内存占用过多。
a:页面做的预加载,列表中有图片,图片渲染的太多了,解决办法就是不当屏展示的图片,不让它渲染。
q:小程序体验者安卓卡在加载页面进不去,ios可以进去。
a:这是android微信客户端旧版本的bug, 请下载最新版本的 6.5.3 客户端。
q:请问目前微信小程序支持蓝牙吗?
a:目前不支持。
q:分享功能真机没有效果?
a:这是android微信客户端旧版本的bug, 请下载最新版本的 6.5.3 客户端。
q:强制使用https,开发和测试环境下怎么联调和测试?
a:「微信web开发者工具」->「项目」->「开发环境不校验请求域名及tls版本」。
q:wx.showtoast()方法无效。
调用wx.request
请求网络然后在
complete: function (res) { // complete wx.hidetoast(); }
在成功方法里面如果要进行showtoast
的时候感觉无效,并没有弹出提示框。
a:success
回调调用是在 complete
之前的,如果在 success showtoast
,下一步 complete hidetoast
就会被冲掉 showtoast
。
q:picker 组件中的文字大小是否支持修改?
a:不支持修改。
q:tabbar的图片在android和ios上面大小差异太大。
a:这是android微信客户端旧版本的bug, 请下载最新版本的 6.5.3 客户端
q:tabbar 页面返回问题。非首页的tabbar 页面 点击左上角返回箭头时如何返回到小程序首页? 现在是直接退出小程序了
a:创建新页面时用 navigateto 才会新建新页面,同时保留旧页面,如果用 redirectto 是在当前页面内跳转。
q:问下 wx.request() 怎么设置成同步。
a:reqeust是发起网络请求。没有同步接口。
q:最新mac版工具不可用,进来就出现获取appservice 失败。
a:工具设置中选择直接链接网络 。或者 系统中的代理软件设置工具直接链接网络。
q:真机 view overflow-y下滑会很卡。
a:父层需要 position:relative;
加了之后就不卡了。
总结
以上就是干货分享的主要内容,需要提醒的是,小程序本身还在不断调整、修改、完善之中,对陆续发现的bug,也需要进行相应的修复。关心小程序开发的朋友请关注我们,获取最新的小程序开发干货。希望本文的内容对大家的学习或者工作能带来一定的帮助。
上一篇: 有线网卡&无线网卡VS局域网&外网说明