微信小程序实例系列

article/2025/9/18 17:05:27

实战

  1. 【微信小程序】---- redux 在原生微信小程序的使用实例
  2. 【微信小程序】---- weapp-redux的使用文档
  3. 【微信小程序】---- Promise.then(success, fail)执行顺序的问题
  4. 【微信小程序】---- 监听页面停止滚动
  5. 【微信小程序】---- CustomBar 公用组件封装
  6. 微信小程序----开发rui-swiper多样式轮播组件
  7. 微信小程序----Grid(九宫格)(flex实现九宫格布局)
  8. 微信小程序----Maide List(图文列表)(flex布局实现MUI的图文列表)
  9. 微信小程序----开发rui-dtpicker多粒度日期组件
  10. 微信小程序---- setData 列表性能优化
  11. 微信小程序----简易双向绑定
  12. 微信小程序----全局状态管理 (便于全局埋点等操作)
  13. 微信小程序 ---- 从短信、邮件、微信外网页等场景打开小程序

常见错误


  1. 微信小程序----连等报错(ReferenceError: xxxxx is not defined)
  2. 微信小程序----修改data中的数据,页面数据不改变
  3. 微信小程序----Now you can provide attr “wx:key” for a “wx:for” to improve performance.
  4. 微信小程序----Uncaught ReferenceError: ret is not defined

基础篇


  1. 微信小程序----App生命周期
  2. 微信小程序----页面生命周期
  3. 微信小程序----引入外部字体库iconfont的图标
  4. 微信小程序----icon组件
  5. 微信小程序----模板(template)
  6. 微信小程序----button组件
  7. 微信小程序----progress组件
  8. 微信小程序----slider组件
  9. 微信小程序----switch组件(开关选择器)
  10. 微信小程序----checkbox组件
  11. 微信小程序----radio组件
  12. 微信小程序----scroll-view组件(MUI索引列表)滚动动画
  13. 微信小程序----switch组件实现
  14. 微信小程序----手势锁详解
  15. 微信小程序----返回上一页刷新或当前页刷新
  16. 微信小程序----自定义加载图标
  17. 微信小程序----全局变量
  18. 微信小程序----动态设置导航栏标题

实例篇


  1. 微信小程序----gallery slider(图片轮播)组件
  2. 微信小程序----侧滑菜单(Popup----左侧不动,右侧滑动)(MUI侧滑导航)
  3. 微信小程序----侧滑菜单(Popup—左侧滑动,右侧不动)(MUI侧滑导航)
  4. 微信小程序----导航栏滑动定位(实现CSS3的position:sticky效果)
  5. 微信小程序----导航栏透明渐变一(MUI导航栏透明渐变)
  6. 微信小程序----导航栏透明渐变二(MUI导航栏透明渐变)
  7. 微信小程序----全国机场索引列表(MUI索引列表)
  8. 微信小程序----折叠面板(MUI折叠面板)
  9. 微信小程序----三级联动选择器(picker、省市区选择器)(MUI选择器)
  10. 微信小程序----日期时间选择器(自定义精确到分秒或时段)(MUI日期时间)
  11. 微信小程序----导航栏选项卡(MUI顶部选项卡)
  12. 微信小程序----界面交互反馈API(wx.showToast(OBJECT)、wx.showModal(OBJECT))(MUI消息框)
  13. 微信小程序----列表下拉刷新上拉加载(MUI下拉刷新和上拉加载更多)
  14. 微信小程序----wx.showActionSheet(OBJECT)操作菜单(MUI操作表)
  15. 微信小程序----MUI数字输入框
  16. 微信小程序----图片预览
  17. 微信小程序----手势图案锁屏
  18. 微信小程序----实现YDUI的ScrollNav组件(滚动导航)
  19. 微信小程序----实现YDUI的ScrollTab(滚动选项卡)
  20. 微信小程序----团购或秒杀的批量倒计时实现
  21. 微信小程序----canvas实现刮刮乐效果

高德地图开发

  1. 微信小程序----高德地图开发应用(获取key)
  2. 微信小程序----map路线规划
  3. 微信小程序----map组件实现检索【定位位置】周边的POI
  4. 微信小程序----map组件实现解析经纬度
  5. 微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)
  6. 微信小程序----map组件实现(高德地图API实现wx.chooseLocation(OBJECT))
  7. 微信小程序----map组件实现(路线规划)

WXRUI体验二维码

WXRUI体验码

如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!

效果图


微信小程序----团购或秒杀的批量倒计时实现

这里写图片描述

微信小程序----map组件实现(路线规划)

这里写图片描述

微信小程序----map组件实现(高德地图API实现wx.chooseLocation(OBJECT))

这里写图片描述

微信小程序----map组件实现(获取定位城市天气或者指定城市天气数据)

这里写图片描述

微信小程序----map组件实现解析经纬度

这里写图片描述

微信小程序----map组件实现检索【定位位置】周边的POI

这里写图片描述

微信小程序----map路线规划

这里写图片描述这里写图片描述这里写图片描述这里写图片描述

微信小程序----实现YDUI的ScrollTab(滚动选项卡)

YDUI的ScrollTab(滚动选项卡)

微信小程序----实现YDUI的ScrollNav组件(滚动导航)

YDUI的ScrollNav效果图

微信小程序----switch组件实现

switch组件实现

微信小程序----手势图案锁屏

手势图案解锁效果图

微信小程序----图片预览

图片预览效果图

微信小程序----MUI数字输入框

数字输入框效果图

微信小程序----wx.showActionSheet(OBJECT)操作菜单(MUI操作表)

操作菜单效果图

微信小程序----列表下拉刷新上拉加载(MUI下拉刷新和上拉加载更多)

下拉刷新上拉加载效果图

微信小程序----scroll-view组件(MUI索引列表)滚动动画

scroll-view组件实现索引列表滚动动画效果

微信小程序----界面交互反馈API(wx.showToast(OBJECT)、wx.showModal(OBJECT))(MUI消息框)

界面交互反馈API效果图

微信小程序----radio组件

radio组件效果图

微信小程序----checkbox组件

checkbox组件效果图

微信小程序----switch组件(开关选择器)

switch组件效果图

微信小程序----slider组件

slider组件效果图

微信小程序----progress组件

progress组件效果图

微信小程序----导航栏选项卡(MUI顶部选项卡)

导航栏选项卡效果图

微信小程序----日期时间选择器(自定义精确到分秒或时段)(MUI日期时间)

精确到秒的微信小程序日期时间选择器

微信小程序----三级联动选择器(picker、省市区选择器)(MUI选择器)

效果图

微信小程序----折叠面板(MUI折叠面板)

折叠面板效果图

微信小程序----gallery slider(图片轮播)组件

微信小程序图片轮播动态图

微信小程序----侧滑菜单(Popup----左侧不动,右侧滑动)(MUI侧滑导航)

左侧菜单和右侧展示页面分为上下两层

微信小程序----侧滑菜单(Popup—左侧滑动,右侧不动)(MUI侧滑导航)

左侧滑动,右侧不动

微信小程序----导航栏滑动定位(实现CSS3的position:sticky效果)

微信小程序实现position:sticky

微信小程序----导航栏透明渐变一(MUI导航栏透明渐变)

导航栏透明渐变

微信小程序----导航栏透明渐变二(MUI导航栏透明渐变)

导航栏透明渐变

微信小程序----全国机场索引列表(MUI索引列表)

这里写图片描述

持续更新中…


http://chatgpt.dhexx.cn/article/Q6wn9RTT.shtml

相关文章

微信小程序作品实例

目录 简介 作品详情 作品代码 一、主页界面 1、WXML文件: 2、WXSS文件: 3、JS文件 4、JSON文件: 5、补充 二、购物车界面 1、WXML文件 3、JS文件 4、JSON文件 三、分类界面和个人中心界面 简介 这是我在学习完微信小程序后,写的一个小案例,是…

微信小程序开发之——微信小程序示例

一 概述 除了WeUI组件库,官方进行了扩展,包含组件库、扩展能力、接口和云开发示例 项目地址在线预览码预览界面miniprogram-demo 二 如何使用小程序示例 2.1 小程序示例——tabs 官方示例下的tabs位置 miniprogram-demo-master\miniprogram\page\we…

微信小程序相关操作示例

微信小程序相关操作示例 wxml-写页面for指令绑定事件数据绑定获取当前用户相关信息的方式跳转展示用户信息表单提交键盘输入的控制 js-写方法初始数据(字典):方法函数:存储图片到云开发平台存储访问服务器的request方式获取当前用…

小程序-demo:小程序示例

ylbtech-小程序-demo:小程序示例 1.返回顶部 0、 1、app.js const openIdUrl require(./config).openIdUrlApp({onLaunch: function () {console.log(App Launch)},onShow: function () {console.log(App Show)},onHide: function () {console.log(App Hide)},glo…

Toast与Snackbar的那点事

背景 Toast是Android平台上的常用技术。从用户角度来看,Toast是用户与App交互最基本的提示控件;从开发者角度来看,Toast是开发过程中常用的调试手段之一。此外,Toast语法也非常简单,仅需一行代码。基于简单易用的优点…

Flutter之SnackBar原理详解

初次学习SnackBar控件,第一反应就是这货怎么感觉跟Android的Toast一样!使用起来确实简单,但是其内部原理扒拉出来到时能学到一点东西,下面就细细的剖析这个组件。 Snackbar的作用就是在屏幕的底部展示一个简短的消息,与此同时&am…

Android Material Design 系列之 Snackbar 使用详解

前言 本文是 Material Design 系列第二篇:SnackBar 的提出实际上介于 Toast 和 Dialog 的中间产物,SnackBar 提供有关操作的轻量级反馈,它们在移动设备的屏幕底部显示一条简短消息。SnackBar 出现在屏幕上所有其他元素的上方,一次…

Android中Snackbar的介绍以及使用

Android中Snackbar的介绍以及使用 介绍 Snackbar可以说是Toast的升级版,不仅有显示信息的功能,还可以添加一个Action,实现点击功能,可以右滑删除。 效果图 Snackbar是Android Support Design Library库支持的一个控件&#xff0c…

安卓之SnackBar

SnackBar SnakeBar与Toast相似,不过SnakeBar可以与用户进行交互。 不过首先需要在app/bulid.gradle中添加一句依赖,操作方法如下 点击这个灯泡,选择Add Library dependency然后添加下面的依赖 implementation com.android.support:design:2…

使用Snackbar!——Android Snackbar花式使用指南

使用Snackbar!——Android Snackbar花式使用指南 本文是在《Design Support Library第三部分:Snackbar样式》和《Snackbar使用及其注意事项》两篇文章的启发下而来,首先对两篇文章的作者表示感谢。 Snackbar是Android Support Design Library库中的一个控…

Android 中的自定义 Snackbar

前言 Snackbars 在 Android 应用程序中很常见。几乎每个应用程序都使用 Snackbars 来显示有关应用程序中正在发生的事情的一些信息。您可以将 Snackbar 视为 Android 中 Toasts 的替代品或更好的版本。 默认情况下,Snackbar 显示在屏幕底部,它出现在屏…

Snackbar的使用

最近看到Material Design中的Snackbar,跟Toast很相似。似乎效果比原生的Toast好写(当然我们也可以自定义Toast成Snackbar的效果),至于Snackbar特别深入的定制目前了解甚少,所以这里简单记录一下常用的。 效果图 下面看一下效果 这里面加了个…

Android Snackbar控件

1. Snackbar类 Snackbar是5.0版本出现的控件,类似于Toast,显示在屏幕的底部,包含文字信息与一个可选的操作按钮。需要添加Design依赖库,并且使用Theme.AppCompat主题。 2. 创建Snackbar类 Snackbar利用静态方法make()来创建实…

Android Snackbar简单解析

偶然间发现android中有Snackbar类,还是有点意思,类似于toast。与toast相比,最明显的区别是:Snackbar只能在屏幕底部显示。其他用法基本与toast相似。 先来张效果图吧,静态图: 大概的用法呢?: S…

android Snackbar新控件解析

Dialog和Toast,我们在日常的开发中一定非常熟悉,常常被用来作为Android应用内提示性信息的两种展示方式。然而Google在Design包中又提供了一种新的选择,那就是Snackbar。今天主要介绍Snackbar新控件的使用,以及三种提示信息展示方…

android开发之SnackBar的使用

SnackBar是一个类似于Toast的东西,它也有显示时长,但是比Toast更加灵活,同时,我们还可以给SnackBar设置点击事件,那么我们今天就来看看怎么用吧! 先来一张效果图: 这种效果大家可能在一些App中…

Snackbar-Android M新控件

概述 查看官方API Snackbar 是 Android design support library 中的另一个组件。使用 Snackbar,可以在屏幕底部快速的显示一条消息,大体与 Toast 相同,但多了几分灵活性: 一小段时间之后、或者用户与屏幕触发交互,S…

Android Snackbar使用方法及小技巧-design

Snackbar和Toast相似,都是为了给用户提供交互信息,Snackbar是固定在底部的,显示时从下往上滑出 要使用Snackbar,需要在项目的build.gradle中添加依赖 dependencies {compile com.android.support:design:23.4.0 } Snackbar的使用…

Android 快别用Toast了,来试试Snackbar

🔥 应用场景 Toast提示默认显示在界面底部,使用Toast.setGravity()将提示显示在中间,如下: Toast toast Toast.makeText(this, str, Toast.LENGTH_SHORT);toast.setGravity(Gravity.CENTER, 0, 0);toast.show();运行在在Android …

Android---简易Snackbar

目录 Snackbar 简介 Snackbar 特性 完整Demo Snackbar 简介 Snackbar 是 Android5.0 新特性---Material Design 中的一个控件,用来代替 Toast。Snackbar 就是一个类似 Toast 的快速弹出消息提示的控件,手机上显示在底部,大屏幕设备显示在左…