小程序开发的 40 个技术窍门

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