AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-01 13:01:59

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:github精选:微信小程序入坑指南
相关的资讯,希望对您有帮助。

github精选:微信小程序入坑指南

本文作者:wxdev,来自githubv0.11.122100微信web开发者工具 - 项目,开启如下选项:开启 ES6 转 ES5开启 上传代码时样式文件自动补全开启 代码压缩上传监听文件变化,自动刷新开发者工具开发环境不校验请求域名以及 ...

本文作者:wxdev,来自github

v0.11.122100

  • 微信web开发者工具 -> 项目,开启如下选项:

    •  开启 ES6 转 ES5
    •  开启 上传代码时样式文件自动补全
    •  开启 代码压缩上传
    •  监听文件变化,自动刷新开发者工具
    •  开发环境不校验请求域名以及 TLS 版本
  • 打包后不能大于 1MB ,没用的文件不要加到你的工程。

  • 只支持 HTTPS 请求,需要在微信公众平台设置安全域名。

  • 资源文件(图片、字体等)尽量使用远程路径减小体积。底部 tab 图标必须是本地路径。建议布局类资源放本地(打开快、体验好),展示类资源放远程(不影响体验)。

  • 建议使用 CSS Flexbox 布局,抛弃浮动布局。

  • 建议使用 rpx 单位代替 rem,会自动以宽度 750px PSD 为标准,自适应不同设备。

    .demo {
        width: 100rpx; /* 图层 100px,就写 100rpx */
    }
  • 不支持后代选择器、子选择器(虽然真机当前版本支持,但是不保证以后支持,不建议使用)。

    .parent .child {} /* 不支持 */
    .parent > .child {} /* 不支持 */

    可以借鉴 CSS BEM 命名法,来尽量避免类名冲突的问题。

  • 真机 background-image 不支持本地路径,只能使用  或者 远程路径

  •  需要设置样式 height 才能撑开,不像 HTML 中的  会自动适应宽高。可以利用 mode 属性来设置图像的缩放模式。

  • 建议使用 ES6 语法进行开发,但是需要自行引入 es6 polyfill,用到什么才引入什么,不要加入无用的代码。

  • 最多只能打开 5 个新页面,需要合理利用 、wx.navigateTo()、wx.redirectTo()、wx.switchTab()、wx.navigateBack()

  • wx.setNavigationBarTitle()、wx.showToast() 等 API,需要在 Page onReady() 生命周期后调用,否则可能会无效。

  • 页面与页面、组件与组件之间通信,可以用一个全局共享的事件对象。

    databus.js

    // 这里用 eventemitter 做示例,也可以选择其它的事件库(eventproxy 等)或者自己实现
    import EventEmitter from path/to/eventemitter
    export default new EventEmitter()

    page-a.js

    import databus from path/to/databus
    // 接收数据
    databus.on(demo, data => console.log(data))

    page-b.js

    import databus from path/to/databus
    // 发送数据
    databus.emit(demo, {hello: world})

40阅读 | 0评论
你的回应
写文章

6931