当前位置:   article > 正文

鸿蒙ARKTS--简易的购物网站_用arkts写购物网页

用arkts写购物网页

目录

一、media

二、string.json文件

三、pages

3.1 登录页面:gouwuPage.ets

3.2 PageResource.ets

3.3 商品页面:shangpinPage.ets 

3.4 我的页面:wodePage.ets

3.5 注册页面:zhucePage.ets

3. 购物网站主页面:gwPage.ets


一、media

图片位置:entry > src > main > resources > base > media

百度网盘链接:https://pan.baidu.com/s/1JZn-U5Sqk6hOSHKz6D_98Q 
提取码:bosg

二、string.json文件

以下三个文件均需要添加。

  1. {
  2. "string": [
  3. {
  4. "name": "mylove",
  5. "value": "我的最爱"
  6. },
  7. {
  8. "name": "historyrecord",
  9. "value": "历史记录"
  10. },
  11. {
  12. "name": "message",
  13. "value": "消息"
  14. },
  15. {
  16. "name": "shoppingcart",
  17. "value": "购物栏"
  18. },
  19. {
  20. "name": "mygoal",
  21. "value": "我的目标"
  22. },
  23. {
  24. "name": "group",
  25. "value": "圈子"
  26. },
  27. {
  28. "name": "favorites",
  29. "value": "收藏"
  30. },
  31. {
  32. "name": "recylebin",
  33. "value": "回收站"
  34. },
  35. {
  36. "name": "yifu",
  37. "value": "衣服"
  38. },
  39. {
  40. "name": "yan",
  41. "value": "烟"
  42. },
  43. {
  44. "name": "jiu",
  45. "value": "酒"
  46. },
  47. {
  48. "name": "huazhuangpin",
  49. "value": "化妆品"
  50. },
  51. {
  52. "name": "xie",
  53. "value": "鞋"
  54. },
  55. {
  56. "name": "daifukuan",
  57. "value": "待付款"
  58. },
  59. {
  60. "name": "daifahuo",
  61. "value": "待发货"
  62. },
  63. {
  64. "name": "daishouhuo",
  65. "value": "待收货"
  66. },
  67. {
  68. "name": "daipinjia",
  69. "value": "待评价"
  70. }
  71. ]
  72. }

三、pages

3.1 登录页面:gouwuPage.ets

  1. import router from '@ohos.router'
  2. import prompt from '@ohos.promptAction';
  3. @Entry
  4. @Component
  5. struct GouwuPage{
  6. //定义SwiperController类型的变量
  7. private controller: SwiperController =new SwiperController()
  8. private intervalID=0
  9. private startPlay(swiper:SwiperController){
  10. this.intervalID=setInterval(function (){
  11. swiper.showNext()
  12. },3000)
  13. }
  14. aboutToAppear() {
  15. this.startPlay(this.controller)
  16. }
  17. @State zhanghao:string|number =''
  18. @State mima:string|number =''
  19. @State show:boolean=false
  20. private timeOut:number=-1
  21. //登录方法
  22. login():void {
  23. if (this.zhanghao == '' || this.mima == '') {
  24. prompt.showToast({
  25. message: '账号密码不能为空'
  26. })
  27. } else {
  28. AlertDialog.show({
  29. message:'loading.....'
  30. })
  31. this.show = true
  32. if (this.timeOut = -1) {
  33. this.timeOut = setTimeout(() => {
  34. this.show = false
  35. this.timeOut = -1
  36. router.pushUrl({
  37. url: 'pages/gwPage'
  38. })
  39. },2000)
  40. }
  41. }
  42. }
  43. build() {
  44. Row() {
  45. Column({space:15}) {
  46. Swiper(this.controller){
  47. Image($r('app.media.img1'))
  48. Image($r('app.media.img2'))
  49. Image($r('app.media.img3'))
  50. }
  51. .width('100%')
  52. .height(150)
  53. //默认显示第一页
  54. .index(0)
  55. .indicator(true)
  56. Image($r("app.media.gw"))
  57. .height(125)
  58. .width(300)
  59. .borderRadius(15)
  60. Text("欢迎登录")
  61. .fontSize(25)
  62. .fontColor("#696969")
  63. TextInput({ placeholder:"账号"})
  64. .width(400)
  65. .height(50)
  66. .margin(10)
  67. .borderRadius(10)
  68. .type(InputType.Normal)
  69. .onChange(value =>{
  70. this.zhanghao = value;})
  71. TextInput({ placeholder:"密码"})
  72. .width(400)
  73. .height(50)
  74. .margin(10)
  75. .borderRadius(10)
  76. .type(InputType.Password)
  77. .onChange(value =>{
  78. this.mima = value;})
  79. Text('还没有账号?去注册')
  80. .fontSize(18)
  81. .fontColor('#1296db')
  82. .decoration({ type: TextDecorationType.Underline, color:('#1296db') })
  83. .textAlign(TextAlign.Start)
  84. .onClick(()=>{
  85. router.pushUrl({
  86. url:"pages/zhucePage"
  87. })
  88. })
  89. Row() {
  90. Button('登录', { type: ButtonType.Capsule })
  91. .backgroundColor('#1296db')
  92. .width(200)
  93. .height(55)
  94. .fontSize(30)
  95. .margin(30)
  96. .borderRadius(30)
  97. .onClick(() => {
  98. //处理单机事件
  99. this.login()
  100. })
  101. if (this.show) {
  102. // 加载组件
  103. LoadingProgress()
  104. .color(Color.Blue)
  105. .height(50)
  106. .width(50)
  107. }
  108. }
  109. }
  110. .width('100%')
  111. .height('100%')
  112. .alignItems(HorizontalAlign.Center)
  113. .padding({left:20,right:20,top:10})
  114. }
  115. .width('100%')
  116. .height('105%')
  117. .backgroundImage($r('app.media.beijing'))
  118. .backgroundImageSize(ImageSize.Cover)
  119. }
  120. }

 

3.2 PageResource.ets

  1. export default class PageResource {
  2. title:Resource;
  3. img:Resource;
  4. others?:Resource;
  5. constructor(title:Resource,img:Resource,others?:Resource) {
  6. this.title=title
  7. this.img=img
  8. this.others=others
  9. }
  10. }

3.3 商品页面:shangpinPage.ets 

  1. import itemData from './PageResource'
  2. @Entry
  3. @Component
  4. export default struct ShangpinPage {
  5. private swiperController:SwiperController =new SwiperController()
  6. //商品图片类型
  7. getSwiperImages():Array<Resource>{
  8. let swiperImages:Resource[]=[
  9. $r('app.media.img1'),
  10. $r('app.media.img2'),
  11. $r('app.media.img3')
  12. ]
  13. return swiperImages;
  14. }
  15. //获取第一部分商品分类数据
  16. getFirstData():Array<itemData>{
  17. let firstData:itemData[]=[
  18. new itemData($r('app.string.mylove'), $r('app.media.love')),
  19. new itemData($r('app.string.historyrecord'), $r('app.media.record')),
  20. new itemData($r('app.string.message'), $r('app.media.message')),
  21. new itemData($r('app.string.shoppingcart'), $r('app.media.shopping')),
  22. new itemData($r('app.string.mygoal'), $r('app.media.target')),
  23. new itemData($r('app.string.group'), $r('app.media.circle')),
  24. new itemData($r('app.string.favorites'), $r('app.media.favorite')),
  25. new itemData($r('app.string.recylebin'), $r('app.media.recycle'))
  26. ]
  27. return firstData;
  28. }
  29. //获取的人部分商品列表展示
  30. getSecondGridData(): Array<itemData> {
  31. let secondGridData: itemData[] = [
  32. new itemData($r('app.string.yifu'), $r('app.media.yifu'), $r('app.media.img3')),
  33. new itemData($r('app.string.yan'), $r('app.media.yan'), $r('app.media.img3')),
  34. new itemData($r('app.string.jiu'), $r('app.media.jiu'), $r('app.media.img3')),
  35. new itemData($r('app.string.huazhuangpin'), $r('app.media.hauzhuangpin'), $r('app.media.img3')),
  36. new itemData($r('app.string.xie'), $r('app.media.xie'), $r('app.media.img3'))
  37. ];
  38. return secondGridData;
  39. }
  40. build() {
  41. Scroll(){
  42. Column({space:12}){
  43. Column(){
  44. Row({space:6}) {
  45. Image($r("app.media.tubiao"))
  46. .width(50)
  47. .height(50)
  48. Text('首页')
  49. .fontSize('24fp')
  50. .fontWeight(FontWeight.Bold)
  51. .margin({ top: '12vp' })
  52. .padding({ left: '12vp' })
  53. Image($r("app.media.search"))
  54. .width(40)
  55. .height(40)
  56. .margin({left:160})
  57. }
  58. }
  59. .width('100%')
  60. .alignItems(HorizontalAlign.Start)
  61. //轮播图
  62. Swiper(this.swiperController){
  63. ForEach(this.getSwiperImages(),(img:Resource)=>{
  64. Image(img).borderRadius('16vp')
  65. },(img:Resource)=>JSON.stringify(img.id))
  66. }
  67. .autoPlay(true)
  68. .margin({ top: '1vp' })
  69. // 第一部分 商品分类
  70. Grid() {
  71. ForEach(this.getFirstData(), (item: itemData) => {
  72. GridItem() {
  73. Column() {
  74. Image(item.img)
  75. .width('32vh')
  76. .height('32vh')
  77. Text(item.title)
  78. .fontSize('12fp')
  79. .margin({ top: '4vh' })
  80. .fontWeight(FontWeight.Bold)
  81. }
  82. }
  83. }, (item: itemData) => JSON.stringify(item))
  84. }
  85. .columnsTemplate('1fr 1fr 1fr 1fr')
  86. .rowsTemplate('1fr 1fr')
  87. .columnsGap('8vp')
  88. .rowsGap('12vp')
  89. .padding({ top: '12vp', bottom: '12vp' })
  90. .height('124vp')
  91. .borderRadius('24vp')
  92. Row({space:10}){
  93. Image($r('app.media.data'))
  94. .width(25)
  95. .height(33)
  96. Text("商品列表")
  97. .fontSize('20fp')
  98. .fontWeight(FontWeight.Bold)
  99. .width('100%')
  100. .margin({ top: '12vp' })
  101. }
  102. .margin({left:'15vp'})
  103. Grid() {
  104. ForEach(this.getSecondGridData(), (item: itemData) => {
  105. GridItem() {
  106. Column() {
  107. Image(item.img)
  108. .width('124vh')
  109. .height('124vh')
  110. Text(item.title)
  111. .fontSize('18fp')
  112. .margin({ top: '5vh' })
  113. .fontWeight(FontWeight.Bold)
  114. }
  115. }
  116. }, (item: itemData) => JSON.stringify(item))
  117. }
  118. .columnsTemplate('1fr 1fr')
  119. .rowsTemplate('1fr 1fr 1fr')
  120. .columnsGap('12vp')
  121. .rowsGap('12vp')
  122. .padding({ top: '12vp', bottom: '12vp' })
  123. .height('550vp')
  124. .borderRadius('24vp')
  125. }
  126. .width('100%')
  127. }
  128. }
  129. }

 

3.4 我的页面:wodePage.ets

  1. import itemData from './PageResource'
  2. import router from '@ohos.router'
  3. @Entry
  4. @Component
  5. export default struct WodePage {
  6. @State value:number =3
  7. getFirstData(): Array<itemData> {
  8. let firstData: itemData[] = [
  9. new itemData($r('app.string.daifukuan'), $r('app.media.daifukuan')),
  10. new itemData($r('app.string.daifahuo'), $r('app.media.daifahuo')),
  11. new itemData($r('app.string.daishouhuo'), $r('app.media.daishouhuo')),
  12. new itemData($r('app.string.daipinjia'), $r('app.media.daipinjia'))
  13. ]
  14. return firstData;
  15. }
  16. build() {
  17. // 标题部分
  18. Column({space:12}) {
  19. Row() {
  20. Row({ space: 10 }) {
  21. Image($r('app.media.rentou'))
  22. .width(80)
  23. .height(80)
  24. .borderRadius(50)
  25. Text('用户ID:m0_64304713')
  26. .margin({ left: 5 })
  27. .fontColor('#010101')
  28. }
  29. .margin({ top: 20, left: 20 })
  30. }
  31. .width('100%')
  32. .height(180)
  33. .border({width:1})
  34. .backgroundColor("#ff8c8686")
  35. Row({ space: 8 }) {
  36. //余额及金钱所在row
  37. Row() {
  38. Text('余额:')
  39. .fontSize(16)
  40. .padding({left:20})
  41. Text('¥'+this.value)
  42. .fontSize(24)
  43. .fontWeight(FontWeight.Bold)
  44. }
  45. .justifyContent(FlexAlign.Start)
  46. Button('提现')
  47. .margin({ right: 40 })
  48. .backgroundColor('#ff000000')
  49. .fontWeight(FontWeight.Bold)
  50. .onClick(()=>{
  51. if(this.value<=0){
  52. AlertDialog.show({message:'余额不足,请充值'})
  53. this.value=0
  54. }else{
  55. AlertDialog.show({message:'提现成功'})
  56. this.value-=1
  57. }
  58. })
  59. }
  60. .width('100%')
  61. .justifyContent(FlexAlign.SpaceBetween)
  62. Column({ space: 20 }) {
  63. Row() {
  64. Text('我的订单')
  65. .fontSize(20)
  66. .onClick(() => {
  67. })
  68. Text('查看所有订单')
  69. .fontSize(18)
  70. .fontColor('#ffb3a8a8')
  71. }.width('100%')
  72. // .border({width:1,})
  73. .justifyContent(FlexAlign.SpaceBetween)
  74. .padding({ left: 20, right: 20 })
  75. Grid() {
  76. ForEach(this.getFirstData(), (item: itemData) => {
  77. GridItem() {
  78. Column() {
  79. Image(item.img)
  80. .width('32vh')
  81. .height('32vh')
  82. Text(item.title)
  83. .fontSize('16fp')
  84. .margin({ top: '4vh' })
  85. }
  86. }
  87. }, (item: itemData) => JSON.stringify(item))
  88. }
  89. .border({ width: 1, })
  90. .columnsTemplate('1fr 1fr 1fr 1fr')
  91. .rowsTemplate('1fr')
  92. .columnsGap('12vp')
  93. .rowsGap('12vp')
  94. .padding({ bottom: '18vp',top:'18vp' })
  95. .height('90vp')
  96. .borderRadius('24vp')
  97. Column(){
  98. Row({ space: 50 }) {
  99. Image($r('app.media.gwtuabiao'))
  100. .width(50)
  101. .height(50)
  102. .borderRadius('24vp')
  103. Text('去购物')
  104. .fontSize(18)
  105. }
  106. .width('90%')
  107. .backgroundColor("#789")
  108. .margin({ bottom: 20 })
  109. .padding({ left: 20, right: 20, top: 10, bottom: 10 })
  110. .borderRadius('16vp')
  111. .onClick(() => {
  112. router.pushUrl({
  113. url: 'pages/gwPage',
  114. })
  115. })
  116. Row({ space: 50 }) {
  117. Image($r('app.media.chongzhi'))
  118. .width(50)
  119. .height(50)
  120. .borderRadius('24vp')
  121. Text('充值入口')
  122. .fontSize(18)
  123. }
  124. .width('90%')
  125. .backgroundColor("#789")
  126. .margin({ bottom: 20 })
  127. .padding({ left: 20, right: 20, top: 10, bottom: 10 })
  128. .borderRadius('16vp')
  129. .onClick(() => {
  130. AlertDialog.show({message:this.value.toString()})
  131. })
  132. Row({ space: 50 }) {
  133. Image($r('app.media.xiugai'))
  134. .width(50)
  135. .height(50)
  136. .borderRadius('24vp')
  137. Text('修改信息')
  138. .fontSize(18)
  139. }
  140. .width('90%')
  141. .backgroundColor("#789")
  142. .margin({ bottom: 20 })
  143. .padding({ left: 20, right: 20, top: 10, bottom: 10 })
  144. .borderRadius('16vp')
  145. Row({ space: 50 }) {
  146. Image($r('app.media.tuichu'))
  147. .width(50)
  148. .height(50)
  149. .borderRadius('20vp')
  150. Text('退出登录')
  151. .fontSize(18)
  152. }
  153. .width('90%')
  154. .backgroundColor("#789")
  155. .margin({ bottom: 20 })
  156. .padding({ left: 20, right: 20, top: 10, bottom: 10 })
  157. .borderRadius('16vp')
  158. .onClick(() => {
  159. router.pushUrl({
  160. url: 'pages/gouwuPage',
  161. })
  162. })
  163. }.width('100%')
  164. .height('40%')
  165. // .border({width:1})
  166. }
  167. .alignItems(HorizontalAlign.Start)
  168. .width('100%')
  169. .height('100%')
  170. }
  171. .backgroundColor('#ffe1e7de')
  172. }
  173. }

3.5 注册页面:zhucePage.ets

  1. import router from '@ohos.router';
  2. @Entry
  3. @Component
  4. struct ZhucePage {
  5. @State zhanghao:number|string = ''
  6. @State mima1:number|string = ''
  7. @State mima2:number|string = ''
  8. @State mismessage:number|string = ''
  9. @State successmessage:number|string = ''
  10. build() {
  11. Row() {
  12. Column({space:18}) {
  13. Image($r('app.media.zhuce'))
  14. .width(300)
  15. .height(150)
  16. .margin({top:40})
  17. Column(){
  18. Text("新用户注册")
  19. .fontSize(25)
  20. .fontColor("#696969")
  21. .margin({top:20})
  22. TextInput({ placeholder:"账号"})
  23. .width(300)
  24. .height(50)
  25. .margin(10)
  26. .borderRadius(10)
  27. .type(InputType.Normal)
  28. .backgroundColor('#888')
  29. .onChange(value =>{
  30. this.zhanghao = value;})
  31. TextInput({ placeholder:"密码"})
  32. .width(300)
  33. .height(50)
  34. .margin(10)
  35. .borderRadius(10)
  36. .type(InputType.Password)
  37. .backgroundColor('#888')
  38. .onChange(value =>{
  39. this.mima1 = value;
  40. if(this.mima1!=this.mima2){
  41. this.mismessage='密码不一致'
  42. this.successmessage=''
  43. }else{
  44. this.mismessage=''
  45. if(this.mismessage==''&&this.successmessage==''){
  46. this.successmessage='注册成功!'
  47. }
  48. }
  49. })
  50. TextInput({ placeholder:"确认密码"})
  51. .width(300)
  52. .height(50)
  53. .margin(10)
  54. .borderRadius(10)
  55. .type(InputType.Password)
  56. .backgroundColor('#888')
  57. .onChange(value =>{
  58. this.mima2 = value;
  59. if(this.mima1!=this.mima2){
  60. this.mismessage='密码不一致'
  61. this.successmessage=''
  62. }else{
  63. this.mismessage=''
  64. if(this.mismessage==''&&this.successmessage==''){
  65. this.successmessage='注册成功!'
  66. }
  67. }
  68. })
  69. if(this.mismessage){
  70. Text('两次密码不一致!')
  71. .fontSize(12)
  72. .fontColor("red")
  73. }
  74. Button('注册',{type:ButtonType.Capsule})
  75. .backgroundColor('#1296db')
  76. .width(200)
  77. .height(55)
  78. .fontSize(30)
  79. .margin(30)
  80. .borderRadius(30)
  81. .onClick(()=>{
  82. if(this.successmessage=="注册成功!" && this.zhanghao!=''){
  83. AlertDialog.show({message:this.successmessage,
  84. primaryButton:{value:'去登录',action:()=>{
  85. router.pushUrl({
  86. url:"pages/gouwuPage",
  87. /*params:{
  88. src:"pages/zhucePage"
  89. }*/
  90. })
  91. }}
  92. })
  93. }else
  94. {
  95. AlertDialog.show({message:'注册失败!'})
  96. }
  97. })
  98. }
  99. .border({
  100. width:6,
  101. color:0x000000,
  102. style:BorderStyle.Solid
  103. }
  104. )
  105. }
  106. .width('100%')
  107. .justifyContent(FlexAlign.Start)
  108. .height('100%')
  109. }
  110. .height('100%')
  111. .backgroundImage($r('app.media.beijing'))
  112. .backgroundImageSize(ImageSize.Cover)
  113. }
  114. }

3. 购物网站主页面:gwPage.ets

  1. import shangpinPage from './shangpinPage'
  2. import wodePage from './wodePage'
  3. @Entry
  4. @Component
  5. struct GwPage {
  6. @State currentIndex:number=0
  7. private TabsController:TabsController = new TabsController()
  8. @Builder TabBuilder(title:string,targetIndex:number,selectImg:Resource,normalImg:Resource) {
  9. Column(){
  10. Image(this.currentIndex ===targetIndex?selectImg:normalImg)
  11. .size({width:25,height:25})
  12. Text(title)
  13. .fontColor(this.currentIndex ===targetIndex?'#1698ce':'#6b6b6b')
  14. }
  15. .width('100%')
  16. .height('100%')
  17. .justifyContent(FlexAlign.Center)
  18. .onClick(()=>{
  19. this.currentIndex=targetIndex
  20. this.TabsController.changeIndex(this.currentIndex)
  21. })
  22. }
  23. build() {
  24. Tabs({barPosition:BarPosition.End,controller:this.TabsController}){
  25. TabContent(){
  26. shangpinPage()
  27. }
  28. .tabBar(this.TabBuilder('首页',0,$r('app.media.home_selected'),$r('app.media.home_normal')))
  29. TabContent(){
  30. wodePage()
  31. // Column().width('100%').height('100%').backgroundColor('#007dff')
  32. }
  33. .tabBar(this.TabBuilder('我的',1,$r('app.media.mine_selected'),$r('app.media.account')))
  34. }
  35. .barWidth('100%')
  36. .barHeight(50)
  37. .onChange((index:number)=>{
  38. this.currentIndex=index
  39. })
  40. }
  41. }

    

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/757270
推荐阅读
  

闽ICP备14008679号