house的项目2天总结

news/2024/11/16 21:34:38/

uni-house-day01

项目功能点

  • 首页

    • 轮播图
      • ui-app的轮播组件
      • ui框架的轮播组件【更简单】
    • 图标（ui框架布局）
    • 猜你喜欢
      • 触底加载 【重点】

  • 城市选择页面 【重点】

    • 渲染这个页面，你需要什么数据。
    • 把后端的数据转换成自己的数据【前端开发必备的能力】

  • 楼盘详情信息

    • 页面间通信
    • 拨打电话【uni-app的一个api】

  • 搜索页面

    • 交互
    • 性能的优化【重点】
      • 防抖或者节流

  • 城市的地图

    • 地图找房
    • 设置地图打点
    • 点击标记点出弹框（小区的信息）

  • 历史记录

    • 后端
    • 不需要后端
      • 本地存储
      • 优化： 去重，设置最大存储数量！

  • 热点页面

    • 日期的转换（dayjs）

  • 机器人客服页面

    • 协议：websocket 【实时聊天】

  • 个人中心

    • ui组件的使用

  • 表单页面

    • 使用ui组件库的表单
    • 表单的验证

  • 支付【重点】

    • 前期的准备工作【了解】
    • 支付的流程
      • 前端干什么
      • 后端干什么

项目开发流程## 创建项目

使用hbx创建项目

使用hbx创建即可

工程化目录

  • pages [页面]

  • components 【组件】

  • 静态资源目录

    • static（public）
    • assets

  • utils 公共方法

    • request 接口请求方法
      • 复制过来
    • location 位置相关的方法
      • 定位
      • 打开微信内置地图

  • api： 接口方法

    • location.api.js
    • 地理编码 逆地理编码

  • vuex【引入】

    • 引入vuex

配置tabbar

  • 新建页面
  • pages.json中配置tabbar
    • 先只考虑文字

uview引入【重点】

uni组件库的选择方案

原生的js，jq

  • Bootstrap
  • Layui

vue

  • PC端
    • element-ui
    • antd-vue 【不推荐】
  • H5
    • vant 【推荐】
    • element - mobile

原生微信小程序

  • vant weapp

uni-app

  • uview 【全端支持】

react

  • PC
    • antd
  • h5
    • antd-mobile

vant weapp（是原生微信小程序的语法，只服务于原生微信小程序），所以不太适合在uniapp中使用。uniapp特点：一套代码兼容多端。ui框架：一套代码兼容多端。

uview适合uniapp，官网：https://www.uviewui.com/components/intro.html

hbx的方式引入uview

  • 下载插件：

    • 去插件市场下载，地址如下：
    • 地址：https://ext.dcloud.net.cn/plugin?id=1593

  • 登录uni用户，点击相关按钮，导入到项目中去

  • 导入成功之后，项目根目录下有一个文件夹：uni_modeuls

  • 配置：查看文档：https://www.uviewui.com/components/downloadSetting.html

  • 注意跳过文档的第一步和最后一步

  • 在项目中测试一下

    <u-button type="primary" :plain="true" text="镂空"></u-button>

npm的方式

  • 如果项目根目录下没有package.json

    • 初始化： npm init -y
    • 如果有，请跳过

  • 使用npm的方式安装uview

    • npm install uview-ui@2.0.31

  • 查看文档： https://www.uviewui.com/components/npmSetting.html

    • 注意： npm的方式一定要配置easycom，不然每使用一个组件，要重启一次

      "easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},

      pages.json中

图片/字体图标库的使用【重点】

  • 去阿里图标库下载到本地

  • 在项目根目录下创建：assets/font

  • 然后将：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2。 复制到assets/font

  • 在main.js中引入iconfont.css

    import '@/assets/font/iconfont.css'

  • 在页面中使用

    <text class="iconfont icon-ai-weixin"></text>

assets与static（public）的区别【面试！】

assets中的静态资源，是会经过打包工具处理的！

- 小图片转成base64编码格式
- 大图片的时候，给图片加一个hash值

static不会经过打包工具处理

  • 打包的时候，原封不动的把图片赋值到了项目的static下

assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。简单来说，static中建议放一些外部第三方，自己的放到assets，别人的放到static中。

图片使用规则

template下使用图片

  • 如果你的图片在assets下，请使用require导入

  • 如果你的图片在static下，写路径就ok

    <!-- 图片的使用规则 -->
<image src="/static/imgs/icon_my.png" mode=""></image>
<!-- assets下是经过打包工具解析过的 -->
<image :src="require('@/assets/imgs/icon_my.png')" mode=""></image>
<image :src="@/assets/imgs/icon_my.png" mode=""></image>

css下当做背景图片：不管图片放在哪里，直接使用即可

.bg-img {// width: 100rpx;height: 100rpx;// 使用assets下的图片// background-image: url('../../assets/imgs/icon_my.png');// background-image: url('@/assets/imgs/icon_my.png');// 使用static下的文件background-image: url('/static/imgs/icon_my.png');background-image: url('@/static/imgs/icon_my.png');}

结论：

  • 你在配置tabbar的时候，使用static里面的图片
  • 其他地方使用图片，用@就寻找图片即可

页面创建-窗口配置-tabbar配置

注意：tabbar的图表请放在static下，引入的时候直接引入

{"pagePath": "pages/hot/hot","text": "热点","iconPath": "/static/imgs/icon_hot.png","selectedIconPath": "/static/imgs/icon_hot_s.png"
}

git的使用

gitee github gitlab的区别

git是一种工具，一种规范。专门用来管理项目, 分布式版本控制系统。基于git规范，就搭建了很多网站。

gitee： Gitee 即码云，是 oschina 免费给企业用的，不用自己搭建环境，可以建立自己的私有仓库。给中国人使用的。

github： 给全世界的程序员使用。适合你做开源项目，早期的时候如果说你现在gtihub上创建一个私有仓库，是要钱。

gitlab: 可以免费搭建私有仓库，并且可以部署在自己的服务器上。 企业中肯定会基于gitlab搭建仓库，所有的项目放在这个仓库中。你去公司的第一天，就需要公司的人员给你分配gitlab账号。gitlab地址在哪里。 强调：简历上你直接写熟悉git即可。

SSH协议

第一天。一定ssh协议配置了，一劳永逸.

  • 检查一下电脑是否生成过ssh公钥

    • 打开gitbash
    • 进入目录： .ssh
    • cd ~/.ssh
    • 查看该目录下的文件
      • ls

  • 配置全局的用户名和邮箱

    git config --global user.name "jgmiu"
git config --global user.email "9834752+jgmiu@user.noreply.gitee.com"

    如果配置了可以不配置

  • 本地生成ssh， 请在gitbash中运行以下命令

    ssh-keygen -t rsa -C "9834752+jgmiu@user.noreply.gitee.com"

    -C 后面跟的是你的邮箱，你绑定在gitee上的邮箱，当然也可以随便输入一个邮箱

    生成过程中遇到停顿，请按下回车即可。

  • 本地获取生成的ssh公钥，命令与截图如下：

    cd ~/.sshlscat id_rsa.pub  // 答应公钥的内容

  • 将公钥放在gitee上：账号设置 —》 公钥设置

  • 创建一个空的仓库

  • 配置ssh

    • 创建一个.gitignore

      node_modules
unpackage
uni_modules

    • 生成本地git仓库

    • 提交一次

    • 将本地仓库与远程仓库联系起来

    • 将本地的master分支的代码推到远程的master分支上

    git init
// 项目的根目录
git add .
git commit -m '初始化项目'
// 注意此处的连接地址是 git@开头
git remote add origin git@gitee.com:jgmiu/uni-house-215.git
git push
// 给一个提示
// 执行这一条提示

首页的开发

搜索框

  • 使用uview组件库编写搜索框

  • 使用uni.gelocation获取当前的位置（经纬度）

    • 前期准备工作

      • 将appId至少换成测试号，最好是你的个人小程序appid

      • 开启定位

        "permission" : {"scope.userLocation" : {"desc" : "你的位置信息将用于小程序位置接口的效果展示"}},"requiredPrivateInfos" : [ "getLocation" ]

  • 使用高德地图api，将经纬度转成城市位置【显示到输入框的尾部】

轮播图

图标区域

热门房源

猜你喜欢

postman的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCihSJaX-1687705707854)(…/resource/md/postman的使用.png)]

面试题

  • 怎么解决多种if lese
    • switch - case 【可以，但是不完全可以】
    • 策略模式
  • 首页
    • 搜索框
    • 轮播
    • 图标区
    • 热门
      • 把数据请求了， 渲染个名字
    • 猜你喜欢
      • 把数据请求了， 渲染个名字
  • git练习两遍（ssh）
  • postman
    • 自己去下载软件
    • 自己去注册账号
    • 自己去创建一个项目
      • 发起get
      • post（json数据）
      • post（上传文件！！！）

uni-house-day02

昨日的问题

兼容问题。uView组件在h5运行可以，在小程序运行报错。

  • u–input 改成 u-input
  • main.js中import一定要在头部
  • 项目存放的目录不要有中文和特殊字符
  • 开发的时候，尽量不要多开
    • 你可以先在h5把功能（一个小功能写好之后就打开小程序看看）写好，我最后再打开小程序。
  • 一个小功能开发完成之后，提交git上。
  • 遇到问题，先看hbx的h5的控制台，再看浏览器的控制台。
    • 多重启！！！
  • 写代码的时候，注意格式。

首页

猜你喜欢，触底刷新，组件封装

猜你喜欢

  • 监控用户滚动到底部

  • 页码+1， 请求数据

  • 将得到的数据push到houseList中去

  • 每次发起请求判断数据有没请求完毕

    • 请求完毕，就不需要再发起请求了

tabs格式化

// str = "['品质物业','城市绿洲','近地铁']"  ---> 转成字符串数据 ['品质物业', '城市绿洲']
export const formatTabs = (str) => {// 以单引号拆成数组，取奇数项// return str.split(`'`).filter((item, index) => index % 2 !== 0)// 先把单引号换成双引号（满足JSON字符串的规范），然后将其再转换成数组return JSON.parse(str.replaceAll(`'`, `"`))//  eval 小程序不支持 eval也不建议// let arr1 // eval(`arr1 = ${str}`)// return arr1
}

将其变成公共方法，导出都要使用

房子卡片封装

接收数据，渲染页面

<template><view class="house-item"><image :src="item.imgs" style="width: 300rpx; height: 300rpx; flex-shrink: 0;" ></image><view class="house-item-right">{{ count }} <button type="default" size="mini" @click="count++">+1</button><text>{{  item.name }}</text><text style="border: 1rpx solid red;" v-for="tab in formatTabs(item.tabs)" :key="tab">{{ tab }}</text></view></view>
</template><script>import { formatTabs } from '../../utils/common'export default {name: "house-item",data() {return {count: 1}},props: {item: {type: Object,default: () => ({"name": "美的云溪郡","area": "仁寿县","type": "4室2厅","point": 117,"price": 9000,"range": "仁寿大道","imgs": "http://129.211.169.131:6368/imgs/1.jpg","id": 1,"tabs": "['近地铁','公园房']"})}},methods: {formatTabs}}
</script><style>
.house-item {display: flex;
}
</style>

搜索

页面渲染，防抖节流(lodash)

  • 首页输入框输入关键字，失焦之后跳转到搜索页面
  • 将上一个页面的关键字与搜索页面的input双向绑定在一起
  • 监听关键字改变，然后重新请求数据
  • 把请求数据的方法变成一个防抖函数

城市选择页面

格式转化【一个重要的能力】

我想要的数据结构

const arr = [{ type: 'A', data: ['安山', '安徽']  },{ type: 'B', data: ['北京', '包头']  },
]<view v-for="item in arr" :key="item.type"><text>{{ item.type }}</text><view><text v-for="city in item.data" :key="city">{{ city }}</text></view></view>
const arr = [{A: ['安山', '安徽']},{B: ['北京', '包头']}
]<view v-for="item in arr" :key="item.type"><text>{{ Object.keys(item)[0] }}</text><view><text v-for="city in Object.values(item)[0]" :key="city">{{ city }}</text></view></view>
const cityObj = {A: ['安山', '安徽'],B: ['北京', '包头']
}<view v-for="(value, key) in cityObj" :key="key"><text>{{ key }}</text><view><text v-for="city in value" :key="city">{{ city }}</text></view>
</view>

给我的数据结构

const arr = [{"id": "1","city_name": "上海","city_pre": "S","city_pinyin": "Shanghai","city_short": "sh","count": "316"}, {"id": "2","city_name": "北京","city_pre": "B","city_pinyin": "Beijing","city_short": "bj","count": "208"}，{"id": "8","city_name": "东莞","city_pre": "D","city_pinyin": "Dongguan","city_short": "dg","count": "131"},{"id": "18","city_name": "宁波","city_pre": "N","city_pinyin": "Ningbo","city_short": "nb","count": "69"},
]
  1. city_pre存在小写的情况

转换数据

准备分类的盒子，盒子的数据结构如下

const cityObj = {A: [],B: [],...Z: []
}

循环后端给我的城市列表，把它放到相应的位置

怎么生成上诉的盒子。 百度：怎么生成A~Z

export const genCityObj = () => {let res = {}for (let i = 65; i <= 90; i++) {res[String.fromCharCode(i)] = []}return res
}
data() {return {cityObj: genCityObj()}},

请求后端数据，得到城市列表，循环列表，将各个城市放到相应的位置

const {data} = await citysApi()console.log(data)data.forEach(item => {let key = item.city_pre.toUpperCase()this.cityObj[key].push(item.city_name)})

热点页面

  • 使用dayjs进行日期之间的diff

    • 官方链接

  • 具体代码

    formatDate(dateStr) {// 年： 几年前// 月： 几个月前// 天： 几天前// 小时： 几个小时前// 自己可以做//  当前时间戳（数字） -  发表文章的时间戳  = 间隔（毫米）//  毫米 --换算--》 天// 当前日期对应的dayjs对象      发布文章的dayjs对象    difflet now = dayjs()let articleDayjs = dayjs(dateStr)let y = now.diff(articleDayjs, 'y')if(y) {return `${y}年前`} let m = now.diff(articleDayjs, 'M')if(m) {return `${m}月前`}let d = now.diff(articleDayjs, 'd')if(d) {return `${d}天前`}return '今天'
}

地图页面【小程序】

  • 定位
  • 打开地图，以上一步的经纬度为地图的中心点
  • 把经纬度给后台，后台返回周围附近的小区【自己模拟】
  • 把小区标记在地图上
  • 然后点击小区，弹出框，显示小区的完整信息

http://www.ppmy.cn/news/578581.html

相关文章

Flink基础概念及常识

Flink基础概念及常识

1.flink入门 官方定义&#xff1a;Apache Flink是一个框架和分布式处理引擎&#xff0c;用于在无边界和有边界数据流上进行有状态的计算&#xff0c;Flink能在所有常见集群环境中运行&#xff0c;并能以内存速度和任意规模进行计算。 简言之&#xff0c;Flink是一个分布式的计…
阅读更多...
SpringSecurity3.2.5自定义角色及权限的教程

SpringSecurity3.2.5自定义角色及权限的教程

最近阴差阳错的搞上了SpringSecurity3&#xff0c;因为是自己做的小系统&#xff0c;中间遇到了很多坑&#xff0c;基本每个坑都踩过了&#xff0c;网上也查了不少资料&#xff0c;发现有不少错误的&#xff0c;更是让我绕了一圈又一圈&#xff0c;现在把一些基本的东西总结一下…
阅读更多...
SAP用户权限相关操作

SAP用户权限相关操作

SE93 查询所有TCODE 或者 table: tstc SE16 display SUIM 查询用户信息的报表们 技术流 SAP常用的TCODE---BASIS 事务码 描述 ( 中英文 ) SBIT Menu 菜单 SBTA Test background processing 后台处理测试 SBTU Background processing for user 对用户的后台处理 SM36 Define Bac…
阅读更多...
Ant Design of React从入门到开发教程

Ant Design of React从入门到开发教程

Ant Design Pro 是一个企业级中后台前端/设计解决方案。 目录： 一：开发前的准备 二：创建页面 三：创建组件并引用 四：封装网络请求和网络请求走向 五：登录流程以及路由权限设置 六：父组件和子组件相互传值和接收 七：for 循环渲染组件 Ant Design Pro 全家桶技术…
阅读更多...
Linux命令十---Linux权限管理（读写执行权限详解）---chmod--chgrp--权限详解及权限修改---umask缺省权限

Linux命令十---Linux权限管理（读写执行权限详解）---chmod--chgrp--权限详解及权限修改---umask缺省权限

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载!! 欢迎访问:https://blog.csdn.net/qq_21439395/article/details/82119731 交流QQ: 824203453 权限管理 三种基本权限 r 读权限&#xff08;read&#xff09; w 写权限&#xff08;write&#xf…
阅读更多...
微服务之间单点登录和用户权限认证的实现

微服务之间单点登录和用户权限认证的实现

目录 单系统登录机制 HTTP无状态协议 Cookie会话机制 登录状态 多系统登录难点 单点登录系统 单点登录流程 单点注销流程 部署图 子系统与sso认证中心的功能 准备工作 项目结构 修改网关配置文件 添加相关依赖 构建权限认证项目配置文件 前端UI设计 代码实现 …
阅读更多...
用户锁定与权限管理

用户锁定与权限管理

权限管理 用户锁定与权限管理 文章目录 权限管理用户锁定与权限管理1.用户锁定1.1 锁定账号 /-L1.2 解锁账号 /-U 2.权限管理 设置权限 chmod --- change mode文件的权限针对**属主**(u-,第一个root,拥有者)&#xff0c;**属组**(g,第二个root&#xff0c;组的成员)和**其他**…
阅读更多...
spring security控制权限的几种方法

spring security控制权限的几种方法

使用Spring Security3的四种方法概述 那么在Spring Security3的使用中&#xff0c;有4种方法&#xff1a;一种是全部利用配置文件&#xff0c;将用户、权限、资源(url)硬编码在xml文件中&#xff0c;已经实现过&#xff0c;并经过验证&#xff1b;二种是用户和权限用数据库存储…
阅读更多...
最新文章

Copyright @ 2022~2023