小程序模板网

github精选:微信小程序常见问题

1. 微信小程序JS为什么无法使用 document,window 等。

由于小程序开发框架的逻辑层并非运行在浏览器环境中,而是运行在App Service Thread中,视图层View运行在View Thread,由Webview实现渲染,两者之间通过JSBridge实现通信。

下图说明了 Page 实例的生命周期。

2. 为什么在微信开发者工具中正常,但是在真机中调试却异常,如样式异常,es6语法报错?

首先,需要明确小程序目前可运行于各不相同的三端:

  1. 在 iOS 上,小程序的 Javascript 代码是运行在 JavaScriptCore 中,视图层是由 WKWebView 来渲染的,环境有 iOS8、iOS9、iOS10
  2. 在 Android 上,小程序的 javascript 代码是通过 X5 JSCore 来解析,视图层是由 X5 基于 Mobile Chrome 37 内核来渲染的
  3. 在 开发工具上, 小程序的 javascript 代码是运行在 nwjs (U 升级 nwjs 到 19.4 版本, 更新至 Chrome55 内核)中,视图层是由 Chrome Webview 来渲染的;

尽管三端的环境是十分相似的,但是还是有些许区别:

  1. ES6 语法支持不一致 语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。
  2. ES6 API 支持不一致 考虑到代码包大小的限制,API 上目前需要开发者自行引入相关的类库来进行处理,可以通过 caniuse 或者 X5兼容 查询到相关 API 的支持情况
  3. wxss 渲染表现不一致 尽管可以通过开启样式补全来规避大部分的问题,还是建议开发者需要在 iOS 和 Android 上检查小程序的真实表现。

运行时环境的差异导致各种诡异的问题,所以一切调试应以真机为准;

3. 微信小程序的组件是否都是原生实现的,类似React Native?

No,小程序视图层仍然依赖于Webview,只有部分组件是原生组件,用来解决Mobile Web体验问题。目前原生组件包括:input,textarea,video,map,canvas

tip: input 组件是一个 native 组件,字体是系统字体,所以无法设置 font-family;
tip: textarea 组件是由客户端创建的原生组件,它的层级是最高的。
tip: video 组件是由客户端创建的原生组件,它的层级是最高的。
tip: map 组件是由客户端创建的原生组件,它的层级是最高的。
tip: canvas 组件是由客户端创建的原生组件,它的层级是最高的。

而其它组件都是基于Web Component规范实现的Custom Element,而诸如picker弹出选择器行为,navigator跳转行为,都是基于微信原生提供的能力,理解为调用wx.xxxApi

4. 其他

控制台常见的警告信息处理

意思很明显,就是说,你在绑定数据数据时候,尤其在用wx:for循环时,你可以给元素添加wx:key="属性名",通过这种方式,来提高小程序的性能。�



本文地址:https://www.eyoucms.com/wxmini/doc/course/23338.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询