只需6步，教你从零开发一个签到小程序
<blockquote><strong>摘要：</strong>针对于具备瞬时流量、业务场景比较简单的小程序，开发者借助FunctionGraph，可以方便快捷的搭建一个健壮的小程序后台。</blockquote><p>本文分享自华为云社区《智慧校园想搞好，FunctionGraph少不了——从零开发签到小程序so easy!》，作者： 一只程序猿。</p>
<h2>背景</h2>
<p>华为romalab实验室在构建智慧教育领域app时，以FunctionGraph为试点，尝试基于FunctionGraph云函数开发一个签到小程序。针对于具备瞬时流量、业务场景比较简单的小程序，开发者借助FunctionGraph，可以方便快捷的搭建一个健壮的小程序后台。</p>
<h2>免登方案设计与前后端通信逻辑</h2>
<h2>方案概述</h2>
<p>App在登录以后，才会打开小程序。如果小程序和app的用户体系一致，用户就不用再次登录。在首次访问小程序的时候，调用智慧校园app的免登接口，获取用户信息，然后小程序构建自己的登录状态。由于云函数本身属于无状态的服务，需要借助授权服务器（或者签发jwt）实现自己的接口认证。</p>
<p>小程序在调用后台业务接口时，携带票据。</p>
<h2>交互流程图</h2>
<p>(注：智慧校园app是基于华为内部的移动使能平台OneMobile构建，此处的OneMobile就可以理解为智慧校园app)</p>
<p><img width="1188" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1188" data-rawheight="781" data-original="https://pic3.zhimg.com/v2-de88932f3c486c80f11b7caad52931c2_r.jpg" data-actualsrc="https://pic3.zhimg.com/v2-de88932f3c486c80f11b7caad52931c2_b.jpg" data-lazy-status="ok" data-src="https://pic3.zhimg.com/80/v2-de88932f3c486c80f11b7caad52931c2_720w.jpg"><img width="1183" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1183" data-rawheight="331" data-original="https://pic2.zhimg.com/v2-f90eeb026d4524fed01c6f76889d4849_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-f90eeb026d4524fed01c6f76889d4849_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-f90eeb026d4524fed01c6f76889d4849_720w.jpg"></p>
<h2>流程描述</h2>
<p>流程描述：</p>
<ol>
<li>打开签到小程序，调用getToken()获取ssoTikect票据信息</li>
<li>小程序将ssoTicket传入到认证函数A中，在A中去调用智慧校园app的开放平台接口，根据ssoTicket获得当前的用户信息</li>
<li>拿到用户信息以后，根据该用户信息，生成票据token ，返还给小程序</li>
</ol>
<p><img width="973" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="973" data-rawheight="601" data-original="https://pic2.zhimg.com/v2-edb17f8475ea4a33bc2d517978941bed_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-edb17f8475ea4a33bc2d517978941bed_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-edb17f8475ea4a33bc2d517978941bed_720w.jpg"></p>
<ol>
<li>小程序调用业务函数B，在请求中携带token</li>
<li>业务函数B在拿到请求以后，校验token、换取用户信息</li>
<li>校验通过，根据获取的用户信息，执行业务功能，返还结果</li>
</ol>
<p><img width="1074" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1074" data-rawheight="381" data-original="https://pic1.zhimg.com/v2-9a57021a74a23fbe3ca192fb6501f664_r.jpg" data-actualsrc="https://pic1.zhimg.com/v2-9a57021a74a23fbe3ca192fb6501f664_b.jpg" data-lazy-status="ok" data-src="https://pic1.zhimg.com/80/v2-9a57021a74a23fbe3ca192fb6501f664_720w.jpg"></p>
<h2>业务实现</h2>
<h3>角色权限管理策略</h3>
<p>智慧校园app本身对小程序有着严格的权限控制体系，可以在用户、组织、岗位等维度，对小程序的可见性进行控制。由于签到打卡这个业务场景比较简单，且人员有着明显的角色特征，老师设置签到规则，学生扫码进行签到。</p>
<p>结合当前的现状，此次签到小程序不再单独构建自己的权限管理体系，而是依托于智慧校园app本身的权限体系。提供两个小程序，一个是教师使用的“教师上课点名”小程序，用于协助老师生成签到二维码。一个是“签到打卡”小程序，用于学生上课签到。由智慧校园app在入口处对小程序的使用者进行管控。</p>
<h2>App扫码签到实现</h2>
<h3>如何签到</h3>
<p>签到是通过扫描二维码进行签到，在扫码的时候，将扫码得到的信息，传递到后台，后台对二维码中的课程信息与签到规则进行比对后，返还签到结果。小程序根据不同的签到结果，给用户展示不同的页面。</p>
<h3>如何扫码</h3>
<p>当前扫码的入口有两个，一个在小程序内部，一个在app的右上角。二者调用的都是系统的扫码能力。</p>
<p><img width="442" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="442" data-rawheight="879" data-original="https://pic2.zhimg.com/v2-e1b3bdfd8b1514687a3c8eb5f70921bd_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-e1b3bdfd8b1514687a3c8eb5f70921bd_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-e1b3bdfd8b1514687a3c8eb5f70921bd_720w.jpg"></p>
<p><img width="438" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="438" data-rawheight="922" data-original="https://pic2.zhimg.com/v2-3ad8b1aee2409f1db9b12ca21a7f9401_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-3ad8b1aee2409f1db9b12ca21a7f9401_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-3ad8b1aee2409f1db9b12ca21a7f9401_720w.jpg"></p>
<p>由于在app上扫码能够进入签到小程序并进行签到，就需要签到二维码不仅仅要携带课程信息，同时也要携带要打开小程序的信息。</p>
<h3>如何实现扫码进入小程序</h3>
<p>智慧校园app的扫一扫能力，预制了一些通用的能力，当扫码得到的结果是某一个固定类型的数据格式，就会自动完成一些操作。</p>
<p>如扫码能识别打开小程序的数据格式为：native://openapp?data={"appid":"88157779"}，而打开小程序的能力，其实是封装了jssdk的xm.openApp()的能力。xm.openApp()允许开发者能在一个小程序里面打开另外一个小程序。</p>
<h3>App扫码签到代码实现流程图</h3>
<p><img width="661" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="661" data-rawheight="934" data-original="https://pic2.zhimg.com/v2-4f36de237d82cf9cc8adfabe32f77975_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-4f36de237d82cf9cc8adfabe32f77975_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-4f36de237d82cf9cc8adfabe32f77975_720w.jpg"></p>
<h2>FunctionGraph实现签到业务</h2>
<p>开发函数支持多种语言类型，如nodejs、python、java等。后端逻辑中，除了普通业务逻辑（如跟数据库交互）之外，最主要的是跟智慧校园app的交互，如获取用户信息。交互形式是接口调用，可以直接引用封装好的客户端来实现，以nodejs开发语言为例，直接引入npm包即可。</p>
<h3>开发后端函数逻辑</h3>
<h3>认证函数</h3>
<p>App在登录以后，才会打开小程序。如果小程序和app的用户体系一致，用户就不用再次登录。而小程序如何在不登录的情况下想要拿到当前使用该App的用户，就需要借助app的接口，实现免登。认证函数的作用就是获取当前app的使用者，并且能够签发小程序自己的自定义登录状态，如签发一个jwt</p>
<p>认证函数的入参为小程序前台从app获取到的ssoTicket。</p>
<p>具体实现如下：</p>
<p>1. 获取智慧校园app的api调用SDK代码，执行npm pack打包，生成OneMobileSDK-0.0.1.tgz, 在新项目中安装该依赖npm install OneMobileSDK-0.0.1.tgz，然后将node-modules文件压缩成zip，上传到FunctionGraph的依赖仓库中去。在创建函数时添加该依赖。</p>
<p>a.创建依赖包</p>
<p><img width="1196" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1196" data-rawheight="332" data-original="https://pic4.zhimg.com/v2-d98ff71e413e62b37b5cadd48e3c6a5b_r.jpg" data-actualsrc="https://pic4.zhimg.com/v2-d98ff71e413e62b37b5cadd48e3c6a5b_b.jpg" data-lazy-status="ok" data-src="https://pic4.zhimg.com/80/v2-d98ff71e413e62b37b5cadd48e3c6a5b_720w.jpg"></p>
<p>b.上传依赖文件</p>
<p><img width="821" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="821" data-rawheight="703" data-original="https://pic4.zhimg.com/v2-eeaa89f2411c672a22294e6507eb8eab_r.jpg" data-actualsrc="https://pic4.zhimg.com/v2-eeaa89f2411c672a22294e6507eb8eab_b.jpg" data-lazy-status="ok" data-src="https://pic4.zhimg.com/80/v2-eeaa89f2411c672a22294e6507eb8eab_720w.jpg"></p>
<p>c.添加依赖</p>
<p><img width="1015" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1015" data-rawheight="349" data-original="https://pic3.zhimg.com/v2-20b376386f026136d4d2923ab95ffffa_r.jpg" data-actualsrc="https://pic3.zhimg.com/v2-20b376386f026136d4d2923ab95ffffa_b.jpg" data-lazy-status="ok" data-src="https://pic3.zhimg.com/80/v2-20b376386f026136d4d2923ab95ffffa_720w.jpg"></p>
<p>2. 参照步骤1，将mysql-node的依赖，加入到FG的依赖仓库中去，在创建函数时添加该依赖。</p>
<p>3.调用OneMobileBaseSDK里面的getUserInfoBySsoTicket(ssoTicket)，获取用户信息</p>
<p>a.在代码中引用SDK</p>
<p><img width="545" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="545" data-rawheight="74" data-original="https://pic1.zhimg.com/v2-54cab86feef4c4fee1bfd13e76a00560_r.jpg" data-actualsrc="https://pic1.zhimg.com/v2-54cab86feef4c4fee1bfd13e76a00560_b.jpg" data-lazy-status="ok" data-src="https://pic1.zhimg.com/80/v2-54cab86feef4c4fee1bfd13e76a00560_720w.jpg"></p>
<p>b.调用接口</p>
<p><img width="697" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="697" data-rawheight="217" data-original="https://pic4.zhimg.com/v2-b325f106b2e6fb80a0a3c181603abbaf_r.jpg" data-actualsrc="https://pic4.zhimg.com/v2-b325f106b2e6fb80a0a3c181603abbaf_b.jpg" data-lazy-status="ok" data-src="https://pic4.zhimg.com/80/v2-b325f106b2e6fb80a0a3c181603abbaf_720w.jpg"></p>
<p>4. 校验用户信息。</p>
<p>5. 根据获取到的用户信息，生成业务接口的调用凭证，返还给小程序前台。</p>
<h3>签到函数</h3>
<p>关于签到函数，在操作流程上面和认证函数相似，这里不做过多的阐述。其主体的流程如下：</p>
<p>1. 创建函数时，添加mysql-node相关依赖</p>
<p>2. 校验签到信息</p>
<p>3. 将签到结果入库</p>
<p>4. 返还签到结果给小程序</p>
<h3>接口开放</h3>
<p>函数开发完成以后，需要将函数开放给小程序使用，具体操作步骤如下。</p>
<p>1. 在函数详情页面，点击触发器页签</p>
<p><img width="1153" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1153" data-rawheight="345" data-original="https://pic4.zhimg.com/v2-288c6adef4d09d6a703f91078dde39bb_r.jpg" data-actualsrc="https://pic4.zhimg.com/v2-288c6adef4d09d6a703f91078dde39bb_b.jpg" data-lazy-status="ok" data-src="https://pic4.zhimg.com/80/v2-288c6adef4d09d6a703f91078dde39bb_720w.jpg"></p>
<p>2.创建触发器，触发器类型选择APIG。由于代码中有认证逻辑，所以网关层不做认证</p>
<p><img width="1015" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1015" data-rawheight="699" data-original="https://pic2.zhimg.com/v2-613938f938b9c12639bf4a2120373df5_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-613938f938b9c12639bf4a2120373df5_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-613938f938b9c12639bf4a2120373df5_720w.jpg"></p>
<p>3.获取创建的APIG调用地址，小程序前端即可根据业务需要，调用相应的rest接口。</p>
<p><img width="995" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="995" data-rawheight="276" data-original="https://pic3.zhimg.com/v2-9ae945706b21006d53fbae180888365a_r.jpg" data-actualsrc="https://pic3.zhimg.com/v2-9ae945706b21006d53fbae180888365a_b.jpg" data-lazy-status="ok" data-src="https://pic3.zhimg.com/80/v2-9ae945706b21006d53fbae180888365a_720w.jpg"><img width="1009" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="1009" data-rawheight="241" data-original="https://pic3.zhimg.com/v2-4969888a9df5ec2bdbf30dbc206344de_r.jpg" data-actualsrc="https://pic3.zhimg.com/v2-4969888a9df5ec2bdbf30dbc206344de_b.jpg" data-lazy-status="ok" data-src="https://pic3.zhimg.com/80/v2-4969888a9df5ec2bdbf30dbc206344de_720w.jpg"></p>
<h2>总结</h2>
<h2>此次小程序开发识别到的问题</h2>
<h3>智慧校园app</h3>
<ol>
<li>FullCode模式下，页面的碎片化问题亟待解决，智慧校园app缺少页面预览工具以及通用的组件库。</li>
<li>免登接口只能在容器中才能调用，而调试的时候部分接口强依赖ssoTicket，只能通过集成vconsole，然后在手机中执行getToken()指令才可以获取ssoTicket。</li>
<li>公司内部没有调试环境，公网调测，每次都需要传包到开放平台，操作起来很麻烦。</li>
<li>文档仍需补齐，一些非常规能力，如扫码打开小程序功能，没有相应的文档支撑</li>
<li>缺少支撑一套前端调测多套环境的解决方案</li>
</ol>
<h3>FunctionGraph</h3>
<ol>
<li>代码分布在3个地方：前台代码由智慧校园app托管运行、网关api直接配置在APIG、函数代码在Function里。功能调试成功后，如果有一键归档（或者下载）功能或者下载工具会比较好。同样，希望也有一键部署功能的工具。</li>
<li>当前加密配置粒度是单个函数，以连接数据库为例，多个函数连接同一个数据库，需要在每个函数中都增加数据库账号密码加密配置，繁琐而且无法保证数据一致。</li>
</ol>
<h2>能力待提升</h2>
<h3>智慧校园app</h3>
<ol>
<li>参照微信，求助IDE团队，为提供小程序开发工具</li>
<li>参照welink为开发者提供开放平台的调测工具，并能一键生成不同语言的接口调用代码</li>
<li>构建小程序专门的云开发平台，小程序流量走App基座的网关，打通各个云服务，服务之间鉴权由开发平台承接，小程序开发者更专注于业务能力构建。</li>
</ol>
<h3>FunctionGraph</h3>
<ol>
<li>能够通过函数应用生命周期管理功能解决函数开发、部署、发布（到APIG）一体化的问题</li>
<li>能够实现用户或租户级别的配置共享</li>
</ol>
<p>参考文档：</p>
<p>https://support.huaweicloud.com/usermanual-romalab/lab_03_0001.html</p>
<p>https://www.huaweicloud.com/product/functiongraph.html</p>
<p class="ztext-empty-paragraph"> </p>
<p><strong>点击关注，第一时间了解华为云新鲜技术~</strong></p><br><br>
来源：https://www.cnblogs.com/huaweiyun/p/15108498.html
頁:
[1]