狮山建网站,个人简历网免费模板,芜湖市建设银行支行网站,烟花代码编程①安装环境和编辑器
注册小程序账号
微信开发者工具下载
uniapp 官网
HbuilderX 下载
首先先下载Hbuilder和微信开发者工具 #xff08;都是傻瓜式安装#xff09;#xff0c;然后注册小程序账号#xff1a; 拿到appid#xff1a; ②简单通过demo使用微信开发者工具和…①安装环境和编辑器
注册小程序账号
微信开发者工具下载
uniapp 官网
HbuilderX 下载
首先先下载Hbuilder和微信开发者工具 都是傻瓜式安装然后注册小程序账号 拿到appid ②简单通过demo使用微信开发者工具和Hbuilder
打开Hbuilder创建一个项目 简单配置一下将第一步获得的appid输入在此 打开微信开发者工具进行配置 打开服务端口不然项目无法通过微信开发者工具打开 运行项目 成功界面 在page右键新建页面所需页面如图 打开uniapp官网 下载这两个组件 创建默认样式 global.css :
*{box-sizing: border-box;
}
page{background-color: #f5f5f5;color: #333;
}
在main.js引入
import ./static/css/global.css
修改pages.json
{pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationBarTitleText: 首页//这里如果不写会采用项目名}},{path : pages/category/category,style : {navigationBarTitleText : ,enablePullDownRefresh : false}},{path : pages/user/user,style : {navigationBarTitleText : ,enablePullDownRefresh : false}}],globalStyle: {navigationBarTextStyle: white,navigationBarTitleText: uni-app,//项目名navigationBarBackgroundColor: #3cb371,backgroundColor: #F8F8F8},uniIdRouter: {},condition : { //模式配置仅开发期间生效current: 0, //当前激活的模式(list 的索引项)list: [{name: , //模式名称path: , //启动页面必选query: //启动参数在页面的onLoad函数里面得到}]},tabBar: {//配置导航栏selectedColor: #FFD700,list: [{pagePath: pages/index/index,iconPath: static/logo.png,selectedIconPath: static/logo.png,text: 首页},{pagePath: pages/category/category,iconPath: static/logo.png,selectedIconPath: static/logo.png,text: 分类},{pagePath: pages/user/user,iconPath: static/logo.png,selectedIconPath: static/logo.png,text: 我的}]}
}index.vue:
templateviewviewswiper circular autoplay :interval3000 :duration500 indicator-dots styleheight: 350rpx;indicator-colorrgba(255, 255, 255, 0.6) indicator-active-color#3CB371swiper-item v-foritem in imgs :keyitem image :srcitem alt modewidthFix stylewidth: 100%; //swiper-item/swiper/viewview stylemargin: 10px;view stylepadding: 5px;background-color: white;font-size: 12px;border-radius: 5px;display: flex;align-items: center;uni-icons typesound size20/uni-iconsview{{notice}}/view/view/viewview stylebackground-color: white; margin: 5px 0; border-radius: 10px;uni-rowuni-col :span6view classgrid-item-boximage modewidthFix stylewidth: 50%; src../../static/logo.png/imagetext stylefont-size: 13px; margin-top: 5px;时令水果/text/view/uni-coluni-col :span6view classgrid-item-boximage modewidthFix stylewidth: 50%; src../../static/logo.png/imagetext stylefont-size: 13px; margin-top: 5px;品质肉禽/text/view/uni-coluni-col :span6view classgrid-item-boximage modewidthFix stylewidth: 50%; src../../static/logo.png/imagetext stylefont-size: 13px; margin-top: 5px;新鲜水产/text/view/uni-coluni-col :span6view classgrid-item-boximage modewidthFix stylewidth: 50%; src../../static/logo.png/imagetext stylefont-size: 13px; margin-top: 5px;蔬菜蛋品/text/view/uni-col/uni-row/viewview stylemargin: 5px 0; font-size: 12px;uni-row :gutter10uni-col :span12 v-foritem in goodsList :keyitem.nameview stylemargin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;image :srcitem.img modewidthFix stylewidth: 100%;/imageview classlineEllipsis{{ item.name }}/viewview stylecolor: red; margin-top: 5px; font-weight: bold; font-size: 14px;{{ item.price }}/viewview styletext-align: right;uni-icons typeplus size25 stylecolor: #666; clickaddCart(item)/uni-icons/view/view/uni-col/uni-row/view/view
/templatescriptexport default {data() {return {imgs:[require(../../static/logo.png),require(../../static/logo.png),require(../../static/logo.png),],notices: [{content: 亲哥哥哥今晚电商直播真的很棒棒噢},{content: 啊真的是 uniapp有手就会啊},{content: 真的吗这么easy},{content: 不信你去看看青哥哥的教程呗},],notice:,goodsList: [{ name: 固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装, price: 19.9,img: https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg },{ name: 大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒, price: 79.9,img: https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg },{ name: 仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少, price: 99.9,img: https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg },{ name: 洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果, price: 19.9,img: https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg },{ name: 妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果单果250g, price: 29.9,img: https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg },]}},onLoad() {this.loadnotince()},methods: {loadnotince(){let i0this.noticethis.notices[0].contentsetInterval((){this.noticethis.notices[i].contentif(ithis.notices.length){i0}},5000)}}}
/scriptstyle.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;},.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出几行省略 */overflow: hidden;}
/style最终效果
