提交 2c962b61 编写于 作者: Y yamila

uodate js-framework-resource-restriction.md

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 8020447f
......@@ -37,18 +37,18 @@
## 引用JS模块内resources资源
在应用开发的hml和js文件中使用$r的语法,可以对JS模块内的resources目录下的json资源进行格式化,获取相应的资源内容。
在应用开发的hml和js文件中使用$r的语法,可以对JS模块内的resources目录下的json资源进行格式化,获取相应的资源内容,该目录与pages目录同级,具体目录结构请参考[文件组织](js-framework-file.md)
| 属性 | 类型 | 描述 |
| -------- | -------- | -------- |
| $r | (key:&nbsp;string)&nbsp;=&gt;&nbsp;string | 获取资源限定下具体的资源内容。例如:this.$r('strings.hello')。<br/>参数说明:<br/>-&nbsp;key:定义在资源限定文件中的键值,如strings.hello。 |
| $r | (key:&nbsp;string)&nbsp;=&gt;&nbsp;string | 获取资源限定下具体的资源内容。例如:$r('strings.hello')。<br/>参数说明:<br/>-&nbsp;key:定义在资源限定文件中的键值,如strings.hello。 |
**res-defaults.json示例:**<br/>
```
```json
{
strings: {
hello: 'hello world'
"strings": {
"hello": "hello world"
}
}
```
......@@ -57,7 +57,7 @@
resources/res-dark.json:
```
```json
{
"image": {
"clockFace": "common/dark_face.png"
......@@ -70,7 +70,7 @@ resources/res-dark.json:
resources/res-defaults.json:
```
```json
{
"image": {
"clockFace": "common/face.png"
......@@ -81,7 +81,7 @@ resources/res-defaults.json:
}
```
```
```html
<!-- xxx.hml -->
<div style="background-color: {{ $r('colors.background') }}">
<image src="{{ $r('image.clockFace') }}"></image>
......
......@@ -11,7 +11,7 @@ JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语
使用import方法引入功能模块:
```js
import router from '@system.router';
import router from '@ohos.router';
```
- 代码引用
......
......@@ -388,7 +388,7 @@ button{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
animation: '',
......
......@@ -65,7 +65,7 @@ index和detail这两个页面均包含一个text组件和button组件:text组
import router from '@ohos.router';
export default {
launch() {
router.push ({
router.pushUrl ({
url: 'pages/detail/detail',
});
},
......
......@@ -181,10 +181,10 @@ tabs默认展示索引为index的标签及内容。通过设置vertical属性使
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
tabChange(e){
prompt.showToast({
promptAction.showToast({
message: "Tab index: " + e.index
})
}
......@@ -271,7 +271,7 @@ background-color:#F1F3F5;
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data() {
return {
......
......@@ -121,7 +121,7 @@ button是按钮组件,其类型包括胶囊按钮、圆形按钮、文本按
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
percent: 0,
......@@ -135,7 +135,7 @@ export default {
this.percent += 1;
this.downloadText = this.percent+ "%";
} else{
prompt.showToast({
promptAction.showToast({
message: "Download succeeded."
})
this.paused()
......@@ -151,13 +151,13 @@ export default {
},
setProgress(e) {
if(this.isPaused){
prompt.showToast({
promptAction.showToast({
message: "Started Downloading"
})
this.start();
this.isPaused = false;
}else{
prompt.showToast({
promptAction.showToast({
message: "Paused."
})
this.paused();
......
......@@ -116,7 +116,7 @@ Canvas添加长按事件,长按后可获取Canvas组件的dataUrl值(toDataU
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
dataURL:null,
......@@ -130,7 +130,7 @@ export default {
let el = this.$refs.canvas1
let dataUrl = el.toDataURL()
this.dataURL = dataUrl;
prompt.showToast({duration:2000,message:"long press,get dataURL"})
promptAction.showToast({duration:2000,message:"long press,get dataURL"})
}
}
```
......
......@@ -51,7 +51,6 @@ select{
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
......@@ -254,7 +253,6 @@ select{
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
......@@ -352,7 +350,6 @@ select{
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
......@@ -478,7 +475,6 @@ select{
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
......@@ -635,7 +631,7 @@ text{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
compositeOperation: 'source-over'
......@@ -678,7 +674,7 @@ export default {
};
// 图片获取失败触发方法
img1.onerror = function() {
prompt.showToast({message:"error",duration:2000})
promptAction.showToast({message:"error",duration:2000})
};
},
rotate(){
......@@ -805,7 +801,7 @@ text{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
ctx: '',
......@@ -818,7 +814,7 @@ export default {
save(){
// 画笔储存
this.ctx.save();
prompt.showToast({message:"save succeed"});
promptAction.showToast({message:"save succeed"});
},
clear(){
this.ctx.clearRect(0,0,600,500);
......
......@@ -119,22 +119,22 @@ button{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
canceldialog(e){
prompt.showToast({
promptAction.showToast({
message: 'dialogCancel'
})
},
opendialog(){
this.$element('dialogId').show()
prompt.showToast({
promptAction.showToast({
message: 'dialogShow'
})
},
confirmClick(e) {
this.$element('dialogId').close()
prompt.showToast({
promptAction.showToast({
message: 'dialogClose'
})
},
......
......@@ -120,15 +120,15 @@ form是一个表单容器,支持容器内[Input](../reference/arkui-js/js-comp
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default{
onSubmit(result) {
prompt.showToast({
promptAction.showToast({
message: result.value.radioGroup
})
},
onReset() {
prompt.showToast({
promptAction.showToast({
message: 'Reset All'
})
}
......@@ -201,15 +201,15 @@ label{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
formSubmit() {
prompt.showToast({
promptAction.showToast({
message: 'Submitted.'
})
},
formReset() {
prompt.showToast({
promptAction.showToast({
message: 'Reset.'
})
}
......
......@@ -77,7 +77,7 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
```js
// index.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
gutterWidth:'',
......@@ -95,13 +95,13 @@ export default {
this.columns= result;
})
setTimeout(()=>{
prompt.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
promptAction.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
this.gutterWidth+',getColumns:'+this.columns})
})
},
getSizeType(){
this.$element('mygrid').getSizeType((result)=>{
prompt.showToast({duration:2000,message:'get size type:'+result})
promptAction.showToast({duration:2000,message:'get size type:'+result})
})
},
}
......
......@@ -177,7 +177,7 @@ export default {
```js
// index.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
imginfo: [
......@@ -201,22 +201,22 @@ export default {
this.$element('img').resume()
},
popstart(e) {
prompt.showToast({
promptAction.showToast({
message: '开始'
})
},
poppause(e) {
prompt.showToast({
promptAction.showToast({
message: '暂停'
})
},
popstop(e) {
prompt.showToast({
promptAction.showToast({
message: '停止'
})
},
popresume(e) {
prompt.showToast({
promptAction.showToast({
message: '恢复'
})
}
......
......@@ -101,17 +101,17 @@ image{
```js
// index.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
imageComplete(i,e){
prompt.showToast({
promptAction.showToast({
message: "image "+i+"'s width"+ e.width+"----image "+i+"'s height"+e.height,
duration: 3000,
})
},
imageError(i,e){
setTimeout(()=>{
prompt.showToast({
promptAction.showToast({
message: "Failed to load image "+i+".",
duration: 3000,
})
......@@ -177,7 +177,7 @@ export default {
```js
// index.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
testuri: 'common/images/bg-tv.jpg',
......@@ -185,7 +185,7 @@ export default {
timer: null
},
changeopacity: function () {
prompt.showToast({
promptAction.showToast({
message: 'Touch and hold the image.'
})
var opval = this.imageopacity * 20
......
......@@ -145,16 +145,16 @@ text{
```js
// xxx.js
import prompt from '@system.prompt'
import promptAction from '@ohos.promptAction'
export default {
search(e){
prompt.showToast({
promptAction.showToast({
message: e.value,
duration: 3000,
});
},
translate(e){
prompt.showToast({
promptAction.showToast({
message: e.value,
duration: 3000,
});
......@@ -200,14 +200,14 @@ export default {
```js
// xxx.js
import prompt from '@system.prompt'
import promptAction from '@ohos.promptAction'
export default {
data:{
value:'',
},
change(e){
this.value = e.value;
prompt.showToast({
promptAction.showToast({
message: "value: " + this.value,
duration: 3000,
});
......@@ -222,7 +222,7 @@ import prompt from '@system.prompt'
error:this.value + 'This field cannot be left empty.'
});
}else{
prompt.showToast({
promptAction.showToast({
message: "success "
});
}
......@@ -302,14 +302,14 @@ label {
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
},
onInit() {
},
btnclick(e) {
prompt.showToast({
promptAction.showToast({
message:'Saved successfully!'
})
}
......
......@@ -162,7 +162,7 @@ margin-top:30px;
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
direction: 'column',
......@@ -179,12 +179,12 @@ export default {
}
},
collapse(e) {
prompt.showToast({
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
prompt.showToast({
promptAction.showToast({
message: 'Open ' + e.groupid
})
}
......
......@@ -150,15 +150,15 @@ option{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
select(e) {
prompt.showToast({
promptAction.showToast({
message: e.value
})
},
cancel(){
prompt.showToast({
promptAction.showToast({
message: "cancel"
})
},
......@@ -242,7 +242,7 @@ option{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
fresh: false,
......
......@@ -49,7 +49,7 @@ select{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
el: null,
......@@ -70,7 +70,7 @@ export default {
_this.offCanvas.drawImage(_this.img, 100, 100, 400, 300);
};
this.img.onerror = function() {
prompt.showToast({message:"error",duration:2000})
promptAction.showToast({message:"error",duration:2000})
};
var bitmap = this.offscreen.transferToImageBitmap(); this.ctx.transferFromImageBitmap(bitmap);
},
......
......@@ -36,7 +36,7 @@ canvas {
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
onShow() {
......@@ -139,7 +139,7 @@ text {
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
......
......@@ -144,7 +144,7 @@ picker的hours属性定义时间的展现格式,可选类型有12小时制和2
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]],
......@@ -153,10 +153,10 @@ export default {
},
multitextonchange(e) {
this.multitextvalue=e.newValue;
prompt.showToast({ message:"Multi-column text changed to:" + e.newValue })
promptAction.showToast({ message:"Multi-column text changed to:" + e.newValue })
},
multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" })
promptAction.showToast({ message:"multitextoncancel" })
},
}
```
......@@ -246,7 +246,7 @@ export default {
```js
// xxx.js
import pmt from '@system.prompt'
import promptAction from '@ohos.promptAction'
export default {
data: {
yorn1:'No',
......@@ -281,10 +281,10 @@ export default {
dateonchange(e) {
e.month=e.month+1;
this.datevalue = e.year + "-" + e.month + "-" + e.day;
pmt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day })
promptAction.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day })
},
showtoast() {
pmt.showToast({
promptAction.showToast({
message: 'Submitted.',
duration: 2000,
gravity: 'center'
......
......@@ -213,7 +213,7 @@ switch{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
backstar: '',
......@@ -249,7 +249,7 @@ export default {
this.rate = e.progress
},
showrating(e) {
prompt.showToast({
promptAction.showToast({
message: '当前评分' + e.rating
})
}
......
......@@ -132,34 +132,34 @@ text{
```js
// index.js
import prompt from '@system.prompt'
import promptAction from '@ohos.promptAction'
export default {
search(e){
prompt.showToast({
promptAction.showToast({
message: e.value,
duration: 3000,
});
},
translate(e){
prompt.showToast({
promptAction.showToast({
message: e.value,
duration: 3000,
});
},
share(e){
prompt.showToast({
promptAction.showToast({
message: e.value,
duration: 3000,
});
},
change(e){
prompt.showToast({
promptAction.showToast({
message: e.value,
duration: 3000,
});
},
submit(e){
prompt.showToast({
promptAction.showToast({
message: 'submit',
duration: 3000,
});
......@@ -218,7 +218,7 @@ export default {
```js
// index.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
showsearch: true,
......@@ -243,13 +243,13 @@ export default {
}
},
submit(e) {
prompt.showToast({
promptAction.showToast({
message: '搜索!',
duration: 2000
})
},
change(e) {
prompt.showToast({
promptAction.showToast({
message: '内容:' + e.text,
duration: 2000
})
......
......@@ -248,7 +248,7 @@ button{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data: {
index:0,
......@@ -261,20 +261,20 @@ export default {
this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'});
},
stepperFinish(){
prompt.showToast({
promptAction.showToast({
message: 'All Finished'
})
},
stepperChange(e){
console.log("stepperChange"+e.index)
prompt.showToast({
promptAction.showToast({
// index表示当前步骤的序号
message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
})
},
stepperNext(e){
console.log("stepperNext"+e.index)
prompt.showToast({
promptAction.showToast({
// pendingIndex表示将要跳转的序号
message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
})
......@@ -363,8 +363,8 @@ export default {
```js
// xxx.js
import prompt from '@system.prompt';
import router from '@system.router';
import promptAction from '@ohos.promptAction';
import router from '@ohos.router';
let myset = new Set();
export default {
data: {
......
......@@ -261,13 +261,13 @@ select{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default{
change(e){
prompt.showToast({duration:2000,message:"current index:"+e.index});
promptAction.showToast({duration:2000,message:"current index:"+e.index});
},
finish(){
prompt.showToast({duration:2000,message:"切换动作结束"});
promptAction.showToast({duration:2000,message:"切换动作结束"});
},
selectChange(e){
this.$element('swiper').swipeTo({index: Number(e.newValue)});
......@@ -343,7 +343,7 @@ swiper{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
index: 0,
......
......@@ -61,15 +61,15 @@ switch {
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
switchChange(e){
if(e.checked){
prompt.showToast({
promptAction.showToast({
message: "open"
});
}else{
prompt.showToast({
promptAction.showToast({
message: "close"
});
}
......@@ -167,7 +167,6 @@ switch{
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
address: '',
......
......@@ -153,17 +153,17 @@ toolbar-item{
```js
// xxx.js
import prompt from '@system.prompt';
import promptAction from '@ohos.promptAction';
export default {
data:{
itemColor:'black'
},
itemClick(){
this.itemColor= "red";
prompt.showToast({duration:2000,message:'item click'});
promptAction.showToast({duration:2000,message:'item click'});
},
itemLongPress(){
prompt.showToast({duration:2000,message:'item long press'});
promptAction.showToast({duration:2000,message:'item long press'});
this.itemColor= "blue";
},
}
......@@ -210,7 +210,6 @@ toolbar-item{
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
active: 0,
......
......@@ -111,7 +111,7 @@
}
```
5. 闪屏动画播放结束后定格1s,进入FoodCategoryList页面。设置animateTo的onFinish回调接口,调用定时器Timer的setTimeout接口延时1s后,调用router.replace,显示FoodCategoryList页面。
5. 闪屏动画播放结束后定格1s,进入FoodCategoryList页面。设置animateTo的onFinish回调接口,调用定时器Timer的setTimeout接口延时1s后,调用router.replaceUrl,显示FoodCategoryList页面。
```ts
import router from '@ohos.router'
......@@ -137,7 +137,7 @@
delay: 100,
onFinish: () => {
setTimeout(() => {
router.replace({ url: "pages/FoodCategoryList" })
router.replaceUrl({ url: "pages/FoodCategoryList" })
}, 1000);
}
}, () => {
......@@ -201,7 +201,7 @@
delay: 100,
onFinish: () => {
setTimeout(() => {
router.replace({ url: "pages/FoodCategoryList" })
router.replaceUrl({ url: "pages/FoodCategoryList" })
}, 1000);
}
}, () => {
......@@ -305,7 +305,7 @@
.height(184)
.width('100%')
.onClick(() => {
router.push({ url: 'pages/FoodDetail', params: { foodData: this.foodItem } })
router.pushUrl({ url: 'pages/FoodDetail', params: { foodData: this.foodItem } })
})
}
}
......
......@@ -61,7 +61,7 @@
.height(184)
.width('100%')
.onClick(() => {
router.push({ url: 'pages/FoodDetail' })
router.pushUrl({ url: 'pages/FoodDetail' })
})
}
}
......@@ -138,7 +138,7 @@
FoodGridItem调用的routerAPI同样有携带参数跳转的能力,使用方法和Navigator类似。
```ts
router.push({
router.pushUrl({
url: 'pages/FoodDetail',
params: { foodData: this.foodItem }
})
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册