小程序
moozixiao
这个作者很懒,什么都没留下…
展开
-
小程序之自定义顶部导航
小程序之自定义顶部导航原由:根据UI图的设计开发,小程序自带的顶部导航并不适合项目开发的需求,所以需要封装一个组件来实现。步骤1.根据文档字段,隐藏自带的导航 ---- 文档地址属性类型默认值描述最低版本navigationStylestringdefault导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮微信客户端 7.0.02.使用API,获取状态栏以及胶囊按钮的数据系统信息 ---- wx.getS原创 2020-09-03 12:38:28 · 1110 阅读 · 0 评论 -
小程序之表单验证
小程序之表单验证使用 WxValidate.js 插件来校验表单数据常用实例方法:名称返回类型描述checkForm(e)boolean验证所有字段的规则,返回验证是否通过。valid()boolean返回验证是否通过。size()number返回错误信息的个数。validationErrors()array返回所有错误信息。addMethod(name, method, message)boolean添加自定义验证方法。思路原创 2020-07-24 18:05:13 · 4189 阅读 · 0 评论 -
小程序之底部弹出层+animation
需求:固定在底部的 显示/隐藏 按钮,当它点击时,从底部显示一开始设置了隐藏的 modal 层;然后再点击时隐藏modal 层。主要通过 modalStatus bool变量 来控制,若不用视觉效果只需设置 modalStatus;然而想要视觉效果,则就可以加入 animation 来设置了。小程序 动画对象 animation1.创建一个animation对象 ------ wx.createAnimation(Object object)包含以下属性:属性类型默认值必填说明原创 2020-06-20 08:03:53 · 631 阅读 · 0 评论 -
小程序之map组件(从我的位置到指定位置导航)
所用到的组件 + APImap组件wx.getLocation(Object object) – 获取当前的地理位置、速度。wx.openLocation(Object object) – 使用微信内置地图查看位置。 map地址 API地址app.json 配置"permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }},.xml<view原创 2020-06-19 17:59:37 · 1973 阅读 · 0 评论 -
小程序6位密码模态框及验证组件
视觉效果其实是通过偏移了 input 输入框(input 设置最大长度),然后根据输入框的 value 值的输入设置六个方框的显示效果,最终所需要的只是 input 的 value 值,并判断当它到达最大长度时的输入校验。思路创建类名 container 作为最外层创建类名 inputWrap 作为内容层其包含 关闭(close),提示(tip),还有 6 个小框(itemWrap -> item)小框(item)通过 wx:for 实现,然后判断 input 的 value 值长原创 2020-05-26 20:03:05 · 757 阅读 · 0 评论 -
小程序之使用Iconfont
1.在 iconfont 官网 添加需要的字体图标2.找到添加了字体图标的项目,选择 下载到本地3.将压缩包解压,拿到 iconfont.css4.在 iconfont 官网 找到项目的 Unicode,复制 @font-face 的代码5.在 iconfont.css 中 将复制的代码替换到相应位置即可并修改 .css 为 .wxss6.在 iconfont.wxss 中可以根据自己项目要求修改 图标 class 名称...原创 2020-05-21 12:54:42 · 463 阅读 · 0 评论 -
小程序之fitler.wxs
通过使用.wxs 来实现数据的过滤创建 filter.wxs,使用 引入并使用代码如下:filter.wxsvar status = function(val) { switch(val) { case 1: return val = '报名中'; break; case 2: return val = '已截止'; break; case 3: return val = '已结束'; break;原创 2020-05-21 12:50:09 · 179 阅读 · 0 评论 -
小程序之基础介绍
小程序文件结构与传统web对比微信小程序传统web结构WXMLHTML样式WXSSCSS逻辑JavascriptJavascript配置JSON无项目基本目录模板语法数据绑定<view> {{ sayHello }} </view>Page({ data: { sayHello: 'Hello MooZiXiao!' }})组件属性<view id="item-{{id}}"&g原创 2020-05-21 09:02:27 · 312 阅读 · 0 评论