/mp-wangwang

小程序入门学习项目

Primary LanguageJavaScript

小程序——旺旺

自己学习小程序的代码,加了一些注释,仅供参考

cms文件在wangwang-cms中,记得进入文件夹下载模块包,还有在config.js中写入自己的appid和secret,以及修改所有的云开发环境为自己的

一些小点

  1. 数据库

    • 用云开发的数据库时,记得要设置权限管理,否则很容易出现读不到别人数据的情况;
    • 而数据库的最高权限也只是读取所有的,修改自己的,如果需要修改别人的,就只能通过云函数来调用了。云函数可以写得通用,供多次调用
  2. 云函数

    • 云函数修改一次就要重新上传一次,否则还是原来的
    • 在云函数中取数据库,不是wx.cloud.database(),而是直接cloud.database()
    • db.command是数据库操作符,一般用_命名,有很多很多,看文档选择适用需求的
      • 这里用到了——
      • inc更新操作符:用于字段自增
      • geoNear地理位置操作符:按从近到远的顺序,找出字段值在给定点的附近的记录
      • unshift数组的更新操作符:将值插入到数组头部
  3. eval()

    • 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
    • 这里用于动态调用云函数时,传入的参数需要调用数据库操作符,但是不能在代码运行就调用,而要将调用函数以字符串形式传过去,云函数中用eval解析再调用
  4. 自定义组件

    • 创建组件后,需要在使用的页面的json文件中配置引入才能生效
    • 组件的样式有间隔,一般来说组件和页面的样式互不影响,但是可以在options中设置styleIsolation的值,这里设为了apply-shared,页面的样式能够影响组件的样式(这样就能应用iconfont了),但是组件样式对页面不影响
    • 组件间通信,一般来说(具体看文档,很详细)
      • 页面-组件就是直接传就好了,和react、vue差不多,得到的数据写在properties中声明就好;
      • 组件-页面,那就是监听事件,页面定义事件,然后组件通过triggerEvent方法触发事件,并可传参数给页面
    • 组件生命周期,一般三个created attached detached,常用后两个
      • created 组件实例刚刚创建好后触发,此时不能调用setData,赋值只能在实例this中
      • attached 组件全部初始化完毕,进入页面节点树之后触发,绝大多数初始化工作在此进行
      • detached 组件离开页面节点树后触发
  5. 数据库的监听watch

    • 用watch监听集合中符合查询条件的数据的更新事件(不支持field)
    • 两个参数,都是函数都必传,onChange和onError,onChange得到snapshot为变更快照
  6. 数据库的地理位置

    • 我们想以某个点为圆心获取到半径为一定范围内的用户——两个方法,一是获取到数据库所有用户,对符合条件的用户数组筛选后展现;二是利用数据库的操作符geoNear:按从近到远的顺序,找出字段值在给定点的附近的记录
    • 这里采用的是geoNear,其中必填参数是geometry,类型为GeoPoint地理位置点;maxDistance(最大距离)和minDistance(最小距离)选填
    • GeoPoint由longitude(经度)和latitude(纬度)组成,通过Geo.Point(longitude: number, latitude: number)方法构造
    • 文档写有“如存储地理位置信息的字段有被查询的需求,务必对字段建立地理位置索引”,所以我们需要在users的集合-索引管理-添加索引-添加名称和字段(字段是存储和搜索的字段名),非唯一,目的是提高效率,在搜索量大时加索引的速度会快很多,但是并不影响我们查询使用的方式
  7. 遮罩

    • 与教程不同,在搜索页做了个小小的优化,就是加了遮罩——用遮罩替代原本的整个包含块的背景颜色,开绝对定位,然后层级最低,那么就可以达到点击其他区域触发取消的效果了

待优化的点

  1. 能否保持在message界面时,就能获取到最新的messageList,而不是只在再次进入该界面才获取,能不能写个监听器

    • 监听app的变化(因为小程序没有相关api就没有尝试,想法上其实是可以自己写个监听器的,有兴趣可以试试)
    • 直接在message中再次开启数据库的监听(这个最简单了,但是不知道会对性能有没有影响)
  2. wx.showTabBarRedDot()非tabBar页面调用,返回不显示问题——小程序社区有相关提问,但是还没有解决

    • 这里体现在若是在detail,edit等无tabBar的页面上收到消息,调用了wx.showTabBarRedDot()会报错,而且小红点不显示