当前位置:   article > 正文

uniapp的配置和使用

uniapp的配置和使用

①安装环境和编辑器

注册小程序账号

微信开发者工具下载

uniapp 官网

HbuilderX 下载

首先先下载Hbuilder和微信开发者工具 (都是傻瓜式安装),然后注册小程序账号:

拿到appid:

②简单通过demo使用微信开发者工具和Hbuilder

打开Hbuilder创建一个项目:

简单配置一下:将第一步获得的appid输入在此

打开微信开发者工具进行配置:

 打开服务端口(不然项目无法通过微信开发者工具打开):

 运行项目:

成功界面:

 在page右键新建页面,所需页面如图:

 

打开uniapp官网:

 

下载这两个组件:

 

创建默认样式:

global.css :

  1. *{
  2. box-sizing: border-box;
  3. }
  4. page{
  5. background-color: #f5f5f5;
  6. color: #333;
  7. }

在main.js引入:

import './static/css/global.css'

修改pages.json:

  1. {
  2. "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  3. {
  4. "path": "pages/index/index",
  5. "style": {
  6. "navigationBarTitleText": "首页"//这里如果不写会采用项目名
  7. }
  8. },
  9. {
  10. "path" : "pages/category/category",
  11. "style" :
  12. {
  13. "navigationBarTitleText" : "",
  14. "enablePullDownRefresh" : false
  15. }
  16. },
  17. {
  18. "path" : "pages/user/user",
  19. "style" :
  20. {
  21. "navigationBarTitleText" : "",
  22. "enablePullDownRefresh" : false
  23. }
  24. }
  25. ],
  26. "globalStyle": {
  27. "navigationBarTextStyle": "white",
  28. "navigationBarTitleText": "uni-app",//项目名
  29. "navigationBarBackgroundColor": "#3cb371",
  30. "backgroundColor": "#F8F8F8"
  31. },
  32. "uniIdRouter": {},
  33. "condition" : { //模式配置,仅开发期间生效
  34. "current": 0, //当前激活的模式(list 的索引项)
  35. "list": [
  36. {
  37. "name": "", //模式名称
  38. "path": "", //启动页面,必选
  39. "query": "" //启动参数,在页面的onLoad函数里面得到
  40. }
  41. ]
  42. },
  43. "tabBar": {//配置导航栏
  44. "selectedColor": "#FFD700",
  45. "list": [
  46. {
  47. "pagePath": "pages/index/index",
  48. "iconPath": "static/logo.png",
  49. "selectedIconPath": "static/logo.png",
  50. "text": "首页"
  51. },
  52. {
  53. "pagePath": "pages/category/category",
  54. "iconPath": "static/logo.png",
  55. "selectedIconPath": "static/logo.png",
  56. "text": "分类"
  57. },
  58. {
  59. "pagePath": "pages/user/user",
  60. "iconPath": "static/logo.png",
  61. "selectedIconPath": "static/logo.png",
  62. "text": "我的"
  63. }
  64. ]
  65. }
  66. }

index.vue:

  1. <template>
  2. <view>
  3. <view>
  4. <swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"
  5. indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371">
  6. <swiper-item v-for="item in imgs" :key="item" >
  7. <image :src="item" alt="" mode="widthFix" style="width: 100%;" />
  8. </swiper-item>
  9. </swiper>
  10. </view>
  11. <view style="margin: 10px;">
  12. <view style="padding: 5px;background-color: white;font-size: 12px;border-radius: 5px;display: flex;align-items: center;">
  13. <uni-icons type="sound" size="20"></uni-icons>
  14. <view>
  15. {{notice}}
  16. </view>
  17. </view>
  18. </view>
  19. <view style="background-color: white; margin: 5px 0; border-radius: 10px;">
  20. <uni-row>
  21. <uni-col :span="6">
  22. <view class="grid-item-box">
  23. <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
  24. <text style="font-size: 13px; margin-top: 5px;">时令水果</text>
  25. </view>
  26. </uni-col>
  27. <uni-col :span="6">
  28. <view class="grid-item-box">
  29. <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
  30. <text style="font-size: 13px; margin-top: 5px;">品质肉禽</text>
  31. </view>
  32. </uni-col>
  33. <uni-col :span="6">
  34. <view class="grid-item-box">
  35. <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
  36. <text style="font-size: 13px; margin-top: 5px;">新鲜水产</text>
  37. </view>
  38. </uni-col>
  39. <uni-col :span="6">
  40. <view class="grid-item-box">
  41. <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
  42. <text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text>
  43. </view>
  44. </uni-col>
  45. </uni-row>
  46. </view>
  47. <view style="margin: 5px 0; font-size: 12px;">
  48. <uni-row :gutter='10'>
  49. <uni-col :span='12' v-for="item in goodsList" :key="item.name">
  50. <view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;">
  51. <image :src="item.img" mode="widthFix" style="width: 100%;"></image>
  52. <view class="lineEllipsis">{{ item.name }}</view>
  53. <view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view>
  54. <view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addCart(item)"></uni-icons></view>
  55. </view>
  56. </uni-col>
  57. </uni-row>
  58. </view>
  59. </view>
  60. </template>
  61. <script>
  62. export default {
  63. data() {
  64. return {
  65. imgs:[
  66. require('../../static/logo.png'),
  67. require('../../static/logo.png'),
  68. require('../../static/logo.png'),
  69. ],
  70. notices: [
  71. {content: "亲哥哥哥今晚电商直播真的很棒棒噢"},
  72. {content: "啊真的是 uniapp有手就会啊"},
  73. {content: "真的吗?这么easy?"},
  74. {content: "不信你去看看青哥哥的教程呗"},
  75. ],
  76. notice:'',
  77. goodsList: [
  78. { name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,
  79. img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },
  80. { name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,
  81. img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },
  82. { name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,
  83. img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },
  84. { name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,
  85. img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },
  86. { name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果(单果250g+)', price: 29.9,
  87. img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
  88. ]
  89. }
  90. },
  91. onLoad() {
  92. this.loadnotince()
  93. },
  94. methods: {
  95. loadnotince(){
  96. let i=0
  97. this.notice=this.notices[0].content
  98. setInterval(()=>{
  99. this.notice=this.notices[i++].content
  100. if(i==this.notices.length){
  101. i=0
  102. }
  103. },5000)
  104. }
  105. }
  106. }
  107. </script>
  108. <style>
  109. .content {
  110. display: flex;
  111. flex-direction: column;
  112. align-items: center;
  113. justify-content: center;
  114. }
  115. .logo {
  116. height: 200rpx;
  117. width: 200rpx;
  118. margin-top: 200rpx;
  119. margin-left: auto;
  120. margin-right: auto;
  121. margin-bottom: 50rpx;
  122. }
  123. .text-area {
  124. display: flex;
  125. justify-content: center;
  126. }
  127. .title {
  128. font-size: 36rpx;
  129. color: #8f8f94;
  130. }
  131. .grid-item-box {
  132. display: flex;
  133. flex-direction: column;
  134. align-items: center;
  135. justify-content: center;
  136. },
  137. .lineEllipsis {
  138. word-break: break-all;
  139. text-overflow: ellipsis;
  140. display: -webkit-box;
  141. -webkit-box-orient: vertical;
  142. -webkit-line-clamp: 2;
  143. /* 超出几行省略 */
  144. overflow: hidden;
  145. }
  146. </style>

最终效果:

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

闽ICP备14008679号