移动端网站如何做开放式配企业微信客户管理

当前位置： 首页 > news >正文

移动端网站如何做开放式配,企业微信客户管理,云浮东莞网站建设,网站制作的销售对象兼容JS的类Web开发范式 JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下#xff1a;

1. 项目基本结构 1.1. 目录结构 1.2. 项目文件分类如下#xff1a; .hml结尾的HML模板文件#xff0c;这个文件用来描述当前页面的文件布局结构。 .css结尾的CSS样…兼容JS的类Web开发范式 JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如下
2. 项目基本结构 1.1. 目录结构 1.2. 项目文件分类如下 .hml结尾的HML模板文件这个文件用来描述当前页面的文件布局结构。 .css结尾的CSS样式文件这个文件用于描述页面样式。 .js结尾的JS文件这个文件用于处理页面和用户的交互。 1.3. 目录模块划分 app.js文件用于全局JavaScript逻辑和应用生命周期管理。 pages目录用于存放所有组件页面。 common目录用于存放公共资源文件比如媒体资源和JS文件。 i18n目录用于配置不同语言场景资源内容比如应用文本词条图片路径等资源。
   说明 i18n是开发保留文件夹不可重命名。 在使用DevEco Studio进行应用开发时目录结构中的可选文件夹需要开发者根据实际情况自行创建。 1.4. 文件访问规则 应用资源可通过绝对路径或相对路径的方式进行访问本开发框架中绝对路径以/开头相对路径以./或../。具体访问规则如下 引用代码文件需使用相对路径比如../common/utils.js。 引用资源文件推荐使用绝对路径。比如/common/xxx.png。 公共代码文件和资源文件推荐放在common下通过以上两条规则进行访问。 CSS样式文件中通过url()函数创建url数据类型如url(/common/xxx.png)。
   说明 当代码文件A需要引用代码文件B时 如果代码文件A和文件B位于同一目录则代码文件B引用资源文件时可使用相对路径也可使用绝对路径。 如果代码文件A和文件B位于不同目录则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时代码文件B的目录会发生变化。 2. 语法 2.1. HML语法 HML是一套类HTML的标记语言通过组件事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染等高级能力。 2.1.1. 页面结构 !– xxx.hml – div classitem-containertext classitem-titleImage Show/textdiv classitem-contentimage src/common/xxx.png classimage/image/div /div 2.1.2. 数据绑定 !– xxx.hml – div onclickchangeTexttext {{content[1]}} /text /div // xxx.js export default {data: {content: [Hello World!, Welcome to my world!]},changeText: function() {this.content.splice(1, 1, this.content[0]);} } 说明 针对数组内的数据修改请使用splice方法生效数据绑定变更。 hml中的js表达式不支持ES6语法。
   2.1.3. 事件绑定 事件绑定的回调函数接收一个事件对象参数可以通过访问该事件对象获取事件信息。 !– xxx.hml – div!– 通过绑定事件 –div clickclickfunc/div!– 通过on绑定事件 –div onclickclickfunc/div!– 通过on绑定事件不推荐使用5 –div onclickclickfunc/div!– 使用事件冒泡模式绑定事件回调函数。5 –div on:click.bubbleclickfunc/div!– on:{event}等价于on:{event}.bubble。5 –div on:clickclickfunc/div!– 绑定事件回调函数但阻止事件向上传递。5 –div grab:click.bubbleclickfunc/div!– grab:{event}等价于grab:{event}.bubble。5 –div grab:clickclickfunc/div /div // xxx.js export default {data: {obj: ,},clickfunc: function(e) {this.obj Hello World;console.log(e);}, } 说明 事件冒泡机制从API Version 5开始支持。升级SDK后运行存量JS应用采用旧写法onclick的事件绑定还是按事件不冒泡进行处理。但如果使用新版本SDK重新打包JS应用将旧写法按事件冒泡进行处理。为了避免业务逻辑错误建议将旧写法如onclick改成新写法grab:click。 示例 !– xxx.hml – div classcontainertext classtitle{{count}}/textdiv classboxinput typebutton classbtn valueincrease onclickincrease /input typebutton classbtn valuedecrease clickdecrease /!– 传递额外参数 –input typebutton classbtn valuedouble clickmultiply(2) /input typebutton classbtn valuedecuple clickmultiply(10) /input typebutton classbtn valuesquare clickmultiply(count) //div /div // xxx.js export default {data: {count: 0},increase() {this.count;},decrease() {this.count–;},multiply(multiplier) {this.count multiplier * this.count;} }; /* xxx.css / .container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 454px;height: 454px; } .title {font-size: 30px;text-align: center;width: 200px;height: 100px; } .box {width: 454px;height: 200px;justify-content: center;align-items: center;flex-wrap: wrap; } .btn {width: 200px;border-radius: 0;margin-top: 10px;margin-left: 10px; } 2.1.4. 列表渲染 !– xxx.hml – div classarray-container!– div列表渲染 –!– 默认\(item代表数组中的元素, \)idx代表数组中的元素索引 –div classitem-container for{{array}} tidid onclickchangeTexttext{{\(idx}}.{{\)item.name}}/text/div!– 自定义元素变量名称 –div classitem-container for{{value in array}} tidid onclickchangeTexttext{{\(idx}}.{{value.name}}/text/div!-- 自定义元素变量、索引名称 --div classitem-container for{{(index, value) in array}} tidid onclickchangeTexttext{{index}}.{{value.name}}/text/div /div // xxx.js export default {data: {array: [{id: 1, name: jack, age: 18}, {id: 2, name: tony, age: 18},],},changeText: function() {if (this.array[1].name tony){this.array.splice(1, 1, {id:2, name: Isabella, age: 18});} else {this.array.splice(2, 1, {id:3, name: Bary, age: 18});}}, } .array-container {width: 100%;height: 100%;justify-content: center;align-items: center;flex-direction: column; } ​ .item-container {margin-top: 10px;width: 200px;height: 50px;flex-direction: column; } tid属性主要用来加速for循环的重渲染旨在列表中的数据有变更时提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识如果未指定数组中每个元素的索引为该元素的唯一id。例如上述tidid表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下 forarray其中array为数组对象array的元素变量默认为\)item。 forv in array其中v为自定义的元素变量元素索引默认为$idx。 for(i, v) in array其中元素索引为i元素变量为v遍历数组对象array。
   说明 数组中的每个元素必须存在tid指定的数据属性否则运行时可能会导致异常。 数组中被tid指定的属性要保证唯一性如果不是则会造成性能损耗。比如示例中只有id和name可以作为tid字段因为它们属于唯一字段。 tid不支持表达式。
   2.1.5. 条件渲染 条件渲染分为2种if/elif/else和show。两种写法的区别在于第一种写法里if为false时组件不会在vdom中构建也不会渲染而第二种写法里show为false时虽然也不渲染但会在vdom中构建另外当使用if/elif/else写法时节点必须是兄弟节点否则编译无法通过。实例如下 !– xxx.hml – div classcontainerbutton classbtn typecapsule valuetoggleShow onclicktoggleShow/buttonbutton classbtn typecapsule valuetoggleDisplay onclicktoggleDisplay/buttontext if{{show}} Hello-One /texttext elif{{display}} Hello-Two /texttext else Hello-World /text /div // xxx.js export default {data: {show: false,display: true,},toggleShow: function() {this.show !this.show;},toggleDisplay: function() {this.display !this.display;} } 优化渲染优化show方法。当show为真时节点正常渲染当为假时仅仅设置display样式为none。 !– xxx.hml – div classcontainerbutton classbtn typecapsule valuetoggle onclicktoggle/buttontext show{{visible}} Hello World /text /div // xxx.js export default {data: {visible: false,},toggle: function() {this.visible !this.visible;}, } 说明 禁止在同一个元素上同时设置for和if属性。 2.2. CSS语法 CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式也可在页面CSS样式文件中对组件、页面自定义不同的样式。 2.2.1. 样式导入 为了模块化管理和代码复用CSS样式文件支持 import 语句导入 CSS 文件。 2.2.2. 声明样式 每个页面目录下存在一个与布局hml文件同名的css文件用来描述该hml页面中组件的样式决定组件应该如何显示。 内部样式支持使用style、class属性来控制组件的样式。例如 !– index.hml –div classcontainer  text stylecolor: redHello World/text/div / index.css /.container {  justify-content: center;} 文件导入合并外部样式文件。例如在common目录中定义样式文件style.css并在index.css文件首行中进行导入 / style.css /.title {  font-size: 50px;} / index.css /import ../../common/style.css;.container {  justify-content: center;}
   2.2.3. 选择器 css选择器用于选择需要添加样式的元素支持的选择器如下表所示 选择器样例样例描述.class.container用于选择classcontainer的组件。#id#titleId用于选择idtitleId的组件。,.title, .content用于选择classtitle和classcontent的组件。 示例 !– 页面布局xxx.hml –div idcontainerId classcontainer  text idtitleId classtitle标题/text  div classcontent    text idcontentId内容/text  /div/div / 页面样式xxx.css // 对classtitle的组件设置样式 /.title { font-size: 30px;}/ 对idcontentId的组件设置样式 /#contentId { font-size: 20px;}/ 对所有classtitle以及classcontent的组件都设置padding为5px /.title, .content { padding: 5px;} 2.2.4. 伪类 css伪类是选择器中的关键字用于指定要选择元素的特殊状态。 名称支持组件描述:activeinput[typebutton]表示被用户激活的元素如被用户按下的按钮。轻量级智能穿戴上伪类选择器上仅支持background-color 和background-image 的样式设置。:checkedinput[typecheckbox、typeradio]表示checked属性为true的元素。轻量级智能穿戴上伪类选择器上仅支持background-color 和background-image 的样式设置。 伪类示例如下设置按钮的:active伪类可以控制被用户按下时的样式 !– index.hml –div classcontainer  input typebutton classbutton valueButton/input/div / index.css */.button:active { background-color: #888888;/*按钮被激活时背景颜色变为#888888 /} 2.2.5. 样式预编译 预编译提供了利用特有语法生成css的程序可以提供变量、运算等功能令开发者更便捷地定义组件样式目前支持less、sass和scss的预编译。使用样式预编译时需要将原css文件后缀改为less、sass或scss如index.css改为index.less、index.sass或index.scss。 当前文件使用样式预编译例如将原index.css改为index.less / index.less // 定义变量 /colorBackground: #000000;.container {  background-color: colorBackground; / 使用当前less文件中定义的变量 /} 引用预编译文件例如common中存在style.scss文件将原index.css改为index.scss并引入style.scss / style.scss // 定义变量 /$colorBackground: #000000; 在index.scss中引用 / index.scss // 引入外部scss文件 /import ../../common/style.scss;.container {  background-color: $colorBackground; / 使用style.scss中定义的变量 */}
   说明 引用的预编译文件建议放在common目录进行管理。 2.3. JS语法参考 JS文件用来定义HML页面的业务逻辑支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力可以使应用更加富有表现力具备更加灵活的设计。下面讲述JS文件的编译和运行的支持情况。 2.3.1. 语法 支持ES6语法。轻量级智能穿戴支持的ES6语法有限仅支持以下ES6 语法 let/const arrow functions class default value destructuring assignment destructuring binding pattern enhanced object initializer for-of rest parameter template strings 模块声明 使用import方法引入功能模块 import router from ohos.router; 代码引用 使用import方法导入js代码 import utils from ../../common/utils.js;
   2.3.2. 对象 页面对象 属性类型描述dataObject/Function页面的数据模型类型是对象或者函数如果类型是函数返回值必须是对象。属性名不能以\(或_开头不要使用保留字for, if, show, tid。\)refsObject持有注册过ref 属性的DOM元素或子组件实例的对象。 2.3.4. 获取DOM元素 通过\(refs获取DOM元素 !-- index.hml -- div classcontainerimage-animator classimage-player refanimator images{{images}} duration1s onclickhandleClick/image-animator /div // index.js export default {data: {images: [{ src: /common/frame1.png },{ src: /common/frame2.png },{ src: /common/frame3.png },],},handleClick() {const animator this.\)refs.animator; // 获取ref属性为animator的DOM元素const state animator.getState();if (state paused) {animator.resume();} else if (state stopped) {animator.start();} else {animator.pause();}}, };
   以上就是关于js在ArkUI方舟UI框架中的语法使用规则。 参考文档 语法-框架说明-兼容JS的类Web开发范式 (ArkUI.Lite)-ArkTS组件-ArkUI API参考-开发 | 华为开发者联盟 (huawei.com)