①安装环境和编辑器

注册小程序账号

微信开发者工具下载

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:

{{notice}}时令水果品质肉禽新鲜水产蔬菜蛋品{{ item.name }}￥{{ item.price }}export 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 i=0this.notice=this.notices[0].contentsetInterval(()=>{this.notice=this.notices[i++].contentif(i==this.notices.length){i=0}},5000)}}}.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;}

最终效果：