鸿蒙系统实战短视频App 从0到1掌握HarmonyOS[完结14章]

参考资料地址1：pan.baidu.com/s/13-a-PAQW… 提取码: 42mk 参考资料地址2：share.weiyun.com/aXaiIMC3 密码：q5aaj7

HarmonyOS应用分为两大类：安装的App和免安装原子化服务应用。 用户应用程序以App Pack形式发布，它包含一个或者多个HAP（Harmony Ability Package）以及描述每个HAP属性的pack.info组成。HAP是上文提到的Ability的部署包，鸿蒙的应用是围绕一个个Ability（能力/功能）组件展开的。一个HAP由代码、资源、第三方库及配置组件组成。

华为鸿蒙开发需要学习以下几种编程语言： Java：鸿蒙系统支持使用Java语言进行应用程序开发。如果已经熟悉Java，那么可以直接使用Java进行鸿蒙应用程序的开发。 C/C++：鸿蒙系统也支持使用C/C++语言进行应用程序开发。使用C/C++语言可以更好地利用鸿蒙系统的底层特性，更好地发挥其性能和功能。 JS(JavaScript)：鸿蒙系统还支持使用JavaScript语言进行应用程序开发。JavaScript是一种广泛使用的网络编程语言，适用于开发Web应用程序和构建用户界面。 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS基于TypeScript(简称TS)语言扩展而来，是TS的超集。 除了以上编程语言，还需要了解鸿蒙系统的开发特性、分布式能力、设备适配、调试和测试等方面的知识。同时，积极参与鸿蒙开发者社区，阅读官方文档、示例代码和教程，参加培训和研讨会，与其他开发者交流和分享经验也是非常有帮助的。

eTS是扩展的TS语言，而ArkTS同样是在TS语言基础上，配合ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。这样，我们也就清楚了华为eTS和ArKTS之间的区别关系，ArKTS就是eTS的升级版！

在配置文件中，添加JWT需要用到的密钥、过期时间和缓存过期时间。 package com.example.emos.wx.config.shiro;

import com.auth0.jwt.exceptions.JWTDecodeException; import com.auth0.jwt.exceptions.TokenExpiredException; import org.apache.commons.lang3.StringUtils; import org.apache.http.HttpStatus; import org.apache.shiro.authc.AuthenticationException; import org.apache.shiro.authc.AuthenticationToken; import org.apache.shiro.web.filter.authc.AuthenticatingFilter; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Scope; import org.springframework.data.redis.core.RedisTemplate; import org.springframework.stereotype.Component; import org.springframework.web.bind.annotation.RequestMethod;

import javax.servlet.FilterChain; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.concurrent.TimeUnit;

@Component @Scope("prototype") public class OAuth2Filter extends AuthenticatingFilter { @Autowired private ThreadLocalToken threadLocalToken;

@Value("${emos.jwt.cache-expire}")
private int cacheExpire;

@Autowired
private JwtUtil jwtUtil;
@Autowired
private RedisTemplate redisTemplate;

/**
 * 拦截请求之后，用于把令牌字符串封装成令牌对象
 */
@Override
protected AuthenticationToken createToken(ServletRequest request, 
	ServletResponse response) throws Exception {
    //获取请求token
    String token = getRequestToken((HttpServletRequest) request);

    if (StringUtils.isBlank(token)) {
        return null;
    }

    return new OAuth2Token(token);
}

/**
 * 拦截请求，判断请求是否需要被Shiro处理
 */
@Override
protected boolean isAccessAllowed(ServletRequest request, 
	ServletResponse response, Object mappedValue) {
    HttpServletRequest req = (HttpServletRequest) request;
    // Ajax提交application/json数据的时候，会先发出Options请求
	// 这里要放行Options请求，不需要Shiro处理
	if (req.getMethod().equals(RequestMethod.OPTIONS.name())) {
        return true;
    }
	// 除了Options请求之外，所有请求都要被Shiro处理
    return false;
}

/**
 * 该方法用于处理所有应该被Shiro处理的请求
 */
@Override
protected boolean onAccessDenied(ServletRequest request, 
	ServletResponse response) throws Exception {
    HttpServletRequest req = (HttpServletRequest) request;
    HttpServletResponse resp = (HttpServletResponse) response;

	resp.setHeader("Content-Type", "text/html;charset=UTF-8");
	//允许跨域请求
    resp.setHeader("Access-Control-Allow-Credentials", "true");
    resp.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));

	threadLocalToken.clear();
    //获取请求token，如果token不存在，直接返回401
    String token = getRequestToken((HttpServletRequest) request);
    if (StringUtils.isBlank(token)) {
        resp.setStatus(HttpStatus.SC_UNAUTHORIZED);
        resp.getWriter().print("无效的令牌");
        return false;
    }
	
    try {
        jwtUtil.verifierToken(token); //检查令牌是否过期
    } catch (TokenExpiredException e) {
        //客户端令牌过期，查询Redis中是否存在令牌，如果存在令牌就重新生成一个令牌给客户端
        if (redisTemplate.hasKey(token)) {
            redisTemplate.delete(token);//删除令牌
            int userId = jwtUtil.getUserId(token);
            token = jwtUtil.createToken(userId);  //生成新的令牌
            //把新的令牌保存到Redis中
            redisTemplate.opsForValue().set(token, userId + "", cacheExpire, TimeUnit.DAYS);
            //把新令牌绑定到线程
            threadLocalToken.setToken(token);
        } else {
            //如果Redis不存在令牌，让用户重新登录
            resp.setStatus(HttpStatus.SC_UNAUTHORIZED);
            resp.getWriter().print("令牌已经过期");
            return false;
        }

    } catch (JWTDecodeException e) {
        resp.setStatus(HttpStatus.SC_UNAUTHORIZED);
        resp.getWriter().print("无效的令牌");
        return false;
    }

    boolean bool = executeLogin(request, response);
    return bool;
}

@Override
protected boolean onLoginFailure(AuthenticationToken token,
	AuthenticationException e, ServletRequest request, ServletResponse response) {
    HttpServletRequest req = (HttpServletRequest) request;
    HttpServletResponse resp = (HttpServletResponse) response;
    resp.setStatus(HttpStatus.SC_UNAUTHORIZED);
    resp.setContentType("application/json;charset=utf-8");
    resp.setHeader("Access-Control-Allow-Credentials", "true");
    resp.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
    try {
        resp.getWriter().print(e.getMessage());
    } catch (IOException exception) {

    }
    return false;
}

/**
 * 获取请求头里面的token
 */
private String getRequestToken(HttpServletRequest httpRequest) {
    //从header中获取token
    String token = httpRequest.getHeader("token");

    //如果header中不存在token，则从参数中获取token
    if (StringUtils.isBlank(token)) {
        token = httpRequest.getParameter("token");
    }
    return token;

}

@Override
public void doFilterInternal(ServletRequest request, 
	ServletResponse response, FilterChain chain) throws ServletException, IOException {
    super.doFilterInternal(request, response, chain);
}

}

我们在写OAuth2Filter的时候，把更新后的令牌写到ThreadLocalToken里面的ThreadLocal。那么这个小节，我们要创建AOP切面类，拦截所有Web方法的返回值，在返回的R对象中添加更新后的令牌。

在com.example.emos.wx.aop中创建TokenAspect类。 package com.example.emos.wx.aop;

import com.example.emos.wx.common.util.R; import com.example.emos.wx.config.shiro.ThreadLocalToken; import org.aspectj.lang.ProceedingJoinPoint; import org.aspectj.lang.annotation.Around; import org.aspectj.lang.annotation.Aspect; import org.aspectj.lang.annotation.Pointcut; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component;

@Aspect @Component public class TokenAspect {

@Autowired
private ThreadLocalToken threadLocalToken;

@Pointcut("execution(public * com.example.emos.wx.controller.*.*(..)))")
public void aspect() {

}

@Around("aspect()")
public Object around(ProceedingJoinPoint point) throws Throwable {
    R r = (R) point.proceed(); //方法执行结果
    String token = threadLocalToken.getToken();
    //如果ThreadLocal中存在Token，说明是更新的Token
    if (token != null) {
        r.put("token", token); //往响应中放置Token
        threadLocalToken.clear();
    }
    return r;
}

} 首先我们可以从微信APP上面获得用户临时授权字符串（Code），然后把这个字符串传递给后端Java系统，让Java系统拿着AppId、密钥和Code，提交给微信平台换取OpenId String url = "api.weixin.qq.com/sns/jscode2…"; HashMap map = new HashMap(); map.put("appid", appId); map.put("secret", appSecret); map.put("js_code", code); map.put("grant_type", "authorization_code"); String response = HttpUtil.post(url, map); JSONObject json = JSONUtil.parseObj(response); String openId = json.getStr("openid"); 在UserServiceImpl.java中实现抽象方法 @Override public Integer login(String code) { String openId = getOpenId(code); Integer id = userDao.searchIdByOpenId(openId); if (id == null) { throw new EmosException("帐户不存在"); } //TODO 从消息队列中接收消息，转移到消息表 return id; }

创建checkin.vue页面，然后编写页面内容 <camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera"> <button type="primary" class="btn" @tap="clickBtn" :disabled="!canCheckin">{{ btnText }} <button type="warn" class="btn" @tap="afresh" :disabled="!canCheckin">重拍 注意事项 拍照签到的时候，必须要拍摄自己的正面照片，侧面照片会导致无法识别。另外，拍照的时候不要戴墨镜或者帽子，避免影响拍照签到的准确度。 编写checkin.less文件，声明CSS样式 @import url("../../style.less"); .camera,.image{ width: 100%; height: 400px; } .operate-container{ display: flex; justify-content: center; margin-top: 50rpx; .btn{ width: 40%; margin: 0; &:first-child{ margin-right: 30rpx; } } }

.notice-container{ padding: 40rpx 60rpx; .notice{ font-size: 40rpx; color: @font-color; font-weight: bold; display: block; margin-bottom: 15rpx; } .desc{ display: block; font-size: 32rpx; color: @desc-color; line-height: 1.6; } }