一、新建项目

打开HBuilder

点击文件-->新建-->项目

创建好的项目目录如下：

二、配置项目

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

2.2 配置运行配置

2.3 配置微信开发者工具

打开微信开发者工具

打开设置

安全设置

打开服务端口

2.4 安装sass插件

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

2.5 运行

打开Hbuilderx菜单

选择运行

运行到小程序模拟器

自己跳转到微信开发者工具

运行成功后：

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"}]},

uni-app项目（一）相关推荐

切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
uni app(H5)中软键盘弹出,固定定位绝对定位元素位置发生错乱
一.问题如下最近用uni app写项目,发现H5软键盘弹起,导致我固定定位的按钮被顶了上去,如图二.解决方法 1.让其在输入框获取焦点时隐藏百度了许多,有让输入框获取焦点时让按钮隐藏的方法,失去 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
在uni-app的app项目中使用live-pusher实现人脸识别
在uni-app的app项目中使用live-pusher实现人脸识别前言一.环境二.使用步骤三.permission.js源代码四.face.vue源代码五.代码效果总结前言在uni ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
vue后台管理、APP项目总结集合
文章目录后台管理界面 APP 项目整体总结别慌,内容看起来多,其实都是一些小干货啦后台管理界面搭建一个vue项目: 配置相应的环境,如安装node,vue,webpack(最好安装一下淘宝镜像 ...
vant 验证手机号_【uni app】vant weapp的引入和部分详细调用（表单输入框、验证码、弹出层搭配选择器、地图）...
本次小程序的开发使用uni app+vant weapp,vant weapp如何引用和部分组件使用方法如下引入在github(https://github.com/youzan/vant-wea ...

uni-app项目（一）

一、新建项目

创建好的项目目录如下：

二、配置项目

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

2.2 配置运行配置

2.3 配置微信开发者工具

2.4 安装sass插件

2.5 运行

2.6配置是否被索引

2.7 实现数据网络化请求

三、底部tabBar布局

在pages文件夹下创建页面

准备静态资源

uni-app项目（一）相关推荐

最新文章

热门文章