微信小程序
xiaoduzi1991
这个作者很懒,什么都没留下…
展开
-
路径传参与页面事件通信
页面事件通信在service-detail.js中订阅事件,在login.js中发送事件原创 2022-06-27 15:27:49 · 159 阅读 · 0 评论 -
事件回调工具与事件监听
2、使用自定义的回调函数事件监听1、组件中组件publisher-action.wxml中,定义函数事件组件publisher-action.js中实现函数调用函数,使用 triggerEvent 方法并将事件数据传递给父组件页面service-detail.wxml页面service-detail.js.........原创 2022-06-24 10:38:54 · 237 阅读 · 0 评论 -
枚举使用学习
首先,创建存放枚举文件的文件夹,在根目录下创建enum文件夹然后创建service-type.js文件其中,PROVIDE 和 SEEK 就是枚举值,在页面中使用原创 2022-06-22 16:29:28 · 976 阅读 · 0 评论 -
微信小程序继承
1、首先编写基类Base2、继承基类先前的Service类服务列表类原创 2022-06-15 14:25:47 · 902 阅读 · 0 评论 -
页面跳转,传递数据
在home.wxml文件中定义绑定方法在home.json文件中跳转并传递数据其中data-service 与const service = event.currentTarget.dataset.service 中的service两个service要相对应在service-detail中接收数据原创 2022-06-14 16:50:17 · 130 阅读 · 0 评论 -
设置标题,背景颜色
在app.json文件中进行全局配置navigationBarBackgroundColor 导航栏颜色navigationBarTitleText 导航栏标题backgroundColorBottom iOS上拉触底的弹性效果背景色在单独的页面中例如home.json中配置home页面的标题颜色,标题等...原创 2022-06-14 15:20:13 · 725 阅读 · 0 评论 -
加载提示,状态显示
加载提示2、使用自定义的加载状态组件因为加载状态组件大多数是全局使用,所以可以全局配置文件app.json文件中配置组件在home.wxml文件中使用加载效果:原创 2022-06-14 11:33:47 · 214 阅读 · 0 评论 -
微信骨架屏
微信小程序骨架屏文档点击自动生成按钮点击了确定后会自动生成两个文件,然后在文件中引入:2、控制加载时机在home.js文件中需要生成骨架屏的页面生成后的骨架屏,你会发现标记红色框框的地方没有生成,这个是微信开发工具的一个小Bug,swiper标签的没有生成。我们可以先将没有生成的代码注释了,替换成一些简单的View,然后生成后在将原来的代码取消注释。然后重新生成骨架屏生成骨架屏后,把代码恢复原样...原创 2022-06-14 10:53:17 · 341 阅读 · 0 评论 -
节流函数避免频繁调用
微信节流函数原创 2022-06-14 09:47:11 · 131 阅读 · 0 评论 -
下拉刷新,上拉加载更多
下拉刷新,上拉加载更多原创 2022-06-07 14:41:06 · 256 阅读 · 0 评论 -
自定义icon
自定义icon原创 2022-06-06 15:32:22 · 902 阅读 · 0 评论 -
WXS的使用--监听手指滑动
WXS的使用微信官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/01wxs-module.html创建 .wxs 文件touchMove.wxs// js ES6语法 wxs只能编写ES5语法var touchStartXfunction handleTouchStart(event) { console.log(event) //数据绑定,记录触摸开始的X轴的位置 touchS原创 2021-09-01 16:08:03 · 361 阅读 · 0 评论 -
网络请求(二)
回调函数import Http from "../utils/Http";import APIConfig from "../config/api";class Service { /** * 分页获取服务列表 * @param page * @param count * @param category_id 可以为null, * @param type */ getServiceList(page, count, ca原创 2021-10-19 17:44:14 · 108 阅读 · 0 评论 -
网络请求(一)
定义模型类什么是模型?对某个业务或者数据进行归纳总结,总结对外提供若干函数方法每个对外提供的函数方法都有各自独立的作用定义”模型“的意义分离调用与内部实现,实现功能解耦创建model文件夹,在model类中创建模型类Serviceclass Service { /** * 分页获取服务列表 * @param page * @param count * @param category_id 运行为null, * @param原创 2021-10-19 16:25:11 · 147 阅读 · 0 评论 -
自定义组件中事件监听
1、自定义组件中定义监听事件在自定义文件consumer-action.wxml中添加点击事件<view class="action-bar-item"> <button bind:tap="handleChat">联系对方</button> <button bind:tap="handleOrder" wx:if="{{service.type===serviceTypeEnum.PROVIDE}}">立即预约</button>原创 2021-10-11 11:29:17 · 348 阅读 · 0 评论 -
事件回调参数工具函数封装
1、封装事件回调方法在工具类utils.js中封装事件回调方法/** * 获取事件回调参数的自定义属性 * @param {Object}event * @param {String}target */function getDataSet(event, target) { return event.currentTarget.dataset[target]}export {getDataSet}2、在调用事件中使用 ...... methods: {原创 2021-10-11 11:15:54 · 148 阅读 · 0 评论 -
自定义组件 behavior机制
自定义组件consumer-actionconsumer-action.wxml<view class="action-bar-item"> <button>联系对方</button> <button wx:if="{{service.type===serviceTypeEnum.PROVIDE}}">立即预约</button></view>里插入代码片**consumer-acion.js**```j原创 2021-10-11 10:37:26 · 107 阅读 · 0 评论 -
小程序安全区域
1、自定义组件safe-area,在safe-area.js中设置参数Component({ properties: { area:String }, data: {}, methods: {}});2、编写布局文件,主要就是一些布局样式文件,在safe-area.wxml<view class="safe-area-{{area}}"/>3、编写样式文件在safe-area.wxss 中.safe-area-top {原创 2021-10-09 11:14:08 · 913 阅读 · 0 评论 -
枚举值的使用
枚举1、创建一个新的目录enum,新增一个Js文件 service-type.jsconst serviceType={ PROVIDE:1, SEEK:2}export default serviceType2、在页面上绑定数据,在service-detail.js文件中Page({ data: { serviceTypeEnum:serviceType });3、使用数据 <view wx:if="{{service.原创 2021-10-09 10:06:20 · 232 阅读 · 0 评论 -
Slot使用
是用slort和不使用的区别接自定义View2内容在自定义tabs.wxml中,使用标签<view class="container"> <view class="tab-panel"><!-- 内容不确定--><!-- 样式不确定--><!-- 使用插槽 slot--> <slot></slot> </view></v原创 2021-09-01 15:46:58 · 301 阅读 · 0 评论 -
自定义view2
首先需要在 json 文件中进行自定义组件声明(将 component 字段设为 true 可将这一组文件设为自定义组件)tabs.js{ "component": true, "usingComponents": { }}在tabs. wxml 文件中编写组件模板,<view class="container"> <view class="tabs"> <!-- bind:tap="handleTabChange"点击事件监听原创 2021-08-31 14:15:15 · 144 阅读 · 0 评论 -
自定义组件1
在根目录创建自定义组件文件夹components,在文件夹下创建自定义组件文件夹,例如tabs,以下都对在tabs文件夹下编写代码然后右键单击tabs文件夹,选择Wechat Mini Program Component,然后输入自定义组件名称,我输入的是tabs然后会在tabs文件夹下,自动生成四个文件tabs.js,tabs.json,tabs.wxml,tabs.wxss可以在tabs.wxml文件夹下编写视图代码...原创 2021-08-30 15:47:50 · 239 阅读 · 0 评论 -
Swiper组件使用
Swiper官网文档wxml代码编写 <view class="category"><!--display-multiple-items:同时显示的滑块数量 next-margin后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 --> <swiper style="height:150rpx" display-multiple-items="{{2}}" next-margin="60rpx">原创 2021-08-26 15:08:15 · 522 阅读 · 0 评论 -
Tabs选中效果
tabs的wxml写法<view class="container"> <view class="tabs"> <!-- bind:tap="handleTabChange"点击事件监听 wx:key="index"给点击事件指定Key data-index:data-是固定的,index是自己定义的, 要和调用的地方保持一致原创 2021-08-26 14:33:16 · 478 阅读 · 0 评论 -
小程序底部导航
在小程序项目的app.json文件夹下,实现小程序底部导航+页面切换小程序官方文档:可以查看具体配置参数含义"tabBar": { "borderStyle": "white", "selectedColor": "#FBC02D", "color": "#8a8a8a", "position": "top", "list": [ { "pagePath": "pages/home/index", "text": "广原创 2021-08-26 09:36:45 · 79 阅读 · 0 评论