微信小程序新手教程之官方文档BUG，tip及QA提示

微信小程序新手教程之官方文档BUG，tip及QA提示，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

为了方便大家发现一些注意点，官方文档中最近的一次更新1123版本时，增加了一些提示信息，我现在将这些信息集中一下，以便同学们查看;

特别说明：本bug及tip仅适用于0.10.112301及之前的版本，之后更新的版本请优先对比官方文档;

注册程序：

注意：

App() 必须在 app.js 中注册，且不能注册多个。

不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。

不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成。

通过 getApp() 获取实例之后，不要私自调用生命周期函数。

注意：

直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。

单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

Bug & Tip

bug: iOS/Android 6.3.30, 首次进入页面，如果页面不满一屏时会触发 onReachBottom ，应为只有用户主动上拉才触发;

bug: iOS/Android 6.3.30, 手指上拉，会触发多次 onReachBottom ，应为一次上拉，只触发一次;

模块化

exports 是 module.exports 的一个引用，因此在模块里边随意更改 exports 的指向会造成未知的错误。所以我们更推荐开发者采用module.exports 来暴露模块接口，除非你已经清晰知道这两者的关系。

小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中。

需要注意的是：

这种转换只会帮助开发处理语法上问题，新的 ES6 的 API 例如 Promise 等需要开发者自行引入 Polyfill 或者别的类库。

为了提高代码质量，在开启 ES6 转换功能的情况下，默认启用 javasctipt 严格模式，请参考 "use strict" 。

数据绑定

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

条件渲染

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

事件

注：除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件，如

的submit事件，的input事件，的scroll事件，(详见各个组件)

特殊事件： 中的触摸事件不可冒泡，所以没有 currentTarget。

说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

WXSS

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。 注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

scroll-view

tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

tip: scroll-into-view 的优先级高于 scroll-top

text

除了文本节点以外的其他节点都无法长按选中。

button

注：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

input

bug : 微信版本 6.3.30, focus 属性设置无效;

bug : 微信版本 6.3.30, placeholder 在聚焦时出现重影问题;

tip : input 组件是一个 native 组件，字体是系统字体，所以无法设置 font-family;

tip : 在 input 聚焦期间，避免使用 css 动画;

textarea

bug: 微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误

tip: 请勿在 scroll-view 中使用 textarea 组件

navigator

注：navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子节点背景色应为透明色

image

注：image组件默认宽度300px、高度225px

canvas

canvas 标签默认宽度300px、高度225px

同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

发起请求

bug: 开发者工具 0.10.102800 版本，header 的 content-type 设置异常;

tip: 客户端的 HTTPS TLS 版本为1.2，但 Android 的部分机型还未支持 TLS 1.2，所以请确保 HTTPS 服务器的 TLS 版本支持1.2及以下版本;

tip: 要注意 method 的 value 必须为大写(例如：GET);

tip: url 中不能有端口;

uploadFile

注：文件的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需在主动调用 wx.saveFile，在小程序下次启动时才能访问得到。

saveFile

tip: 本地文件存储的大小限制为 100M

setStorage

注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。

tip: 本地数据存储的大小限制为 5M

openLocation

bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息

showModal

bug: Android 6.3.30，wx.showModal 的返回的 confirm 一直为 true;

navigateTo

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

createAnimation

注意: export 方法每次调用后会清掉之前的动画操作

bug: iOS/Android 6.3.30 通过 step() 分隔动画，只有第一步动画能生效

登录

bug: iOS/Android 6.3.30，在 App.onLaunch 调用 wx.login 会出现异常

模板消息

注意：内部测试阶段，模板消息下发后，在客户端仅能看到由“公众号安全助手”下发的简单通知。能收到该提示，即表明模板消息功能已经调试成功。待该功能正式上线后，将可以展示成上图效果。

下发条件说明

支付

当用户在小程序内完成过支付行为，可允许开发者向用户在7天内推送有限条数的模板消息(1次支付可下发1条，多次支付下发条数独立，互相不影响)

提交表单

当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的，开发者需要向用户提供服务时，可允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条，多次提交下发条数独立，相互不影响)

常用快捷键格式调整

Ctrl+S：保存文件

Ctrl+[， Ctrl+]：代码行缩进

Ctrl+Shift+[， Ctrl+Shift+]：折叠打开代码块

Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行

Shift+Alt+F：代码格式化

Alt+Up，Alt+Down：上下移动一行

Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行

Ctrl+Shift+Enter：在当前行上方插入一行

Ctrl+Shift+F：全局搜索

光标相关

Ctrl+End：移动到文件结尾

Ctrl+Home：移动到文件开头

Ctrl+i：选中当前行

Shift+End：选择从光标到行尾

Shift+Home：选择从行首到光标处

Ctrl+Shift+L：选中所有匹配

Ctrl+D：选中匹配

Ctrl+U：光标回退

界面相关

Ctrl + \：隐藏侧边栏

Ctrl + m: 打开或者隐藏模拟器

微信支付

小程序支付开发步骤：https://pay.weixin.qq.com/wiki/d ... &index=1&t=20161122

官方QA

怎么获取用户输入

能够获取用户输入的组件，需要使用组件的属性bindchange将用户的输入内容同步到 AppService。

varinputContent = {}Page({ data: { inputContent: {} }, bindChange: function(e) { inputContent[e.currentTarget.id] = e.detail.value }})为什么脚本内不能使用window等对象

页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件

为什么 zepto/jquery 无法使用

zepto/jquery 会使用到window对象和document对象，所以无法使用。

wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

样式表不支持级联选择器

WXSS支持以.开始的类选择器。如：

.normal_view { color: #000000; padding: 10px;}

可以使用标签选择器，控制同一类组件的样式。如：使用input标签选择器控制的默认样式。

input { width: 100px;}本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用

标签

如何修改窗口的背景色

使用 page 标签选择器，可以修改顶层节点的样式

page { display: block; min-height: 100%; background-color: red;}为什么上传不成功

为了提升体验流畅度，编译后的代码包大小需小于 1MB ，大于 1MB 的代码包将上传失败。

HTTPS 请求不成功

tls 仅支持 1.2 及以上版本

网络请求的 referer

网络请求的 referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版。

嗨图功能

1、专题——DIY图片的模板，点击可以生成使用，分享到朋友圈。

2、分享墙——用户上传的自己DIY作品。

3、立即制作——可以用自己的图来DIY。

4、告诉我——告诉产品的改进，内容的增加。

想要体验怎么制作属于自己个性朋友圈照片的用户，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!