主要的网站开发技术,iis wordpress index.php,诸暨市住房和建设局网站,关掉自己做的网站初始uni-apptabBar首页 1. uni-app1.1 新建uni-app项目1.2 目录结构1.3 把项目配置运行到微信开发者工具 2. tabBar3.1 首页3.1 配置网络请求3.2 轮播图区域3.3 分类导航区域3.4 楼层区域 1. uni-app
uni-app 是使用 Vue.js 开发前端应用的框架。开发者编写一套代码#x… 初始uni-apptabBar首页 1. uni-app1.1 新建uni-app项目1.2 目录结构1.3 把项目配置运行到微信开发者工具 2. tabBar3.1 首页3.1 配置网络请求3.2 轮播图区域3.3 分类导航区域3.4 楼层区域 1. uni-app
uni-app 是使用 Vue.js 开发前端应用的框架。开发者编写一套代码可以发布到ios、Android、H5、以及各种小程序、快应用等多个平台。 1.1 新建uni-app项目
HBuilder X 创建 uni-app项目可以用别的版本 4.66文件 -- 新建 -- 项目 画横线的可以个性化设置 1.2 目录结构 一个uni-app项目默认包晗如下目录及文件
|- pages 业务页面文件存放的目录
| |- index
| | |_ indxe.vue index页面
| |_ list
| |_ list页面
|- static 存放应用静态资源如图片、视频等的目录
|- main.js Vue初始化入口文件
|- App.vue 应用配置用来配置小程序的全局样式、生命周期函数等
|- manifext.json 配置应用名称、appid、logo、版本等打包信息
|- pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面信息1.3 把项目配置运行到微信开发者工具
填写 微信小程序 AppID 配置 微信开发者工具 的安装路径 在微信开发者者工具中通过 设置- 安全设置面板开启 服务端口 点击菜单栏中的 运行 - 运行到小程序模拟器 - 微信开放工具 2. tabBar
在 pages创建 目录。 在pages.json 配置文件中新增 tabBar的配置节点 //例tabBar: {selectedColor: #C00000, //配置当前tabBar页的文本颜色list: [{pagePath: pages/home/home, //页面路径text: 首页, // 页面文本iconPath: /static/home.png, // 未选中的图片selectedIconPath: /static/home-active.png //选中的土建}]
}修改导航条的样式效果在 pages.json 中修改 globalStyle globalStyle: {navigationBarTextStyle: white, //标题文本颜色 navigationBarTitleText: 人民商城, //标题文本navigationBarBackgroundColor: #C00000, // 导航栏背景颜色backgroundColor: #F8F8F8, //窗口的背景颜色}3.1 首页
3.1 配置网络请求
因平台限制小程序项目中不支持 axios原生的 wx.request() API buzhichi l拦截器等全局定制功能。所以在 uni-app 项目中使用 escook/request-miniprogram 第三方包发起网络请求。官方文档
配置escook/request-miniprogram 可以看官方文档
npm init -ynpm install escook/request-miniprogram在项目的 main.js 入口文件文件中配置
// 导入网络请求包
import { $http } from escook/request-miniprogram// 挂载到 uni 全局对象上
uni.$http $http// 设置 base URL
$http.baseUrl 自己的URL// 请求拦截器
$http.beforeRequest function(options) {uni.showLoading({title: 数据加载中...})
}// 响应拦截器
$http.afterRequest function() {uni.hideLoading()//关闭拦截器
}3.2 轮播图区域 请求轮播图数据 在data中定义轮播图数组 在 onLoad生命周期函数中调用获取轮播图数据的方法 在 methods 中定义获取轮播图数据方法 export default {data() {return {//这是轮播图的数据列表swiperList: []};},onLoad() {//调用方法 获取轮播图的数据this.getSwiperList()},methods: {async getSwiperList() {const {data: res} await uni.$http.get(URL路径)if (res.meta.status ! 200) return uni.$showMsg()this.swiperList res.message}}}渲染轮播图的 UI 结构 !-- 轮播图的区域 --
swiper :indicator-dotstrue !-- 显示面板指示点小圆点 --:autoplaytrue !-- 开启自动播放 --:interval3000 !-- 自动播放间隔时间为 3000 毫秒即 3 秒 --:duration1000 !-- 滑动动画持续时间为 1000 毫秒即 1 秒 --:circulartrue !-- 启用无缝循环轮播 --
!-- 使用 v-for 循环渲染每个轮播项 --swiper-item v-for(item, i) in swiperList :keyi!-- 每个轮播项是一个导航链接点击跳转到商品详情页 --navigator classswiper-item :url/subpkg/goods_detail/goods_detail?goods_id item.goods_idopen-typenavigate !-- 默认跳转方式为普通导航 --!-- 展示轮播图片 --image :srcitem.image_src/image/navigator/swiper-item
/swiper配置小程序分包 在根目录中创建 分包的根目录 名为 subpkg (可以自己取名)在 pages.json 中和pages节点评级的位置声明 subPackages 节点用来定义分包相关结构 subPackages: [{root: subpkg,pages: [{path : goods_detail/goods_detail,style : {}}]}]根据自己需求自己设置
3.3 分类导航区域 获取分类导航区域 在data中定义轮播图数组 在 onLoad生命周期函数中调用获取轮播图数据的方法 在 methods 中定义获取轮播图数据方法 export default {data() {return {//分类导航的数据列表navList: []};},onLoad() {this.getNavList()},methods: {async getNavList() {const {data: res} await uni.$http.get(路径)if (res.meta.status ! 200) return uni.$showMag()this.navList res.message},navClickHandler(item) {if (item.name 分类) {uni.switchTab({url: /pages/cate/cate})}}}渲染轮播图的 UI 结构 !-- 分类导航区域 --
view classnav-list!-- 使用 v-for 循环渲染每个分类导航项 --view classnav-item v-for(item, i) in navList :keyi!-- 每个分类导航项包含一个图片点击图片会触发点击事件处理函数 --image :srcitem.image_src classnav-img clicknavClickHandler(item)/image/view
/view3.4 楼层区域 获取楼层区域 在data中定义轮播图数组 在 onLoad生命周期函数中调用获取轮播图数据的方法 在 methods 中定义获取轮播图数据方法 export default {data() {return {//楼层的数据floorList: []};},onLoad() {this.getFloorList()},methods: {async getFloorList() {const {data: res} await uni.$http.get(自己路径)if (res.meta.status ! 200) return uni.$showMag()//对数据进行处理res.message.forEach(floor {floor.product_list.forEach(prod {//通过 split(?) 方法分割字符串获取查询参数部分并将其拼接到自定义的基础路径后prod.url /subpkg/goods_list/goods_list? prod.navigator_url.split(?)[1]})})this.floorList res.message}}渲染轮播图的 UI 结构 !-- 楼层区域 --
view classfloor-list!-- 每个楼层 item 项 --view classfloor-item v-for(item, i) in floorList :keyi!-- 楼层标题图片 --image :srcitem.floor_title.image_src classfloor-title/image!-- 楼层的图片展示区域 --view classfloor-img-box!-- 左侧大图盒子 --navigator classleft-img-box :urlitem.product_list[0].url!-- 显示第一个商品的大图并根据 image_width 设置宽度 --image :srcitem.product_list[0].image_src :style{width: item.product_list[0].image_width rpx}modewidthFix/image/navigator!-- 右侧 4 张小图的盒子 --view classright-img-box!-- 循环渲染 product_list 中的商品除第一个 --navigator classright-img-item v-for(item2, i2) in item.product_list :keyi2 :urlitem2.url!-- 只渲染 index 不为 0 的项即跳过第一个商品 --image :srcitem2.image_src v-ifi2 ! 0:style{width: item2.image_width rpx} modewidthFix/image/navigator/view/view/view
/view
