- 博客(55)
- 收藏
- 关注
原创 JSON Server
概括:模拟服务端接口数据,一般用在前后端分离后,前端人员可以不依赖API开发,可以根据json数据建立一个完整的web服务。查看安装是否成功:json-server -v。一,安装jsonServer。二,创建bd.json文件。四、axios请求使用。
2023-03-04 23:38:56
324
原创 redux之redux-persist数据持久化
所以:redux-persist会将redux的store中的数据自动缓存到浏览器的 localStorage 中,不再需要单独去存储了。仓库地址: https://github.com/rt2zz/redux-persist。原因:redux和其它状态管理技术一样,刷新页面后,数据就会恢复成初始状态。2,在store.js中配置。在根目录index.js中。
2023-02-06 02:00:17
815
原创 React-redux 的 Provider 和 connect
mapStateToProps:允许我们将 store 中的数据作为 props 绑定到组件上。mapDispatchToProps:将 action 作为 props 绑定到组件上。
2023-02-06 01:29:59
990
原创 Redux toolkit
6、在 /src/modules/counter.js 中 创建处理count的函数。Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。5、在 /src/store/index.js 中创建store。是官方推荐的编写 Redux 逻辑的方法。本案例是一个加,减的计算器,从零到壹。3、下载react-redux的依赖。7、在根文件中使用,index.js。1、创建一个react的项目。2、下载toolkit的依赖。
2023-02-02 18:07:47
344
原创 React 路由组件与一般组件的区别(withRouter)
withRouter原理:高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.一般组件可依靠它去跳转一个页面,一般组件:是指创建的普通类组件或函数组件,路由组件:是指被路由定义的组件,
2023-01-08 15:45:06
684
原创 vue 父子组件通讯时执行的生命周期的顺序
父beforeCreate() -> 父created() -> 父beforeMount() -> 子beforeCreate() -> 子created() -> 子beforeMount() -> 子mounted() -> 父mounted()父beforeUpdate() -> 子beforeUpdate() -> 子updated() -> 父updated()Vue的生命周期分为三个阶段:初始化阶段,更新数据阶段,销毁实例阶段。
2023-01-05 16:52:18
847
原创 微信小程序 wxs
业务需求:由于后台返回的数据,有些表示状态的数据是数字,但是前端页面想要展示的是中文,因为小程序不支持在wxml中编写脚本语言。所以创建一个index.wxs文件// 处理状态var delState = function (e) { switch(e){ case 1: return '待付款' break case 2: return '待发货' break
2022-05-31 16:32:27
92
原创 js 数组根据对象种某个值进行排序
var str = [ {name:"a",value:"12"}, {name:"b",value:"3"}, {name:"c",value:"5"}, {name:"d",value:"67"}, ] function del (v){ return function(a,b){ // 从小到大 // return a[v] - b[v] // 从大到小 ...
2022-05-27 11:41:07
242
原创 微信小程序 根据状态控制导航栏标题的显示
业务需求:收货地址的新增和编辑想弄在同一个页面,但是标题想对应显示新增地址和编辑地址。跳转时多传一个参数做判断,新增时type传个’add‘,编辑时传'edit' goaddDddress(){ wx.navigateTo({ url: '/subpackages/my/address_AE/address_AE?type=' + 'add', }) },目标页面,通过wx.setNavigationBarTitle设置title
2022-05-24 15:51:42
288
原创 微信小程序 实现轮播图
效果图文档:swiper | 微信开放文档wxml:<view class="goodsDetails"> <!-- 轮播图 --> <view class="goodsDetails_top"> <view> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interv.
2022-05-19 10:39:53
323
原创 微信小程序 自定义底部导航栏
app.json "tabBar": { "borderStyle": "white", "color": "#c9c9c9", "selectedColor": "#000", "custom": true,//自定义导航栏 "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "./assets/tab_ico
2022-05-18 10:23:21
2292
3
原创 微信小程序设置全局颜色变量
page:{--themeColor:#0787fe;}.a{ background-color: var(--themeColor);}
2022-05-17 18:26:40
907
原创 微信小程序 分包预加载
业务需求:1,小程序限制了大小不能大于2M,然后有时候加点图片就已经超出大小。所以要使用分包和预加载。在app.json文件配置导航栏tab栏的页面尽量放在主包中预加载:preloadRule官方文档:分包预下载 | 微信开放文档...
2022-05-17 18:19:35
1466
原创 微信小程序 处理上一页面数据
var pages = getCurrentPages(); // 当前页面 var beforePage = pages[pages.length - 2]; // 前一个页面//返回上一个页面之前先处理一下数据或调用一下上个页面的方法 wx.navigateBack({ delta: 1, success: function() { beforePage.setData({ //修改上衣页面的参数 'formdata.page':1, ..
2022-05-16 15:24:55
691
原创 Object.prototype.hasOwnProperty.call()
JavaScript中Object对象原型上的hasOwnProperty()用来判断一个属性是定义在对象本身而不是继承自原型链。
2022-05-12 10:28:11
962
原创 微信小程序 form表单验证
业务需求:微信小程序提交表单的时候必填的项要提示,还要电话要校验首页,先搞一个校验的公共方法validate.js/** * 表单验证 * * @param {Object} rules 验证字段的规则 * @param {Object} messages 验证字段的提示信息 * */class WxValidate { constructor(rules = {}, messages = {}) { Object.assign(this, {
2022-05-11 11:35:29
3026
1
原创 微信小程序 自定义头部导航栏
业务需求:ui设计的头部,右边多了一个首页的按钮,效果图因为基本每个页面都要用得到,所有要做一个自定义的组件,直接上代码wxml:<view class="nav-bar" style="padding-top:{{ phoneInfo.safeArea.top}}px;"> <view class="van-nav-bar" style="height: {{phoneInfo.safeArea.top}}px;"> <view
2022-05-10 11:49:36
633
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人