uni-app项目（一）

一、新建项目

1. 打开HBuilder
2. 点击文件-->新建-->项目

 创建好的项目目录如下：

二、配置项目

2.1在manifest.json里配置微信小程序AppID

2.2 配置运行配置 

2.3  配置微信开发者工具

1. 打开微信开发者工具
2. 打开设置
3. 安全设置
4. 打开服务端口

 

2.4  安装sass插件

因为uniapp项目使用的是sass语法，所以你第一次打开的时候会提示你安装sass插件。注意安装好重启Hbuilderx编辑器。

2.5  运行

1. 打开Hbuilderx菜单
2. 选择运行
3. 运行到小程序模拟器
4. 自己跳转到微信开发者工具

 运行成功后：

2.6配置是否被索引

小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON对象，如果没有sitemap.json则默认为所有页面都允许被索引。  

"checkSiteMap":false

2.7 实现数据网络化请求

我们前面的学的wx.request可以请求后端数据，但是如果想实现请求拦截的功能（登录的时候得用请求拦截），我们可以自己二次封装，或者借用一个第三方包（@escook/request-miniprogram）,具体使用哪种方式，自己决定即可。

使用步骤参考如下或者github（github有的时候打不开，但是讲解比较官方）

github参考链接

• npm init -y 项目根目录下面初始化一个package.json文件
• npm install @escook/request-miniprogram 安装这个第三方包
• main.js中导入这个包并配置

  

import Vue from 'vue'
import App from './App'

// 配置网络请求
import { $http } from '@escook/request-miniprogram'

// 在 uni-app 项目中，可以把 $http 挂载到 uni 顶级对象之上，方便全局调用
uni.$http = $http

// 配置请求的根路径
$http.baseUrl="https://www.fastmock.site/mock/9cc8c4080e5aa5d6038668094c2cf44d/shop"

// 请求拦截器
$http.beforeRequest = function (options) {
  wx.showLoading({
    title: '数据加载中...',
  })
}
// 响应拦截器 就是响应完成之后做一些事
$http.afterRequest = function () {
  wx.hideLoading()
}
。。。。

 三、底部tabBar布局

在pages文件夹下创建页面 

  

新建四个页面 

 准备静态资源

把tabbar需要的图片放在static文件夹中 

 这些代码是新建页面之后自动生成的

"pages": [{
            "path" : "pages/home/home",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/cate/cate",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/shop/shop",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        },
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
    ],

 底部tabBar代码

"tabBar":{
		 "selectedColor":"FE5149",
		 "list":[
			 {"pagePath":"pages/home/home",
			  "text":"首页",
			  "iconPath":"static/images/首页.png",
			  "selectedIconPath":"static/images/首页选中.png"
			 },
			 {"pagePath":"pages/cate/cate",
			  "text":"分类",
			  "iconPath":"static/images/导航栏分类.png",
			  "selectedIconPath":"static/images/分类选中.png"
			 },
			 {"pagePath":"pages/shop/shop",
			  "text":"购物车",
			  "iconPath":"static/images/导航栏购物车.png",
			  "selectedIconPath":"static/images/购物车选中.png"
			 },
			 {"pagePath":"pages/my/my",
			  "text":"我的",
			  "iconPath":"static/images/导航栏我的.png",
			  "selectedIconPath":"static/images/我的选中.png"
			 }
		 ]
	},