微信小程序开发的四十个技术窍门总结(推荐)


Posted in Javascript onJanuary 23, 2017

前言

微信“小程序”正式上线一周时间,相关话题持续升温。支付宝开发“小程序”的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的“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,也需要进行相应的修复。关心小程序开发的朋友请关注我们,获取最新的小程序开发干货。希望本文的内容对大家的学习或者工作能带来一定的帮助。

Javascript 相关文章推荐
js防止表单重复提交的两种方法
Sep 30 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
Dec 09 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
ajax分页效果(bootstrap模态框)
Jan 23 #Javascript
jquery easyui DataGrid简单示例
Jan 23 #Javascript
浅谈javascript的闭包
Jan 23 #Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 #Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 #Javascript
Node.js Express 框架 POST方法详解
Jan 23 #Javascript
js 颜色选择插件
Jan 23 #Javascript
You might like
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php数组转成json格式的方法
2015/03/09 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
Hutia 的 JS 代码集
2006/10/24 Javascript
jQuery 入门讲解1
2009/04/15 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
python绘制简单彩虹图
2018/11/19 Python
如何获取Python简单for循环索引
2019/11/21 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
python3 简单实现组合设计模式
2020/07/02 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
料理师求职信
2014/01/30 职场文书
安全生产年活动总结
2014/08/29 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014年销售工作总结
2014/12/01 职场文书
生日答谢词
2015/01/05 职场文书
辞职申请书范本
2019/05/20 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
Python 中 Shutil 模块详情
2021/11/11 Python