随笔分类 - 微信小程序
摘要：微信小程序组件checkbox官方文档 传送门 微信小程序组件label官方文档 传送门 Learn 一、checkbox组件 二、label组件与checkbox组件共用 一、checkbox组件 需要有一个checkbox-group多项选择器去进行组合，内部有多个checkbox组成 disa
阅读全文
摘要：微信小程序表单组件button官方文档 传送门 Learn 一、button组件的使用 一、button组件的使用 size：按钮的大小【默认值default】 type：按钮的样式类型【默认值default】 plain：按钮是否镂空，背景色透明【默认值false】 disabled：是否禁用【默
阅读全文
摘要：微信小程序基础组件官方文档 传送门 Learn 一、icon图标组件 二、rich-text富文本组件 三、text文本组件 四、progress进度条组件 一、icon图标组件 type：icon的类型，有效值：success, success_no_circle, info, warn, wai
阅读全文
摘要：微信小程序movable-view组件官方文档 传送门 Learn 一、moveable-view组件 一、movable-view组件 direction：movable-view的移动方向，属性值有all、vertical、horizontal、none【默认值none】 使用<movable-
阅读全文
摘要：微信小程序swiper轮播图组件官方文档 传送门 Learn: swiper组件 一、swiper组件 indicator-dots：是否显示面板指示点【默认值false】 autoplay：是否自动切换【默认值false】 interval：自动切换时间间隔【默认值5000】 duration：滑
阅读全文
摘要：微信小程序scroll-view组件官方文档 传送门 提前准备：使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary <view > <!-- 手指按下后1s样式由a改变为d，手指松开后2s样式由d改变回a --> <view class='a s
阅读全文
摘要：微信小程序view组件官方文档 传送门 Learn 一、hover-class属性 二、hover-start-time与hover-stay-time属性 三、hover-stop-propagation属性 一、hover-class属性 hover-class：指定按下去的样式类。当 hove
阅读全文
摘要：小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器，所有子元素都是他的成员 定义布局：display:flex flex容器的属性： 一、flex-direction：排列方向 二、flex-wrap：换行规则 三、justify-content：对齐方式 四、ord
阅读全文
摘要：Demo：简单中国天气网首页 Page({ data:{ name:"CynicalGary", temp:"4", low:"-1°C", high:"10°C", type:"晴", city:"泉州", week:"星期五", weather:"无持续风行 微风级" } }) <view cl
阅读全文
摘要：Form表单、switch开关、数值选择器效果 官方文档：传送门 点击提交表单(按钮，提交开关，数值选择器，输入文本中)的值，显示在控制台上，点击重置，重置表单中的值。 实现过程 form表单，添加form-type属性到表单上 添加formSubmit和formReset函数，实现提交/重置表单函
阅读全文
摘要：picker组件效果 官方文档：传送门 Page({ data: { array: ['美国', '中国', '巴西', '日本'], objectArray: [ { id: 0, name: '美国' }, { id: 1, name: '中国' }, { id: 2, name: '巴西' }
阅读全文
摘要：map地图效果 官方文档：传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, latitude: 23.099994, longitude: 113.324520, width: 50, height: 5
阅读全文
摘要：(progress、text、block) 组件基础效果 官方文档：传送门 Page({ /** * 页面的初始数据 */ data: { text:"Gary 微信小程序\n", icons:[ 'success', 'success_no_circle', 'info', 'warn', 'wa
阅读全文
摘要：canvas画布效果 官方文档：传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, onReady: function (e) { // 使用 wx.createContext 获取绘图
阅读全文
摘要：swiper容器效果 官方文档：传送门 swiper容器可实现简单的轮播图效果 结构程序 Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--
阅读全文
摘要：scroll-view容器效果 官方文档：传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发
阅读全文
摘要：简单的数据传值 官方文档：传送门 点击"按钮"测试后，按钮文本改变，下方text文本改变，通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面的初始数据 data: { text:"Gary_测试ing", btntext:"按钮_测试" }, //生命周期函数
阅读全文