1 Star 0 Fork 0

jiangmin / cn_node_awesome

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

cn_node_awesome

介绍

  • arkui入门学习
  • 本次学习由cnodejs.org提供数据支持

实现功能如下

  • 首页文章列表
  • accessToken 登录
  • 收藏文章

截图

实现思路

文章列表

使用arkui提供的基本布局组件 List,Row

List({space:20,}){
  ...
}.height("100%").width("100%")
  .onReachEnd( () => { 
   // 加载更多
   this.ctrl.loadMore() 
})

数据请求

使用 @ohos.net.http 发起http请求

import http from '@ohos.net.http';
let req = http.createHttp()
return req.request(`https://cnodejs.org/api/v1/topics?tap=share&page=1&limit=1`, {
  method:http.RequestMethod.GET,
})

识别二维码

依赖 @ohos/zxing

  const pixelMap = await imageSource.createPixelMap();
  let num = pixelMap.getPixelBytesNumber()
  let arrayBuffer: ArrayBuffer = new ArrayBuffer(num);
  await pixelMap.readPixelsToBuffer(arrayBuffer)
  const int32Array = new Int32Array(arrayBuffer)
  const luminanceSource = new RGBLuminanceSource(int32Array, 400, 400)
  const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource))
  const reader = new MultiFormatReader()
  const hints: Map<DecodeHintType, Array<BarcodeFormat>> = new Map();

  hints.set(DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.QR_CODE]);
  reader.setHints(hints);
  let result = reader.decode(binaryBitmap);
  let text = result.getText();
  console.log(text)

选取相册图片

const pickerImg = new picker.PhotoViewPicker()
const opt = new picker.PhotoSelectOptions()
opt.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE
opt.maxSelectNumber = 1;
pickerImg.select(opt).then( async res => {
 // ...
 // decode 二维码
 // 验证 二维码中的accessToken
})

相机扫码

const manager = camera.getCameraManager(getContext(this)) // 创建相机设备manager
const device = manager.getSupportedCameras() // 获取相机
if (device.length == 0) {
promptAction.showToast({message: "没有可用相机设备"})
return
}
const defaultDevice = device[0] 
const profile = manager.getSupportedOutputCapability(defaultDevice) // 获取第一个相机配置
const receiver :image.ImageReceiver = image.createImageReceiver(8192, 8192, image.ImageFormat.JPEG, 8); // 创建一个图片接收器
const surfaceId = await  receiver.getReceivingSurfaceId()
const cameraInput = manager.createPreviewOutput(profile.previewProfiles[0], surfaceId) // 创建相机预览
cameraInput.start()

  // ...
 // loop并扫码图片中的二维码直到检测到二维码
  const scan = () => {
    receiver.readLatestImage().then(async img => { // 获取相机预览
      const comp = await img.getComponent(image.ComponentType.JPEG); // 获取jpg图片
      if (comp && comp.byteBuffer) {
        const buffer: ArrayBuffer = comp.byteBuffer.slice(0, comp.byteBuffer.byteLength);

        const text = await decodeQrBuff(buffer)
        if (text) {
          // 停止相机
        }
      }
    })
  }

持久化存储accessToken

验证accessToken成功之后,可以持久化保存数据。 方式:PersistentStorage.PersistProp

代码见 entry/src/main/ets/pages/AccessCodeForm.ets

其他entry 使用 @StorageLink('cn-access-code') accessToken : string = "" 获取

todolist

  • 扫码识别accessToken
  • 相机扫码过程中的预览

其他

仅供学习。欢迎提问

文章列表 我的 我的-登录后 验证身份

空文件

简介

arkui入门学习 展开 收起
TypeScript 等 3 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/thirty_one/cn_node_awesome.git
git@gitee.com:thirty_one/cn_node_awesome.git
thirty_one
cn_node_awesome
cn_node_awesome
master

搜索帮助