HarmonyOS 鸿蒙Next 元服务头像选择和保存案例分享

元服务的头像选择官方已经封装好相关的组件，接下来为大家详解下选择和保存及缓存显示的流程。

头像选择主要利用到FunctionalButton组件，这个组件为开发者提供场景化开发能力，包括：快速验证手机号、实时验证手机号、选择头像、打开授权设置页、打开App、选择收货地址、选择发票抬头、打开地图选点、实名信息校验、人脸核身和实况窗订阅（摘抄官网介绍）。

如何使用FunctionalButton？

主要属性包括OpenType用来指定使用哪个功能，头像选择传入functionalButtonComponentManager.OpenType.CHOOSE_AVATAR；styleOption自定义组件样式，包括形状、背景颜色、大小等。

具体流程：

1. 调用FunctionalButton选择头像/相册选择/拍照 获取头像结果url， url的获取是在controller里回调的。url可以被定义成@State url: ResourceStr = $r(‘app.media.account’)，默认值是默认头像。
2. 清除头像缓存：使用fileIo.unlink方法传入头像路径直接删除。具体代码如下：

   export async function unlink(dirPath: string) {
   try {
   Logger.info(Commons.TAG+"unlink dirPath = "+dirPath);
   fileIo.unlink(dirPath).then(() => {
   Logger.info(Commons.TAG + “unlink success…”+dirPath);
   }).catch((err: BusinessError) => {
   Logger.error(Commons.TAG + "unlink  fail = " + JSON.stringify(err));
   })
   
   } catch (err) {
   Logger.error(Commons.TAG + "unlink error = " + JSON.stringify(err));
   }
   }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

3. 写入当前头像：采用流形式从当前路径写入的目标路径，具体代码如下，srcUri代表的是原路径，destUri代表的是目标路径。

   
   export async function savePictureInApp(srcUri: string, destUri: string) {
   if (!srcUri && !destUri) {
   return;
   }
   try {
   let srcFile = await fileIo.open(srcUri, fileIo.OpenMode.READ_ONLY);
   let destFile = await fileIo.open(destUri, fileIo.OpenMode.WRITE_ONLY | fileIo.OpenMode.CREATE);
   let bufSize = 4096;
   let readSize = 0;
   
   <span class="hljs-keyword">let</span> buf = <span class="hljs-keyword">new</span> <span class="hljs-built_in">ArrayBuffer</span>(bufSize);
   <span class="hljs-keyword">let</span> readOptions: ReadOptions = {
     offset: readSize,
     length: bufSize
   };
   <span class="hljs-keyword">let</span> readLen = await fileIo.read(srcFile.fd, buf, readOptions);
   <span class="hljs-keyword">while</span> (readLen &gt; <span class="hljs-number">0</span>) {
     readSize += readLen;
     <span class="hljs-keyword">let</span> writeOptions: WriteOptions = {
       length: readLen
     };
     await fileIo.write(destFile.fd, buf, writeOptions);
     readOptions.offset = readSize;
     readLen = await fileIo.read(srcFile.fd, buf, readOptions);
   }
   fileIo.close(srcFile);
   fileIo.close(destFile);
   } catch (err) {
   Logger.error(Commons.TAG + "savePictureInApp save fail = " + JSON.stringify(err));
   }
   }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

4. preferences缓存保存当前头像路径。

5. 下次启动preferences获取当前缓存路径：由于需要使用沙箱路径，所以进行了拼写方式。

     aboutToAppear(): void {
   
   spGetData(context, Commons.SP_HEAD_KEY, <span class="hljs-string">''</span>, (value: string) =&gt; {
     Logger.debug(TAG + `head value = ${value}`)
     <span class="hljs-keyword">if</span> (value) {
       <span class="hljs-keyword">this</span>.url = <span class="hljs-string">'file://'</span> + context.applicationInfo.name + <span class="hljs-string">'/data/storage/el2/base/haps/entry/files/'</span> + value;
     }
   })
   }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

   整体代码流程：

       FunctionalButton({
   params: {
   openType: functionalButtonComponentManager.OpenType.CHOOSE_AVATAR,
   label: ‘’,
   styleOption: {
   styleConfig: new functionalButtonComponentManager.ButtonConfig()
   .type(ButtonType.Circle)
   .backgroundImage(this.url)
   .backgroundImageSize(ImageSize.Cover)
   .width(45)
   .height(45)
   .backgroundColor(Color.Transparent)
   
           }
   
         },
         controller: <span class="hljs-keyword">new</span> functionalButtonComponentManager.FunctionalButtonController().onChooseAvatar((err, data) =&gt; {
           <span class="hljs-keyword">if</span> (err) {
             <span class="hljs-comment">// 错误日志处理</span>
             Logger.error(TAG + `FunctionalButton err code = ${err.code},message = ${err.message}`);
             <span class="hljs-keyword">return</span>;
           }
           <span class="hljs-comment">// 成功日志处理</span>
           Logger.info(TAG + `succeeded <span class="hljs-keyword">in</span> choosing avatar = ${data.avatarUri}`);
   
           <span class="hljs-keyword">this</span>.url = data.avatarUri!;
   
           fileIo.open(data.avatarUri, fileIo.OpenMode.READ_ONLY).then(async (srcFile: fileIo.File) =&gt; {
             <span class="hljs-keyword">if</span> (!srcFile) {
               <span class="hljs-keyword">return</span>;
             }
             <span class="hljs-keyword">const</span> fileName = <span class="hljs-string">'head.jpg'</span>;
             <span class="hljs-keyword">let</span> destUri = filesDir + <span class="hljs-string">'/'</span> + fileName
             unlink(destUri);
             savePictureInApp(data.avatarUri!, destUri);
             spPushData(context, Commons.SP_HEAD_KEY, fileName);
           })
   
         })
       })
         .transition(<span class="hljs-keyword">this</span>.imageEffect)
         .width(<span class="hljs-number">45</span>)
         .height(<span class="hljs-number">45</span>)
         .clickEffect({ level: ClickEffectLevel.LIGHT, scale: <span class="hljs-number">0.7</span> })</code><button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button></pre>   <p></p>   <p>大概思路和正常开发思路相差不错，主要是对于相关API的运用是可以多学习学习的</p>   <p></p>  &nbsp;   <p></p>   <p></p>  </li> </ol>  <ol> </ol></div></div>