Fork me on GitHub

中秋佳节到了，来一起开发一个千里共婵娟XR小程序

字数统计: 555字   |   阅读时长≈ 1分

背景

掘金最近上了一个活动，用来庆祝中秋佳节，想薅羊毛获取奖品，因此突发奇想顺便给自己的技术领域扩展一下，之前对VR、AR技术感兴趣，干脆趁这这个机会去尝试开发一个XR小程序。

涉及知识点：

  1. 小程序XR-Frame框架
  2. 小程序云函数
  3. 天气 API
  4. 地理位置 API

方案设计

产品设计

  • 目标用户：对AR技术感兴趣的开发同学
  • 作用：利用AR给大家营造一种中秋气氛感觉

整体功能设计如下：

  1. 通过小程序进来后，获取当前位置坐标，转换成具体的地址，然后获取天气
  2. 打开摄像头进行【千里共婵娟】，需要将手机对着月亮的位置，然后才出现3D月亮模型
  3. 看到月亮后，可以点击月亮 查看一共有多少人与你一起赏月
  4. 分享给家人或朋友，会在屏幕下面出现一排人与你一起赏月
  5. 彩蛋，不同手势，会触发不同场景，比如：比心，会掉下很多爱心， 比6，会掉下很多666表情

实现思路

  1. 核心功能：利用小程序XR-FRAME框架实现3d月亮展示
  2. 开发框架直接用原生微信小程序开发即可，一共就3个页面
  3. 后台数据保存直接用云函数即可，主要保存访问用户数据量

必备知识

小程序原生开发基础知识，我这里就不详细说了，主要讲

XR-Frame学习

是什么？ 官方介绍如下：

xr-frame是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。

云函数使用

项目开发

摄像头显示月亮

调用云函数存储用户数据

结合GitHub Action持续集成交付

所有源码均以上传到Github

体验版

这里放个小程序二维码图片，大家感兴趣可以扫一下体验一版本。

参考资料

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Qborfy

毕业于广大华软学院，软件工程师一枚！

Java出身，喜欢前端进行转岗，主攻全栈发展，技术有：Vue、React、Nodejs、Java等。

加我好友，多个朋友交流也不错~