微信小程序入坑

发表于 | 分类于
本文字数： 2.7k | 阅读时长 ≈ 5 分钟

中国人的性情是总喜欢调和折中的，譬如你说，这屋子太暗，须在这里开一个窗，大家一定不允许的。但如果你主张拆掉屋顶他们就来调和，愿意开窗了。

–鲁迅《无声的中国》

前言

  • 微信小程序实质上还是前端的网页的一套东西，腾讯基于浏览器内核封装了一部分常用功能和接口并提供出Api供开发者调用。
  • 微信小程序的三种文件类型和前端开发的对应关系：
    • wxml => html
    • wxss => css
    • js => js

优点 VS 不足

优点

  • 入门简单，封装了一大部分的常用的功能，如果有前端开发经验，一些前端的知识同样适用。
  • 与微信对接，有微信庞大的日活用户。
  • 入口比较多，用户安装使用门槛比较低，用完即走。
  • 针对不懂的系统和手机型号适配相对比较简单（跨平台？）。

不足

  • 安装包限制2M大小，只能做轻量级小程序。
  • 一部分前端的东西是不适用小程序的，虽然入门简单，但是还是要学一部分微信封装的东西和一部分前端的知识。
  • 开发工具真的是一坨屎，基本上连最基本的语法提示都做不到，完全考验记忆和英文水平，或者要不停的查文档。
  • 对网络要求比较高，因为安装包大小限制决定了所有的数据必须走网络，如果网络不太好或者手机配置烂，绝对是噩梦的体验。

注意点

  • 由于我是做iOS开发的，研究小程序也就一个多星期，可能对于很多特性和使用方法不是很正确，如有不当请指出。

引用

  • 遇到一个功能总是想重构封装一下，以便复用，如网络请求模块，蓝牙模块等等；
  • 之前在实现蓝牙数据交互的时候，将蓝牙连接，蓝牙数据按协议组装、蓝牙指令派发及数据解析完成回调、蓝牙数据解析、蓝牙验证等等功能抽成不同的模块在封装在js文件中，在外部引用的时候遇到了问题：
    • 小程序require（‘相对/路径/功能.js’）必须是相对目录 无法引用绝对路径；官方说是历史包袱无法解决🌚
    • 几种目录的区别：
      • / 根目录
      • ./ 当前目录
      • ../父级目录

枚举类型

  • js是一种弱类型语言，是没有枚举类型的，如果想使用枚举类型，如定义蓝牙相关的指令，可以使用json数据格式来实现枚举的功能：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if (typeof BLECommand == "undefined") {
  var BLECommand = {
    // authorization
    GetRandomDigit: 0x00, /** 向设备获取随机数 */
    AuthorizationAL1: 0x01, /** Rand + 设备序列号 生成Key1 */

    EnterOTA: 0x02, /** OTA模式 */

    DeviceBLEVersionInfo: 0x03, /** 版本信息 */

    Read_Info: 0x05,
    Write_Info: 0x06,

    NoValidation: 0x07, /** 测试指令 不需要根据协议解析 */
  }
}
  • 使用也比较简单，直接在需要引用的界面引入
1
const BLEConfig = require('/pages/bluetooth/helper/ble-config.js')
  • 按照正常的枚举类型方式使用即可
1
2
console.log('GetRandomDigit ---' + BLEConfig.BLECommand.GetRandomDigit) // 0
console.log('AuthorizationAL1 ---' + BLEConfig.BLECommand.AuthorizationAL1) // 1

页面跳转

  • navigateTo保留当前页面，跳转到新的页面，注意，如果项目架构是有tabBar的，那么跳转的新页面是不能已经划分到tabBar list的页面。
  • redirectTo将当前页面移除，替换为新的页面。
  • switchTab用于在tabBar页面中跳转，注意，加入app启动默认是授权或者介绍页面，此时没有显示tabBar，那么在进入到tabBar主界面时候需要使用switchTab才可以；之前使用navigateTo被坑死了。

标签

  • 使用view标签，占一行，而text标签占用文字内容宽度 类似于span标签。

间距

  • margin和padding的设置方向相同

  • 如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

    • margin: 20rpx 10rpx 25rpx 10rpx
  • 如果只提供一个，将用于全部的四边。
    • margin：20rpx
  • 如果提供两个，第一个用于上、下，第二个用于左、右。
    • margin：20rpx 20rpx
  • 如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
    • margin：20rpx 20rpx 10rpx

函数作用域问题

1
2
3
4
5
6
7
8
outerMethod() {
    let that = this
    innerMethod({
      success: function (res) {
        that.xxx()
      },
    })
  },
  • 如果函数使用上面这种嵌套形式，要在内部要使用this，因为作用域的问题，需要在外部保留let that = this，
  • 但是我们以另一种方式实现
1
2
3
4
5
6
7
outerMethod() {
    innerMethod({
      success: (res) => {
        this.xxx()
      },
    })
  },

swiper

  • 使用swiper实现轮播图展览时候，如果想自定义swiper上面显示的页码指示的样式，则swiper中不要配置 indicator-dots，否则会显示默认样式。

隐藏Scroll View 的滚动条

  • 如果我们想隐藏Scroll View 的滚动条，可以配置如下：
1
2
3
4
5
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

总结

  • 总来来说，对于项目不是要求很高，用户体验要求也不是非常高，而且不想投入比较大的人力物力去开发的情况下，小程序也是一个比较好的选择；
  • 但是小程序毕竟是小程序，缺点也同样明显，最终需要根据实际情况选择。
要不要鼓励一下😘