微信小程序实例系列

实战

  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索引列表)

这里写图片描述

持续更新中…

  • 72
    点赞
  • 763
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
以下是一个简单的表单微信小程序实例,包含姓名、性别、年龄和联系方式四个字段: 1. 在微信开发者工具中创建一个新的小程序项目,选择“空白模板”。 2. 在 app.json 中添加以下代码,配置页面路由: ``` { "pages": [ "pages/index/index", "pages/form/form" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "表单", "navigationBarTextStyle": "black" } } ``` 3. 在 pages/index 目录下创建 index.wxml 文件,添加一个“进入表单”按钮,点击后跳转到表单页面: ``` <view class="container"> <button class="btn" bindtap="goToForm">进入表单</button> </view> ``` 4. 在 pages/index 目录下创建 index.js 文件,添加 goToForm 函数,用于跳转到表单页面: ``` Page({ goToForm: function() { wx.navigateTo({ url: '../form/form' }) } }) ``` 5. 在 pages/form 目录下创建 form.wxml 文件,添加表单元素: ``` <view class="container"> <form bindsubmit="submitForm"> <view class="input-group"> <text>姓名:</text> <input name="name" placeholder="请输入姓名"></input> </view> <view class="input-group"> <text>性别:</text> <radio-group name="gender"> <label><radio value="male"></radio>男</label> <label><radio value="female"></radio>女</label> </radio-group> </view> <view class="input-group"> <text>年龄:</text> <input name="age" type="number" placeholder="请输入年龄"></input> </view> <view class="input-group"> <text>联系方式:</text> <input name="contact" placeholder="请输入联系方式"></input> </view> <button class="btn" formType="submit">提交</button> </form> </view> ``` 6. 在 pages/form 目录下创建 form.js 文件,添加 submitForm 函数,用于提交表单并跳转回首页: ``` Page({ submitForm: function(e) { wx.showToast({ title: '提交成功', icon: 'success', duration: 2000, success: function() { wx.navigateBack() } }) } }) ``` 7. 在 app.wxss 中添加样式: ``` .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .btn { margin-top: 20px; padding: 10px 20px; border: none; border-radius: 5px; background-color: #007aff; color: #fff; } .input-group { display: flex; flex-direction: row; align-items: center; margin-top: 20px; } input { flex: 1; height: 30px; border: 1px solid #ddd; border-radius: 5px; padding: 5px; } label { margin-left: 10px; } .btn[type="submit"] { margin-top: 40px; } ``` 以上就是一个简单的表单微信小程序实例,可以根据实际需求进行修改和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rattenking

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值