微信小程序
微信小程序
放大的EZ
本人郑重声明,本博客所编文章、图片版权归权利人持有,本博只做学习交流分享所用,不做任何商业用途。访问者可將本博提供的內容或服务用于个人学习、研究或欣赏,不得用于商业使用。同時,访问者应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人的合法权利;如果用于商业用途,须征得相关权利人的书面授权。若文章、图片的原作者不愿意在此展示內容,请及时通知在下,將及时予以刪除。
展开
-
微信小程序组件 按比例 布局排列
只需要在组件中加入flex-grow:1; 属性 就可以了.cost{justify-content:center;margin-top:10px;flex-grow:1;}原创 2021-08-22 19:52:00 · 671 阅读 · 0 评论 -
微信小程序 内部组件右对齐
原创 2021-08-22 19:35:41 · 6210 阅读 · 0 评论 -
微信小程序 之 定时器
简介:每一秒出发按一次事件,改变数字关键代码实现:var num= 0 ;data:{changedata:0},timechange:function(){num+=1;this.setData({changedata:num,});if(num>5){console.log("移除定时器")this.timer&&...原创 2021-08-22 19:00:53 · 4216 阅读 · 1 评论 -
微信小程序 view 中文字居中显示
主要是 在 view 组件中设置:display:flex; //显示 样式 固定justify-content:center; // 内容 左右居中align-items:center; //内容 上下居中原创 2021-08-19 23:41:23 · 9465 阅读 · 1 评论 -
微信小程序界面布局
1.组件横向排列父组件设置属性:display:flex; //弹性布局flex-direction:row; //布局方向 横向父组件设置2.组件纵向排列父组件设置属性:display:flex; //弹性布局flex-direction:row; //布局方向 纵向3.组件重叠排列子组件都使用 z-index 和 position 配合z-index 越小越在下面pos...原创 2021-08-19 23:27:08 · 4384 阅读 · 0 评论 -
微信小程序之组件轮廓 outline
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。用于显示一个view 的轮廓形状outline 其他属性:属性 说明 值 CSS outline 在一个声明中设置所有的轮廓属性 outline-color outline-style outline-width inherit 2 outline-color 设..原创 2021-08-18 23:33:38 · 528 阅读 · 0 评论 -
微信小程序 组件的边框设置 border
对于组件 view 有一个边框,我们可以对其进行设置<view class="test">test</view>效果展示:更多关于边框的属性border 简写属性,用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 border-color 简写..原创 2021-08-18 23:23:11 · 12147 阅读 · 0 评论 -
微信小程序 wxss之 background 属性
1. backgroundcolor<viewclass="teststycleone">这是一个测试</view>.teststycleone{width:400rpx;height:400rpx;background-color:red;}2.background-image微信小程序view background-image 不能够直接显示本地,但是可以显示网络图片.teststycleone{...原创 2021-08-18 20:02:01 · 4883 阅读 · 0 评论 -
微信小程序 城市选择器
1、效果展示2、文件结构布局3、布局文件 picker.wxml<!--工作原理:先给出一个省的对象,对象里每一个省都有一个编号,通过省的编号去找市,然后市又对应一个对象,每一个市都有一个编号,可通过不同的市去找各自县或者区 --><formbindsubmit='save'><viewclass="list"><viewclass="list-left">地区...原创 2021-08-10 23:30:06 · 2916 阅读 · 0 评论 -
微信小程序 简单计算器
1、效果展示2、页面布局文件<!--pages/calculator/calculator.wxml--><view class="screen"><view> {{result}}</view></view><view class="bottom"> <view class="btnGroup"><button bindtap="clickButton" id="{{id1}}".原创 2021-08-08 18:08:09 · 2503 阅读 · 3 评论 -
微信小程序 demo 分数录入
1、效果展示2、布局文件<input bindinput="inputName" placeholder="请输入姓名" placeholder-class="placeholder"></input><input bindinput="inputChinese" placeholder="请输入语文成绩" placeholder-class="placeholder"></input><input bindinput="inputM.原创 2021-08-08 14:38:10 · 812 阅读 · 1 评论 -
微信小程序 布局对齐属性
1、效果展示2、代码展示<!--引用模板import--><viewclass="content"><viewclass="content-item"style="background:skyblue">1</view><viewclass="content-item"style="background:#ff0000">2</view><viewclass="c...原创 2021-08-08 12:52:56 · 1693 阅读 · 0 评论 -
微信小程序 bind 和 catch 的区别
1、bind 不会阻止嵌套组件 event 事件上传一个嵌套组件 viewOne viewTwo,并且都有监听事件。我们点击之后,发现log输出:同时出发两个 view 的tap 事件。2、catch 会阻止嵌套组件的事件上传换成catch 之后 ,我们发现 log 只有 viewTwo 的事件被触发了。...原创 2021-08-08 12:28:46 · 1026 阅读 · 0 评论 -
微信小程序 编辑组件样式
1、view 组件 引用view 引用 组件样式 a b 并且设置自身文字颜色为红色1、wxss 文件 可以编辑组件样式其中 a 为本身文件夹中样式, b 为其他文件 样式。引用其他文件样式 采用 @import " 样式路径";...原创 2021-08-07 20:11:32 · 350 阅读 · 0 评论 -
微信小程序 获取 event 对象以及传递数据
绑定 tap 事件,并且添加数据:打印event 事件对象,以及里传递的数据获取:原创 2021-08-07 19:25:00 · 1424 阅读 · 0 评论 -
微信小程序点击事件
1、效果2、界面布局通过 bind 或者 catch 属性 来绑定相关事件,和触发时调用函数3、逻辑文件在 pages 中 填写 处理的 逻辑 :原创 2021-08-07 19:14:15 · 5293 阅读 · 0 评论 -
跨页面引用页面组件
1、template 使用 ipmort 引用foxmail 一个template,一个 view在qq 页面 通过 import 来引入template第二方 引用第三方的template,不能通过 impoort 第二方 来引用wx有个 template 被 fox 引用但是 qq 在引用 wx 本身 template 的时候 可以,在引用 wx template 的时候找不到但是 可以通过 我们下面的 include 来...原创 2021-08-07 18:56:34 · 324 阅读 · 0 评论 -
template 模板 一类相似view 格式输出
1、定义以组数据2、使用template 显示类似的格式组件原创 2021-08-07 18:17:19 · 124 阅读 · 0 评论 -
wx:for 循环显示界面
1、初始化数据2、在wxml 中 进行wx:for 的判断和显示:<!--pages/test/test.wxml--><view wx:for="{{student}}"><view> {{index}} ---- {{item.name}}</view></view><view wx:for="{{student}}" wx:for-index="i" wx:for-item="studentage">&.原创 2021-08-07 18:03:12 · 294 阅读 · 0 评论 -
wx:if wx:elif wx:else 控制界面显示
原创 2021-08-07 17:13:53 · 238 阅读 · 0 评论 -
微信小程序中i数据绑定
1、数据的初始化每个页面都有对应的 .js 文件,里面有 data 数据 ,用来初始化界面数据的引用,对应的 .wxml文件 ,通过 { {键值对}} 来实现,引用。原创 2021-08-07 16:56:07 · 98 阅读 · 0 评论 -
tabbar 列表切换
1、效果展示:2、项目结构3、 app.json 代码{"pages":["pages/qq/qq","pages/wx/wx","pages/foxmail/foxmail","pages/logs/logs","pages/index/index"],"window":{"backgroundTextStyle":"light","navigationB...原创 2021-08-07 15:28:59 · 184 阅读 · 0 评论 -
微信小程序创建新的界面
1、找到 app.json然后再pages 里面自己想添加的路径和文件名,保存。就会自动添加刷新:pages 放在第一位置的 item 为默认起始界面。原创 2021-08-07 13:21:05 · 348 阅读 · 0 评论 -
微信小程序开发环境搭建
1、登录微信公正平台微信公众平台2转载 2021-06-17 19:32:44 · 1927 阅读 · 0 评论